π Serving frontend from your backend
Learn how to add support for serving frontend files to Express.JS backends
Fly.io doesn’t have a built-in CDN for serving static frontend files directly, so if you wish to deploy your frontend you need to do it through your backend.
Fortunately, Express.JS has a built-in middleware for serving your frontend through your backend. You only need to set the location of your frontend files, and it will take care of serving the contents for you.
For example, if you add the following middleware inside your /server/app.js
:
const staticDir = path.join(__dirname, "..", "static");
app.use(express.static(staticDir));
Then anything under the /static
directory will be served as-is.
β οΈ Note
If you have a React application and you wish it to support React Routes you also need to make sure that every request that doesn’t correspond to a real file gets routed to your main website. You can do that by adding the following code:
app.use((req, res, next) => {
if (req.method === "GET" && !req.url.startsWith("/api")) {
return res.sendFile(path.join(staticDir, "index.html"));
}
next();
});
This will point to any request that was not yet handled in a previous middleware, and does not start with /api
to your index.html
allowing React Router to handle it internally.
You can find a full app.js
example showing static file serving here.