Deploy Laravel Vite Applications With Zero Downtime

"How to npm run build on production server without downtime."

Hello,

Let's Deploy Laravel Application

Today we will see how to deploy a Laravel application using Vite (Inertia) on production server without downtime.

Usually, when we run the command npm run build, it deletes the build directory inside public and causes downtime until a new build directory is generated.

One might try to build on local and push it on git, however this messes up the URLs on your frontend.

The best way to deal with it could be a CI/CD pipeline. 

Today, we are going to see how to solve this problem quickly, without having to implement a time-consuming CI/CD pipeline.

Let's get started!

Step 1: Configuration

Open vite.config.js file add following to the config

build: {
  outDir: './public/build_prod'
}

  So after this change, my vite.config.js looks like following

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';


export default defineConfig({
    plugins: [
        laravel({
            input: "resources/js/app.jsx",
            refresh: true,
        }),
        react(),
    ],
    build: {
        outDir: './public/build_prod'
    }
});

Step 2: Modify Build Script

Open package.json and modify the build script to following

"build": "vite build && rm -fr ./public/build && mv ./public/build_prod ./public/build"

and that's it!

Now we can run git pull and npm run build on our production server, and a build will be generated without downtime.

We simply use a custom output directory to generate the product build and once its done building, we move the custom directory to its original location.

Hope this helps, cheers!