Masonite is a beautifully crafted Web 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.

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

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

$ pip install masonite-cli
$ craft new masonite__
$ cd masonite__mix
$ craft install

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 , letโ€™s go ahead and a simple html file.

...
<link rel="stylesheet" href="http://www.codementor.io/public/css/app.css">
...
<script src="http://www.codementor.io/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:

Masonite & Laravel Mix

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

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.



Source link

LEAVE A REPLY

Please enter your comment!
Please enter your name here