Kirby Webpack : a Kirby starter-kit with modern frontend tools

[antoine1000]

Hello everyone,

After a few days of development, we just launched Kirby-Webpack : a kirby starter-kit with modern frontend tools. Main features are a Kirby Package Manager for your plugins, livereloading on development, LESS (or SASS or Stylus !) + Post CSS + Autoprefixer, and you can use ES6 javascript.

As front-end developpers, we use more and more javascript in our code and we needed a tool that brings the power of Webpack to our everyday use of Kirby.

We tried to make Kirby-Webpack the more flexible to configure and work with. Althought, the main commands are pretty basic : you basically only need to know npm run start and npm run build. You can see the full documentation on the github page for more details : https://github.com/brocessing/kirby-webpack

If you tried it, tell us what you think! And if you notice some bugs or problems, you can contribute with an issue or a pull request on the github project.

Thanks!

Brocessing

[jimbobrjames]

Nice job! Looks really nice, and fairly similar to my own setup. I’ll have a mess with it and let you know if I find an issues.

[jimbobrjames]

This is actually really neat, and I would love to use it in anger

There is one thing stopping me though. I use Vagrant, so I would need to strip away all the stuff for running the built in PHP server so i can use browsersync through a proxy…

C’est la vie.

[antoine1000]

Hi Jim !

First, thanks for your feedback !

We have just added a proxy option in the main.config.js file! This way you can use your own local environment server. Built-in php server will not be created. The proxy value will be passed to the proxy option of browser-sync.

We also have reduced the dependency footprint. If you don’t use the built-in php server, you only have one useless sub-dependencies (@pqml/node-php-server).

Hope it will fix your issue !

[jimbobrjames]

@antoine1000 Awesome! Thanks

[jonathanhess]

Hi @antoine1000,
Thanks alot for your work. I really like your webpack. I just played around a bit and I can’t get it to work with a proxy. I use lavarel valet as php server where I can link the www to something like yoursitename.dev. But now the processing of less and or browser-sync don’t seem to work.
I found an issue with valet and browser-sync which could be solved with the following config:

mix.browserSync({
    proxy: 'yoursitename.dev',
    port: 8000
});

But I’m really new to browser-sync and don’t know, where to put this code?
Can someone point me to the right direction? Thanks for every hint.

[jimbobrjames]

The problem here is that your mixing up techologies.

Out of the box, the kirby webpack uses a built in PHP server. It does not use Valet, but it does use browsersync.

There is a proxy setting in the config that if you set a local domain name like 'yoursitename.dev' it will switch off the built in PHP server, and expect you to have your own local domain running on a local server, which might be via Vagrant or mamp.

I have not tested it with Valet.

The snippet you posted is for Larval Mix which is something else entirely, unrelated to kirby webpack.

If you do have local server running, open up main.config.js and change line 36 to match your local domain name. Re-run Kirby webpack and it should proxy that domain.

[jonathanhess]

Hi, thanks for your reply and clarification.
I tried to set the proxy in main.config.js. The site is running, but not with browser-sync. The bundle.css doesn’t get loaded correctly.

But maybe I just have to go with the bulid in php server.

I’ve chosen valet because its very easy du secure links. So you can run your site locally with https://yoursitename.dev.

[jimbobrjames]

Valet is not “real”. It is a light weight solution to running a website locally. I would suggest considering upgrading to Homestead (when I tested Kirby Webpack myself, this is what i used.)

[pqml]

Hi @jonathanhess,

There was indeed an error when you specify the protocol in the proxy option.
I think I fixed it with the the new 0.6.0 update. I tried with both a secure and an insecure vhost from Valet and it works fine.

Valet seems to not serve from localhost, so you will have to go to /www/site/config and rename config.localhost.php to match your vhost. For instance, rename it config.yoursitename.dev.php if the virtual host you use is yoursitename.dev.

One drawback of proxying a https server is that you will have an “untrusted certificate” error, since browser sync doesn’t handle the localhost certificate for you.

• Since it’s a development environment, you can just skip the error and continue to the website
• You can also create and pass a self-signed certificate to browser sync with the https option. The browser sync options are set in scripts/webpack-serve.js from line 111 to line 135. You will need to add something like this to the options object:

    https: {
      key: '/path/to/localhost.key',
      cert: '/path/to/localhost.crt'
    }

[jonathanhess]

This is great news. Thank you very much. Now it looks like it is working…
But what I didn’t get on the first try is, that I have to enter localhost:8080 in my browser. I thought I have to enter my yoursitename.dev. But this makes totally sense, because localhost is serving my vhost…

[jimbobrjames]

Not quite - localhost:8080 is passing though yoursitename.dev. This is the proxy working. There is no site running on localhost. When you look at that, you are actually viewing yoursitename.dev.

[pqml]

Update: We’ve added content reloading between the panel and the website!

[ssigur]

Hello,

Thank you for kirby Webpack.

Concerning the update mentioned in the last comment,

@pqml

content reloading between the panel and the website

is it possible to have the ability to config for don’t have automatic reload?

(I’am testing kirby shopkit and it seem’s that this behaviour bring on a bug on the cart page)

Thank you.

[pqml]

There is not direct option like in main.config.js but it’s really easy to disable.

Simply open /scripts/webpack-serve.js and comment lines 151 to 153:

// custom event for change in the www/content folder
bs.watch(path.join(user.paths.www, 'content', '**/*')).on('change', (file) => {
  instance.io.sockets.emit('kirby:contentupdate', { file: file })
})

becomes

// custom event for change in the www/content folder
// bs.watch(path.join(user.paths.www, 'content', '**/*')).on('change', (file) => {
//   instance.io.sockets.emit('kirby:contentupdate', { file: file })
// })

[ssigur]

Thank you, it works!

[jonathanhess]

Hi @pqml, thanks again for this webpack port. I really love using it. It makes stuff so much easier…
But now I run in to a problem with sass compiling. I hat a html5up theme (https://html5up.net/massively) which uses skel.io . When I compile the sass-file it doesn’t get correctly built. Is there I way I can set up how sass is compiled?
The first difference is, that it inserts @imported css files. If I compile the same sass file with the terminal (or codekit) the css file is just linked and not insert.
But my actual problem is how it compiles the skel.scss file.

What should look like this:

.\31 2u, .\31 2u\24 {
  width: 100%;
  clear: none;
  margin-left: 0;
}

looks like this:

  .\31 2u28xlarge29, .\31 2u2428xlarge29 {
    width: 100%;
    clear: none;
    margin-left: 0
  }

Is there a way to get this solved by a different weback config? Or how can I compile it correctly?
Sorry, I’ve no other experience with webpack.

Thanks for all your effort.

[jimbobrjames]

Looks to me like your files might have the wrong encoding. Check they are definatly UTF-8 files.

[jonathanhess]

No, that’s not the point. All files seems to be utf-8 encoded, even the compiled file. But thanks for this hint.

[jimbobrjames]

I just compiled this correctly with Webpack, but not with kirby webpack.

The result I got was:

.\31 2u, .\31 2u24 {
  width: 100%;
  clear: none;
  margin-left: 0;
}

Looks like your getting a variable name output in the code rather then the value of the variable. Are you sure the files are in the correct order?