Skip to content

Instantly share code, notes, and snippets.

@feryardiant
Last active March 20, 2019 13:17
Show Gist options
  • Save feryardiant/36b1d19d0ba1479719d8b6d43bf28184 to your computer and use it in GitHub Desktop.
Save feryardiant/36b1d19d0ba1479719d8b6d43bf28184 to your computer and use it in GitHub Desktop.
Simple tricks for working with Laravel Mix

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
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({
//...
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment