Best Approach for Hosting Remix SPA in Development Mode with Custom HTTP Server

[patrickkdev]

Hi Remix Team,

I am currently hosting my Remix app in SPA mode so I can serve it from my own Go HTTP server. For production, everything works perfectly, as I can serve the built assets as shown in your documentation.

The reason for this approach is to keep everything in one place. By using go:embed, I can package both the backend and frontend into a single compiled binary, simplifying deployment and eliminating the need to manage separate domains for the API and frontend. This also avoids cross-origin concerns and allows me to serve API endpoints under /api while serving the SPA from the root.

However, I’m facing a challenge during development:
To see changes reflected in the app, I need to rebuild it using remix vite:build after every change, which disrupts the workflow due to the build time. Ideally, I’d like to achieve something similar to remix vite:dev which performs hot reload, but I would like to still have it hosted through my go server.

Is there a way to achieve this, or would you recommend an alternative approach for development?

Thank you in advance for your guidance and all the effort you’ve put into Remix!

[sparkida]

@patrickkdev you might want to look at using a server proxy in your Vite config. In this setup, you'll use Vite's dev server for development and proxy all of your "/api" requests to your Go backend. You will need to address CORS when in development.

import { defineConfig } from 'vite';
import remix from '@remix-run/dev/vite-plugin';

export default defineConfig({
  plugins: [remix()],
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080', // Go backend URL
        changeOrigin: true,
        secure: false, // Disable SSL verification if not using HTTPS
        rewrite: (path) => path.replace(/^\/api/, '/api'),
      },
    },
  },
});