Configuring mix livereload (BrowserSync) with InertiaJS and Laravel Valet

Recently, I’ve been playing around with InertiaJS, “The Modern Monolith”. In a nutshell, it helps you write Laravel apps as single page applications without the hassle. You can keep using your controllers and routing system while enjoying a super snappy frontend.

I have been using it in combination with React, and it has been a very enjoyable experience so far! Kudos to its creator, Jonathan Reinink.

Even thought this is not entirely related to Inertia, I started to use BrowserSync with my Inertia project. It’s really nice when you just hit CMD+S and get the page automatically reloaded for you.

Setting up live reload (or BrowserSync) wasn’t a walk in the park, so I figured I’d share it for future reference and hopefully help fellow devs out there:

mix.browserSync({
    proxy: 'https://domain.test/',
    host: 'domain.test',
    open: 'external',
    port: 8080,
    notify: false,
    https: {
        cert: "/Users/you/.config/valet/Certificates/domain.test.crt",
        key: "/Users/you/.config/valet/Certificates/domain.test.key"
    }
});

Happy coding!

Published by Ben Villiere

Software Developer since 2007. I enjoy solving complex problems with efficient code. My mission is to help people improve their professional life by automating mundane tasks. This blog is my technical journal where I write about my work.

Follow me on: | |