Let's make Masonite Framework and Laravel Mix work together

Masonite is a beautifully crafted Web Framework for Python. We usually use files like CSS, JavaScript and image files known as Web assets to make our web app looks great.

In this article, I'll show you how you can use Laravel Mix for processing and compiling assets into your Masonite web app.

What is Laravel Mix?

Laravel Mix makes asset compiling incredibly easy.
Using Laravel Mix with Masonite is really a simple task. There we go!

Create a new Masonite project

Before we get started, create a new Masonite project. Just install Masonite's CLI called craft.

$ pip install masonite-cli
$ craft new masonite_laravel_mix
$ cd masonite_laravel_mix
$ craft install

Install and setup Laravel Mix

Laravel Mix can be used for any type of application, not just for Laravel apps. To get started, just install laravel-mix as our project dependency.

$ npm install laravel-mix

Put webpack config file into our project root.

$ cp node_modules/laravel-mix/setup/webpack.mix.js .

Then, add this sample script into webpack.mix.js like Laravel does.

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

This is definition of our asset pipeline. It's time to add some npm scripts.

"scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "npm run development -- --watch",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
}

I just copied this npm scripts from Laravel repository - again 😅.
This scripts helps in asset compilation for development or production.
As you can see it, you need to install cross-env to make it works well.

$ npm install cross-env

Now that we’ve done all the hard work, let’s go ahead and a simple html file.

...
<link rel="stylesheet" href="/public/css/app.css">
...
<script src="/public/js/app.js"></script>
...

Simple thing to make all this stuff work is to create a template alias. All configurations that are specific to static files can be found in config/storage.py.
In this file we'll add a constant to STATICFILES which is simply a dictionary:

STATICFILES = {
    # folder  # template alias
    'public': 'public/'
}

We did it 🎉 🎉 🎉! You should see a screen similar to this:

You can watch this repository where I add Bootstrap as dependencies and use it as sample!

nioperas06 / masonite-laravel-mix

🎨 Masonite and Laravel Mix for processing and compiling assets

Masonite - Laravel Mix

Let's make Laravel Mix and Masonite Framework work together.

This application is a demo on how you can use Laravel Mix for processing and compiling assets.

View tutorial: Link

Built With:

• Masonite - The Modern And Developer Centric Python Web Framework.
• Laravel Mix - An elegant wrapper around Webpack for the 80% use case.

View on GitHub

Conclusion

Hopefully this article has helped you understand how Masonite and Laravel Mix can be used together for processing and compiling assets. If you want to contribute or interested in the development of Masonite then be sure to join the Slack or star Masonite's repository on GitHub.