Setup Development mode of Vite on AWS EC2

vite.config.js

import { defineConfig } from 'vite';
import laravel, { refreshPaths } from 'laravel-vite-plugin';
import fs from 'fs';

export default defineConfig({
    server: {
        host: true,
        hmr: {
            host: 'dev.yourdomain',
        },
        https: {
            key: fs.readFileSync('./.cert/privkey.pem'),
            cert: fs.readFileSync('./.cert/fullchain.pem'),
        },
    },
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
                'resources/css/admin.css',
                'resources/js/admin.js',

                'resources/css/extra.css',
                'resources/js/extra.js',
            ],
            refresh: [
                ...refreshPaths,
                'app/Http/Livewire/**',
            ],
        }),
    ],
});

Require SSL cert

sudo yum install -y mod_ssl
cd /etc/pki/tls/certs
sudo ./make-dummy-cert localhost.crt
sudo yum update ca-certificates

sudo nano /etc/httpd/conf/httpd.conf # to confirm httpd-le-ssl.conf is included
sudo nano /etc/httpd/conf/httpd-le-ssl.conf

sudo nano httpd-le-ssl.conf

# /etc/httpd/conf/httpd-le-ssl.conf
<IfModule mod_ssl.c>
<VirtualHost *:443>
    DocumentRoot "/var/www/html/public"
    ServerName "dev.yourdomain"
    ServerAlias "www.dev.yourdomain"
Include /etc/letsencrypt/options-ssl-apache.conf
SSLCertificateFile /etc/letsencrypt/live/dev.yourdomain/fullchain.pem
SSLCertificateKeyFile /etc/letsencrypt/live/dev.yourdomain/privkey.pem
</VirtualHost>
</IfModule>

sudo systemctl restart httpd

sudo amazon-linux-extras install epel -y
sudo yum install -y certbot python2-certbot-apache
sudo certbot

Certs are automatically update by certbot. But due to permission issue, we have to copy the file to same user group (created certs are in root owner) so that Vite is accessible.

For convenience, I created the bash script to do so.

#!usr/bin/bash

DOMAIN="your.domain"
SCRIPT_DIR=$( cd -- "$( dirname -- "${BASH_SOURCE[0]}" )" &> /dev/null && pwd )


cp /etc/letsencrypt/live/$DOMAIN/privkey.pem $SCRIPT_DIR/privkey.pem 
chown ec2-user:ec2-user $SCRIPT_DIR/privkey.pem

echo "Copied to "$SCRIPT_DIR/privkey.pem

cp /etc/letsencrypt/live/$DOMAIN/fullchain.pem $SCRIPT_DIR/fullchain.pem 
chown ec2-user:ec2-user $SCRIPT_DIR/fullchain.pem

echo "Copied to "$SCRIPT_DIR/fullchain.pem

echo "Done."