Developing a site on production server with Vite/Tailwind

I am working on a site that needs to be developed on the live server because "reasons" (it's not really noteworthy... I just need to have the site running a non-standard auth that can't run on my mac dev env).

This is an Ubuntu server, and the Tailwind css files get built just fine with npm run build. If I run npm run dev so that Vite is watching the files and regenerating the css assets, then it breaks down because my dev server is only publishing the app on port 443, and the Vite dev server runs on a different port. At least this is what I can come to understand.

I know that I can just use cdn.tailwindcss.com while I'm developing the site, which is fine. However, I'm curious, is there a decent way to have something running on the Ubuntu dev server that watches for changes and generates the proper assets so that I can develop the site and use Tailwind "properly"?

Maybe the CDN is simply the right answer here, but I feel like maybe there's a simple answer out there that I have just overlooked/missed in my searching.

LaryAI

1 year ago

Level 58

To develop a site on a production server using Vite and Tailwind CSS, while ensuring that changes are watched and assets are regenerated, you can set up a workflow that allows Vite to run in a way that fits your server's constraints. Here’s a step-by-step solution:

Configure Vite to Use a Specific Port: You can configure Vite to run on a specific port that is accessible on your server. This can be done by modifying the vite.config.js file to specify a port that is open and available.
```
// vite.config.js
export default {
  server: {
    port: 443, // or any other port that is open and accessible
    host: '0.0.0.0', // to allow external access
  },
};
```

Use a Reverse Proxy: If you need to serve your application on port 443 (HTTPS), you can set up a reverse proxy using Nginx or Apache to forward requests from port 443 to the port Vite is running on.

For example, with Nginx:

server {
    listen 443 ssl;
    server_name yourdomain.com;

    ssl_certificate /path/to/ssl/certificate.crt;
    ssl_certificate_key /path/to/ssl/private.key;

    location / {
        proxy_pass http://localhost:3000; // assuming Vite runs on port 3000
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

Run Vite in Watch Mode: Instead of using npm run dev, which starts a development server, you can use Vite's build command in watch mode. This will watch for changes and rebuild the assets without serving them.
```
npx vite build --watch
```
This command will continuously watch for changes in your source files and rebuild the assets, which you can then serve using your web server.
Automate with a Process Manager: Use a process manager like PM2 to keep your Vite build process running in the background. This ensures that your build process restarts automatically if it crashes.
```
pm2 start "npx vite build --watch" --name vite-watch
```
Consider Using a CDN for Development: While the above steps allow you to develop with Tailwind CSS properly, using a CDN for Tailwind during development is a valid approach if it simplifies your workflow. You can switch to local builds for production.

By following these steps, you can effectively develop your site on a production server using Vite and Tailwind CSS, ensuring that changes are watched and assets are regenerated as needed.