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:
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.
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.