Let's make Masonite Framework and Laravel Mix work together 
Tags: python, framework, masonite, javascript
Published: 2018-08-22 22:22:48

---
title: Let's make Masonite Framework and Laravel Mix work together 
published: true
description: Learn how to use Laravel Mix for processing and compiling assets into your Masonite web application
tags: python,framework,masonite,javascript
cover_image: https://thepracticaldev.s3.amazonaws.com/i/fqyfv134cr0enzmrqnr6.png
---

**[Masonite](https://github.com/MasoniteFramework/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](https://github.com/JeffreyWay/laravel-mix) for processing and compiling assets** into your **[Masonite](https://github.com/MasoniteFramework/masonite)** web app.

# What is Laravel Mix?

**[Laravel Mix](https://github.com/JeffreyWay/laravel-mix)** makes **asset compiling** incredibly easy.
Using **[Laravel Mix](https://github.com/JeffreyWay/laravel-mix)** with **[Masonite](https://github.com/MasoniteFramework/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**.

```bash
$ 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](https://github.com/laravel/laravel/blob/master/webpack.mix.js) 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](https://github.com/laravel/laravel/blob/master/package.json) - 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:

![Masonite & Laravel Mix](https://thepracticaldev.s3.amazonaws.com/i/i2q894fghtwrwzfu5krz.png)

You can watch this [repository](https://github.com/nioperas06/masonite-laravel-mix) where I add Bootstrap as dependencies and use it as sample!

{% github nioperas06/masonite-laravel-mix %}

# 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](http://slack.masoniteproject.com/) or star [Masonite's repository](https://github.com/MasoniteFramework/masonite) on GitHub.