Simple tricks for working with Laravel Mix

README.md

Simple tricks for working with Laravel Mix

Problems

1. Start PHP development server or (artisan serve) along side webpack-dev-server in single command
2. Serve static files inside storage/app/public without creating symlink to public directory

Solution

1. Use node child_process to spawn artisan serve command while starting webpack-dev-server
2. Use browser-sync's staticServe options

Results

Simply run

$ npm run hot

and then visi http://localhost:3000 we'll see our development server is running seemlessly.

• Laravel development server running at port 8000
• BrowserSync proxy server running at port 3000
• Webpack Dev Server for Hot Module Replacement running at port 8080

webpack.mix.js

const mix = require('laravel-mix')
const { spawn } = require('child_process')

// Start Artisan Serve

let serve

Mix.listen('init', () => {
  if (!mix.config.hmr) return
  
  serve = spawn('php', ['artisan', 'serve'])

  function onData (data) {
    console.info(data.toString().trim())
  }

  serve.stdout.on('data', onData)
  serve.stderr.on('data', onData)

  serve.on('close', (code) => {
    console.info('Server closed with status:', code)
  })
})

process.on('exit', () => {
  if (serve) serve.kill('SIGKILL')
})

// Configure BrowserSync
// See: https://laravel-mix.com/docs/4.0/browsersync

mix.browserSync({
  open: false,
  proxy: 'localhost:8000',
  // see https://www.browsersync.io/docs/options#option-serveStatic
  serveStatic: [
    {
      route: '/storage',
      dir: 'storage/app/public'
    }
  ]
})

// Another mix config

mix.webpackConfig({
  //...
})

mix.options({
  //...
})