Deploy Vue with Express server on seenode

This guide explains how to deploy an existing Vue 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 cloud.seenode.com
Git configured on your machine
An existing Vue project ready to build (Vite)

Project Configuration

To deploy your Vue 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 Vue app:

const express = require("express");
const path = require("path");

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

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

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

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

This server serves your built Vue 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:

{
  "scripts": {
    "client:install": "cd client && npm install",
    "client:build": "cd client && npm run build",
    "start": "node server.js"
  },
  "dependencies": {
    "express": "^4.19.2"
  }
}

Recommended Project Structure

Directory/your-vue-spa-app
- server.js # Express static server + SPA fallback
- package.json # Root scripts and Express dependency
- Directoryclient/ # Vue app (Vite)
  - index.html
  - package.json
  - vite.config.js
  - Directorysrc/
    main.js
    App.vue
    style.css

Deploy on seenode

Push to Git
Commit your project and push it to GitHub or GitLab.
Create a Web Service
From the seenode Dashboard, create a new Web Service and connect your repository.
Configure Build & Start
seenode attempts to detect these automatically. Configure:
- Build Command:
```
npm install && npm run client:install && npm run client:build
```
- Start Command:
```
node server.js
```
Set the Port field to 8080 (or your chosen value) and ensure server.js listens on the same port.
Configure Environment Variables
Add any additional variables your app needs. You do not need to add a PORT environment variable.
Deploy
Click Create Web Service and watch logs until your web service is live.
Success
Your Vue SPA is now accessible via your service’s URL.

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).
Missing styles file during build: Vite Vue uses src/style.css by default. Ensure it exists, or update your imports to match 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 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 Vue project yet:

Option 1: Use our Template (Recommended)

Vue SPA Template

Deploy a Vue SPA with Express static server pre-configured for seenode.

Option 2: Create from Vue Docs + seenode Setup

Follow the official Vue 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 Vue SPA is deployed, here are some things you might want to do next:

Set up a Custom Domain (Coming Soon)

Configure a custom domain to point to your new web service.

Connect to a Database

Instantly scaffold and connect PostgreSQL and MySQL databases