Trying a different framework after using Laravel is anything but easy. And as I was expecting, it didn’t take me too long to realize this. Laravel is not only a solid, well-written, and well-documented framework but it also brings with it a handful of essential packages such as Cashier, Socialite, Echo, Dusk etc. These packages are officially supported and make your day to day job as a web developer much enjoyable and very productive.
Yes, I know there are many build tools such as Gulp, Webpack, Grunt, Rollup etc. But, for better or worse, Laravel has spoiled me. I want to be more productive writing actual code and not spent hours fiddling with configurations.
Thankfully, Laravel Mix, despite its name, seems to work well with any other kind of frameworks including Vapor. There are few Laravel specific features such as the need for a function called
mix if you need versioning but nothing that should block us from using it in our own Vapor project. In this post, I’ll show you how to integrate Laravel Mix in your own Vapor project. …
1: Create a new Vapor project:
2: cd into
Hello directory and initialize
npm to create a new
3: Let’s install
We are now ready to compile our assets but first we need some assets. For this article, let’s create one
.js file and one
app.js file and add this:
app.scss file and add this:
You need a
webpack.mix.js file in the project’s root folder.
1: Create a new file
webpack.mix.js under project’s root folder, open it and add the following:
Here, we are saying that we want to compile
Public/js/app.js file and
Now, we need to add some triggers to actually run compilation using this file.
package.json file and add/ modify
scripts object to include these npm scripts:
3: Now from the command line run:
If everything goes well, you should see a Compiled successfully message.
You should have two new files under your Public folder:
Public/css/app.css (Don’t worry about
manifest.json file for now). You can add these assets to your view files the way you would include any other .js or .css files.
If you want your assets to be compiled every time you make changes to one of your assets file, run this command:
When you are ready to publish your web app, you want your assets to be minified. In such case, you want to run:
You can clone or fork the sample project for this tutorial on GitHub here: https://github.com/ashokgelal/laravel-mix-with-vapor
In a future post we’ll cover other frontend awesomeness in a Vapor project such as using Vue.js, using Hot Module Replacement with Webpack and Vue, versioning your assets for cache busting and some more.
Don’t forget to bookmark this site and come back for more. If you want to say hi, I’m @ashokgelal on Twitter.