How do I host a static frontend site on Porter?

Last updated: April 10, 2025

Context

When developing a client-side frontend application, you may want to host it as a static website on Porter. This is a common scenario for single-page applications (SPAs) or other frontend-only websites.

Answer

To host a static frontend site on Porter, you will need to:

  1. Create a minimal backend server to serve your static files. For example, if you're using Node.js, you can set up a simple Express.js server.

  2. Configure the server to serve your static files from your build directory (such as 'build', 'dist', or 'public').

Here's a basic example using Express.js:


const express = require('express');
const path = require('path');
const app = express();

// Serve static files from the 'build' directory
app.use(express.static(path.join(__dirname, 'build')));

// Handle all routes by serving index.html
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

const port = process.env.PORT || 3000;
app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

You can then deploy this server application to Porter like any other application. The server will handle serving your static frontend files to users.