Skip to content
Altitude - Documentation

Create an SPA Website

1. Setup Edge Configuration

First set up your Altitude.yaml file to use static as a rendering type. This will let us know that you’re project has pre-built the HTML required to serve a page.

altitude.yaml

version: v2.1
provider: cloudflare
routes:
  - pathPrefix: /
    name: <your function/site name>
    type: static
    directory: .
    build:
      command: <your projects build command>
      output:
        directory: <your projects build directory>
redirectExceptions:
  paths:
    - '/**/*.*'

2. Setup Rules

When creating a single-page application frameworks will typically produce a single index.html file after building your project. This acts as the entrypoint for all pages.

When using an SPA you can rewrite paths to resolve to one index.html file. We need to add some rules to allow the SPA to work as expected. Using the guide on rules found here, we need to add a rule to enable this functionality. Please use the following input within the batch rules creation.

{
  "rules": [
    {
      "source": "/[^\.]*$",
      "target": "/index.html",
      "queryParams": [],
      "preserveQueryParams": true,
      "ruleType": "Rewrite",
      "isRegex": true
    }
  ]
}

The sourceUrl field is defined using a regular expression pattern. The pattern /[^\.]*$ matches any path segment that does not contain a dot (.). This ensures that page requests get re-written to /index.html, but requests for static assets do not.

You could also adjust the rule to add it as a Temporary or permanent redirect if desired.

3. Build & Deploy.

Now you’re ready to build and deploy.

Further Reading