How to setup a Craft CMS project with Laravel Mix 
Tags: webpack, tailwindcss, vue, laravelmix
Published: 2021-06-17 13:14:47

*This article was originally posted on [daafbleumink.com](https://daafbleumink.com).*

Want to set up a Craft CMS project with Laravel Mix? Look no further!

## Prerequisites
- MacOS
- Laravel Valet <small>([installation instructions](https://laravel.com/docs/valet#installation))</small>
- Node
- Composer
- Sequel Pro <small>(or another database management application)</small>

## Create a local database
Start your database management application.

Connect to Valet using the following (default) credentials.

```
Host: 127.0.0.1
Username: root
Password: leave blank
```

Click **Choose Database...** in the left top followed by **Add Database...**.

Give it a name and press **Add** <small>(for this article I used "Craft")</small>.

## Set up a local Craft CMS installation
"CD" into your code or sites directory and enter the following command:

``` bash
composer create-project craftcms/craft your-project-name
```

You could replace "your-project-name" by, you guessed it, your project name.

For this article I went with "tutorial".

Next you're asked "Are you ready to begin the setup?". Typ "yes" and press return.

Then you're taken through the installation wizard. The details I entered:

|         |            |
| ------------- |-------------|
| <b>Database driver</b>  | mysql |
| <b>Database server</b>  | 127.0.0.1 |
| <b>Database port</b> | 3306 |
| <b>Database username</b> | root |
| <b>Database password</b> | <i>leave blank</i> |
| <b>Database name</b> | Craft |
| <b>Database table prefix</b> | <i>leave blank</i> |

Next you're asked asked "Install Craft now?". Press return. The details I entered:

|         |            |
| ------------- |-------------|
| <b>Username</b>  | daafbleumink |
| <b>Email</b>  | info<span>@</span>daafbleumink.com |
| <b>Password</b> | SuperSecret |
| <b>Site name</b> | Craft CMS Test |
| <b>Site URL</b> | ht<span>tps://</span>tutorial.test |
| <b>Site language</b> | nl |

Now when you visit the URL you entered in the previous step you will be greeted by something like this:

![craft cms laravel mix unsecure](https://ik.imagekit.io/730/tr:ar-16-9,w-900/craft-cms-laravel-mix-unsecure.png)

As you notice, it's <i>not secure</i>. Let's do something about that!

Open up your terminal and type in:

``` bash
valet secure tutorial
```

Replace "tutorial" by the project name you entered in step 1.

Now you should be able to visit your local URL safely and login with the details you provided!

## Implementing Laravel Mix
Let's get to the juicy part of this article!

Initiate an NPM project and install Laravel Mix.

``` bash
npm init -y
npm install laravel-mix --save-dev
```

Create a Laravel Mix config file.

``` bash
touch webpack.mix.js
```

To show you the basic beauty of Laravel Mix, add the following to your `webpack.mix.js`.

``` javascript
// webpack.mix.js

let mix = require('laravel-mix');

mix.js('src/app.js', 'dist').setPublicPath('dist');
```

This instructs Laravel Mix to compile `src/app.js` and save it to the `/dist` directory.

Create a `src/app.js` file with some basic (valid) code.

``` javascript
// src/app.js

alert('hello world');
```

Now run the following.

``` bash
npx mix
```

Take a look at those sweet compiled files! 🤩

Ofcourse you don't want to run `npx mix` everytime. Here are the basic scripts I use. Add these to the `scripts` section of your `package.json` and you should be good to go.

``` json
// package.json

"scripts": {
    "dev": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js",
},
```

To use the Laravel Mix files in your Craft templates I recommend using [this Craft plugin](https://plugins.craftcms.com/mix).

## Example in practice
So, we learned to set up a basic Craft CMS project with Laravel Mix. For me personally, I learn the most from examples in practice.

Below you will find my basic `webpack.mix.js` file for starter projects. It includes:

- Tailwind CSS (JIT) <small>(compiled from SASS)</small>
- VueJS support
- BrowserSync support

``` javascript
// webpack.mix.js

let mix = require('laravel-mix');

let domain = 'tutorial.test';
let homedir = require('os').homedir();

require('mix-tailwindcss');

mix
    .js('src/app.js', 'dist')
    .vue()
    .extract(['vue'])
    .setPublicPath('dist');

mix
    .sass('src/scss/app.scss', '/')
    .tailwind('./tailwind.config.js');

mix.browserSync({
    proxy: 'https://' + domain,
    host: domain,
    open: 'external',
    browser: 'Brave Browser', // or Chrome / Safari for example
    https: {
        key: homedir + '/.config/valet/Certificates/' + domain + '.key',
        cert: homedir + '/.config/valet/Certificates/' + domain + '.crt',
    },
    notify: false
});

// only version the files in production
if (mix.inProduction()) {
    mix.version();
}
```

I tried commenting some things in the file so you can get a gist of what's going on.

When you're stuck with any questions, please [send me a tweet](https://twitter.com/intent/tweet?text=%40daafbleumink%20question%20about%20Craft%20and%20Laravel%20Mix%3A)! I would love to help you 😁

You're also most welcome to tweet at me to feedback my work!