Deploy vite frontend to coolify

vite.config.ts

This file is important to define which port will your site running on, in this case it will be 5177

export default defineConfig({
  plugins: [...],
  server: {
    port: 5177, // Specify your desired port here
    host: true, // Allow external connections
    allowedHosts: true // Allow all hosts
  },
  preview: {
    port: 5177, // Same port for preview server
    host: true, // Allow external connections
    allowedHosts: true // Allow all hosts
  }
});

Deploy to coolify

You will choose to add a new resource with github, leave the default configuration with nixpacks. And specify the same port as before in the field Port exposes

On the main configuration of the resource are some needs that need to be changed. (Assuming these are the same that you have on your package.json)

• Install Command: npm install

• Build Command: npm run build

• Start Command: npm run preview

• Base directory: (Optional, Ex: /frontend)

• Port Exposes: 5178 (Should already be set)

• Ports Mappings: 5178:5178

• Set the env variables

When everything is set click deploy and the site should be deployed properly