Deploy React with Express server on seenode

This guide explains how to deploy an existing React single-page application (SPA) served by a minimal Node server (using Express for static + SPA fallback) to seenode.

Prerequisites

Before you begin, ensure you have:

• A seenode account at seenode.com
• Git configured on your machine
• An existing React SPA ready to build (Vite or CRA)

Project Configuration

To deploy your React SPA on seenode, you need a simple Express server to serve your built static files. This server handles SPA routing by returning index.html for all routes.

Install Express

First, install Express in your project root:

npm install express

yarn add express

pnpm add express

bun add express

Create server.js

Create a server.js file at your project root to serve your built React app:

1
const express = require("express");
2
const path = require("path");
3

4
const app = express();
5
const PORT = 8080; // * Match the Port field in seenode
6
const BUILD_DIR = path.join(__dirname, "client", "dist"); // * Vite default output
7

8
// * Serve static assets from the build output
9
app.use(express.static(BUILD_DIR));
10

11
// * SPA fallback: always return index.html
12
app.get("*", (req, res) => {
13
  res.sendFile(path.join(BUILD_DIR, "index.html"));
14
});
15

16
app.listen(PORT, "0.0.0.0", () => {
17
  console.log(`Server running on http://0.0.0.0:${PORT}`);
18
});

This server serves your built React app and handles client-side routing by returning index.html for all routes.

Port Configuration

Set the port in server.js to match the Port field you’ll configure in seenode (for example, 8080). On seenode, there is no default container port—traffic is routed to whatever value you set in the Port field.

For more background on how the Port field controls routing on seenode, see Configuring Your Application’s Port.

Package Scripts

Add these scripts to your root package.json:

1
{
2
  "scripts": {
3
    "client:install": "cd client && npm install",
4
    "client:build": "cd client && npm run build",
5
    "start": "node server.js"
6
  },
7
  "dependencies": {
8
    "express": "^4.19.2"
9
  }
10
}

Recommended Project Structure

Deploy on seenode

:::::tip[Troubleshooting] If your deployment fails, first check the Logs tab in your seenode service dashboard. Build and runtime logs often contain valuable information for diagnosing issues.

Port configuration mismatch

• On seenode, there is no default container port. Ensure your server listens on the port you configured in the Port field.
• Update your server.js if needed (for example, change const PORT = 8080; to match the Port field).
• Seeing a 502 Bad Gateway? Your app may not be listening on the expected port.

Build failures

• Missing client/dist directory: Ensure your build command runs client:build successfully. Check that Vite builds to client/dist (verify vite.config.js output directory).
• Build command errors: Check logs for npm install failures. Ensure both root and client package.json files are valid JSON.
• Client build not found: Verify the build output path in server.js matches your Vite output directory (default is client/dist).

Runtime issues

• 404 errors on client routes: Ensure the SPA fallback route (app.get("*", ...)) is placed after express.static() middleware and returns index.html for all routes.
• Static assets not loading: Verify BUILD_DIR in server.js points to the correct build output directory. Check that assets are being built to client/dist.
• Server not starting: Check that Express is installed in root package.json and that server.js exists at the repository root.

Monorepo-specific issues

• Multiple lockfiles: If you have package-lock.json in both root and client/, ensure both are committed to Git.
• Nested node_modules: The build process installs dependencies in both root and client/ directories. This is expected behavior for monorepo setups. :::::

Starting from Scratch?

If you don’t have a React SPA project yet:

Option 1: Use our Template (Recommended)

Option 2: Create from React Docs + seenode Setup

Follow the official React documentation and Vite documentation to create a new project, then follow the Project Configuration steps above to set up the Express server.

Next Steps

Now that your React SPA is deployed, here are some things you might want to do next: