How to Use Laravel Mix without Laravel Step by Step

Laravel Mix is a powerful tool and NPM package. So, using Laravel Mix, you can compile sass, scss files, Vuejs files and ES6 features. Also, it’s fast and easy to start using. Besides, you can easily customizer Laravel Mix for your project. So, in this tutorial, you’ll learn how to use Laravel Mix without Laravel project. The latest version of Laravel projects has pre-install Laravel Mix.

Use Laravel Mix without Laravel Step by Step

We are going to do everything step by step on how you can use Laravel Mix without Laravel, so you will not miss anything.

Requirements:

We require the following criteria. If you want to follow the tutorial to make sure you have the NPM and Nodejs installed on your system. If you don’t have installed those, then go to nodejs.org, download and install. It will not take more than 2 minutes. Besides, you must have basic knowledge of NPM usage.

1. Create a Project

Simply, create a folder anywhere on your computer. Then run the following command to initialize NPM files.

npm init -y

The command creates a package.Json file in your folder with simple boilerplate. Then, open your project in your favorite text editor.

2. Install NPM Packages

Now, let’s install a few NPM package plus Laravel Mix. So, we’re going to install all of them at once. To do so, list your packages name in your package.json file.

So, open your package.json file and add the following code. We will install a few essential packages.

{
  "name": "laravel-mix",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
        "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": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "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",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "laravel-mix": "^1.0",
        "bootstrap-sass": "^3.3.7",
        "cross-env": "^5.0.1",
        "jquery": "^3.1.1",
        "vue": "^2.1.10"
  },

  "keywords": [],
  "author": "",
  "license": "ISC"
}

So, your package.json file should look like the above. The devDependencies part is the list of packages we want to install. So, run now run the following command in your command line to download the packages.

npm install

It will take a while to install the packages, so be patient. So, after installing completed, continue the next step.

3. Configure the Laravel Mix Files

After installing the packages, now you can start creating Laravel mix files.

You go to “node_modules/laravel-mix/setup/webpack.mix.js” and copy the webpack.mix.js file to the root directory of your project. Also, you can create the file yourself and add the following code inside.

webpack.mix.js

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

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

The above just require Laravel mix, then look in “src/app.js” and compile to “dist/” folder. So, we need the create those files.

4. Add Code to Compile

Now let’s add some code our app.js file to compile and test if everything is working.

So, add the following code in your app.js file. It’s just for the demo, of course, you can add any code you want.

window.$ = window.jQuery = require('jquery');
require('bootstrap-sass');

The code will add jQuery and bootstrap file.

Now, open your command line and run the following code.

npm run production

The production and other command list are written in the package.Json file.

For me, the compilation starts and go till 95%. Then it stopped.

It’s not going further. So, there must be a problem.

5. How to Fix Laravel Mix 95% emitting Stop Problem

So, let’s fix it. Before doing that, you know know what’s the problem. Thus, it can’t find the public folder or where to compile the files. Here is how you fix it.

Open your webpack.mix.js file and add the following code right after you require Laravel Mix.

mix.options({
    publicPath: 'dist'
})

Now, terminate the emitting process by pressing Ctrl + C two times and re-run the production command. It should work now.

Conclusion

We hope this article has been informative for you and you enjoyed reading. So, it’ how you can use Laravel Mix without Laravel. Further, we have a forum where you can ask any types of questions and get instant answers. So, feel free to join us.