Front-end frameworks on the Compute platform

Static site generators and front-end frameworks, such as Astro and Vite, build your site into a directory of static files. You can serve those files from the Compute platform without an origin server.

Static sites

Our compute-js-static-publish tool scaffolds a Compute app that serves the files in your site's build directory. The tool uploads your files to a KV Store, and the Compute app serves them from there.

Remix is a JavaScript-based full stack web framework that focuses on UI and web standards. We maintain remix-compute-js as a template that can be used by the official Remix command line tool:

$ npm create remix@latest ./my-app --template https://github.com/fastly/remix-compute-js/tree/main/packages/remix-template

This will create a project in the my-app directory that is both a Remix app and also a valid Compute program. Remix will be configured to use Fastly's local development server, and commands such as npm run dev, npm run build, and npm run deploy will work as expected, with deploys going to your account.

For more information:

• See remix-compute-js on GitHub for usage instructions
• Read the announcement blog post

Static site & JAMStack

Static site generators produce a directory of files that can be served by any properly configured web server. Our compute-js-static-publish tool is designed to make it as easy as possible to get those files onto Fastly.

For example, for a Gatsby site:

$ npm run build
$ npx @fastly/compute-js-static-publish@latest --root-dir=./public --kv-store-name=site-content
$ cd ./compute-js
$ npm install
$ npm run fastly:deploy
$ npm run fastly:publish

The npm run fastly:deploy command builds the Compute app, deploys it to your Fastly account, and creates the KV Store. The first time you run it, it prompts you to create a service. You don't need to add a backend because the Compute app serves the content from the KV Store. The npm run fastly:publish command then uploads your site's files to the KV Store.

When your site's content changes, rebuild your site and run npm run fastly:publish again. You don't need to redeploy the Compute app unless you change the app itself.

Set --root-dir to the directory your framework builds into. These are the default build directories for some popular frameworks:

If your project uses a different build directory, set --root-dir to that directory instead. If your site is a single-page application (SPA), use the --spa option to set its fallback file.

For a step-by-step walkthrough that includes setting up an API token and testing your site locally, refer to Publish your static site to the edge. For all scaffolding options, refer to the compute-js-static-publish README.

Adding dynamic routes

Once the static publisher has created your Fastly app, you have an index.js file which you can edit to add whatever additional routes you would like to handle. Learn more about running your own code alongside static routes.