Skip to content

Instantly share code, notes, and snippets.

@feryardiant

feryardiant/README.md

Last active March 20, 2019 13:17
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save feryardiant/36b1d19d0ba1479719d8b6d43bf28184 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save feryardiant/36b1d19d0ba1479719d8b6d43bf28184 to your computer and use it in GitHub Desktop.
Download ZIP
Simple tricks for working with Laravel Mix
Raw
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
Raw
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({
//...
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment