Start a personal dev blog on your domain for free with Hashnode and grow your readership.
Get Started

How to setup a Craft CMS project with Laravel Mix

With VueJS, TailwindCSS and BrowserSync support

Want to read more like this? Visit daafbleumink.com.

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

Prerequisites

Create a local database

  1. Start your database management application
  2. Connect to Valet using the following (default) credentials:

     Host: 127.0.0.1
     Username: root
     Password: leave blank
    
  3. Click Choose Database... in the left top followed by Add Database...

  4. Give it a name and press Add (for this article I used "Craft")

Set up a local Craft CMS installation

  1. "CD" into your code or sites directory and enter the following command:

     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".

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

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

     Database driver: mysql
     Database server: 127.0.0.1
     Database port: 3306
     Database username: root
     Database password: leave blank
     Database name: Craft
     Database table prefix: leave blank
    
  4. Next you're asked asked "Install Craft now?". Press return. The details I entered:

     Username: daafbleumink
     Email: info@daafbleumink.com
     Password: SuperSecret
     Site name: Craft CMS Test
     Site URL: https://tutorial.test
     Site language: nl
    
  5. 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

  6. As you notice, it's not secure. Let's do something about that!

    Open up your terminal and type in:

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!

  1. Initiate an NPM project and install Laravel Mix.

     npm init -y
     npm install laravel-mix --save-dev
    
  2. Create a Laravel Mix config file.

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

     // 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.

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

     // src/app.js
    
     alert('hello world');
    
  5. Now run the following.

     npx mix
    

    Take a look at those sweet compiled files! 🤩

  6. 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.

     // 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.

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) (compiled from SASS)
  • VueJS support
  • BrowserSync support

      // 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! I would love to help you 😁

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

Start a personal dev blog on your domain for free and grow your readership.

3.4K+ developers have started their personal blogs on Hashnode in the last one month.

Write in Markdown · Publish articles on custom domain · Gain readership on day zero · Automatic GitHub backup and more

No Comments Yet