---
title: Front-end frameworks on the Compute platform
summary: null
url: >-
  https://www.fastly.com/documentation/guides/compute/developer-guides/frameworks
---

Static site generators and front-end frameworks, such as [Astro](https://astro.build/) and [Vite](https://vite.dev/), 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`](https://github.com/fastly/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](https://www.fastly.com/documentation/guides/compute/edge-data-storage/working-with-kv-stores), and the Compute app serves them from there.

[Remix](https://remix.run/) is a JavaScript-based full stack web framework that focuses on UI and web standards. We maintain [remix-compute-js](https://github.com/fastly/remix-compute-js/) 

 as a template that can be used by the official Remix command line tool:

```term
$ 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](https://www.fastly.com/documentation/guides/compute/developer-guides/testing/#running-a-local-testing-server), and commands such as <kbd>npm run dev</kbd>, <kbd>npm run build</kbd>, and <kbd>npm run deploy</kbd> will work as expected, with deploys going to your account.

For more information:

- See [`remix-compute-js` on GitHub](https://github.com/fastly/remix-compute-js/) for usage instructions
- Read the [announcement blog post](https://www.fastly.com/blog/host-your-remix-app-on-fastly-compute-edge)

## 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`](https://github.com/fastly/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](https://www.gatsbyjs.com/) site:

```term
$ 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:

| Framework                                                                                  | Build directory |
| ------------------------------------------------------------------------------------------ | --------------- |
| [Astro](https://astro.build/)                                                              | `./dist`        |
| [Docusaurus](https://docusaurus.io/)                                                       | `./build`       |
| [Gatsby](https://www.gatsbyjs.com/)                                                        | `./public`      |
| [Vite](https://vite.dev/)                                                                  | `./dist`        |
| [Vue](https://vuejs.org/) (created with [create-vue](https://github.com/vuejs/create-vue)) | `./dist`        |

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](https://www.fastly.com/documentation/solutions/tutorials/compute/publish-static-site). For all scaffolding options, refer to the [`compute-js-static-publish` README](https://github.com/fastly/compute-js-static-publish#-app-scaffolding).

### 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](https://github.com/fastly/compute-js-static-publish?_fsi=kXZve2xi#running-custom-code-alongside-publisher-server).