AstroJS — SPA-like behavior using 404 pages

How to serve the default index.html for any SPA URL in AstroJS using static builds, no adapters necessary

Problem

Photo by Andre Hunter on Unsplash

While building SquadGPT using AstroJS, I faced an issue supporting paths like /conversation/uuid-1 and /jd/uuid-2.

This is an issue because by default, AstroJS expects all routes to be known at build time. Given that theses are UUIDs, knowing all of them in advance is not possible.

Reading the UUIDs from the database is an overkill because this will mean redeploying the entire website every time a user starts a new Chat conversation.

To get around this, you can set the build option inside astro.config.mjs to server which tells the build process that certain (or all) files will be rendered by the server at run time.

This option was not available to me since the entire SquadGPT website is serverless and I wanted to avoid setting up a server just to render pages at run time.

Nor did I want to use an cloud provider specific Astro adapter to use things like CloudFlare’s Workers and AWS’s Lambda@Edge functions to render a page on demand.

Solution