Using Laravel-Mix with Phoenix

post.md

Introduction

Laravel-Mix is "an elegant wrapper around Webpack for the 80% use case". It has nothing to do with Elixir's Mix and does not require Laravel to work!

Set up

Create a new phoenix application with mix phx.new. You may choose to add the --no-brunch flag to stop brunch from being intiailized, but I personally prefer leaving that in and replacing brunch so that the folder structure is set up for me.

$ mix phx.new demo

Install Laravel-Mix

cd into your project.

$ cd demo/assets

Remove all of the devDependencies in the package.json file. Then install laravel-mix and webpack.

$ npm install [email protected] webpack --save-dev

NOTE: There is a bug in 0.12.0 where the JS file is moved after compilation. Use 0.11.3 for now. Copy the default generated webpack and laravel-mix configs into your project assets directory.

$ cp -r ./node_modules/laravel-mix/setup/** ./

Open webpack.mix.js and replace the default settings with the following. You can change or add anything you want; the API is included in the file.

mix.js('./js/app.js', './js/app.js');
mix.sass('./css/app.scss', './css/app.css');
mix.copyDirectory('./static', '../priv/static');

mix.disableNotifications();
mix.setPublicPath('../priv/static');
mix.options({
  clearConsole: false,
});

If you are using the configuration above, you will need to replace assets/css/app.css with assets/css/app.scss, and you will need to import any (s)css files you want to include as they will not be automatically imported.

Then you will need to update the package.json scripts so that it uses webpack instead of brunch.

{
  "scripts": {
    "deploy": "webpack -p",
    "watch": "webpack --watch --colors --progress"
  }
}

Update dev.exs so that it uses these scripts. In the Endpoint config, replace watchers.

config :demo, Demo.Web.Endpoint,
  watchers: [npm: ["run", "watch",
    cd: Path.expand("../assets", __DIR__)]]

You're almost done! Just remove the auto generated brunch-config.js file, and the priv/static folder (so that the old brunch-compiled files are removed) and then run the server.

$ mix phx.server

You're done! Hope you enjoy using the much simpler, yet more powerful: laravel-mix.