Deploy Angular with Express server on seenode

This guide explains how to deploy an existing Angular 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 Angular project ready to build (Angular CLI)

Project Configuration

To deploy your Angular 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 Angular 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", "angular-app"); // * Angular CLI default output folder
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 Angular 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/angular-app directory: Ensure your build command runs client:build successfully. Angular CLI builds to client/dist/angular-app by default (check angular.json output path).
• 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 Angular CLI output directory. Angular CLI defaults to dist/angular-app (or the project name specified in angular.json).
• Missing src/styles.css during build: Ensure client/src/styles.css exists (Angular CLI references it in angular.json by default), or update the styles array in angular.json to point to your stylesheet.

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 client/dist/angular-app (or your configured Angular output directory). Check that assets are being built correctly.
• 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.
• Angular CLI version: Ensure you’re using a compatible Angular CLI version. The example uses Angular 18, but older versions may have different build output structures. :::::

Starting from Scratch?

If you don’t have an Angular project yet:

Option 1: Use our Template (Recommended)

Option 2: Create from Angular Docs + seenode Setup

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

Next Steps

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