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

For example, to publish a Gatsby site, run the following commands from your project's root directory:

```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

The scaffolded Compute app's entry point is `src/index.js`. You can edit it to handle additional routes alongside your static files. `PublisherServer` returns `null` for requests it can't serve, so your code can handle those requests itself. After you change `src/index.js`, run `npm run fastly:deploy` to redeploy the Compute app. [Learn more about using `PublisherServer` in custom apps](https://github.com/fastly/compute-js-static-publish#-using-publisherserver-in-custom-apps).