Deployment

Your TutorialKit project is a static site built using two key technologies: Astro and WebContainers. These two elements shape the details how you deploy TutorialKit to production.

In the following sections you will learn more about the build process and the deployment configuration.

Build command

To prepare the production build of your TutorialKit project, run the following command:

npm run build

pnpm build

yarn build

This will generate a dist directory containing the static files that make up your TutorialKit project.

You can learn more about the build process in the Astro documentation.

Environment variables

The site configuration should point to your website’s absolute URL. This will allow to compute absolute URLs for SEO metadata.

Example:

site:"https://tutorialkit.dev"

Headers configuration

The preview and terminal features in TutorialKit rely on WebContainers technology. To ensure that this technology works correctly, you need to configure the headers of your web server to ensure the site is cross-origin isolated (you can read more about this at webcontainers.io).

To do that it is required that the tutorial page is server with the following headers:

Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin

You can refer to your hosting provider’s documentation on how to set headers, but in the following sections, you can find several examples of how to configure them for some of the popular services: Cloudflare, Netlify, and Vercel.

Cloudflare

You can configure headers in your _headers file:

/*
  Cross-Origin-Embedder-Policy: require-corp
  Cross-Origin-Opener-Policy: same-origin

Note that this file must be placed in the dist directory. Assuming you keep it in the root of your project, you can make Cloudflare automatically copy it to the dist directory after the build by adding the following postbuild script to your package.json:

{
  "scripts": {
    "postbuild": "cp _headers ./dist/"
  }
}

Netlify

You can configure headers in your netlify.toml file:

[[headers]]
  for = "/*"
  [headers.values]
    Cross-Origin-Embedder-Policy = "require-corp"
    Cross-Origin-Opener-Policy = "same-origin"

Vercel

You can configure headers your vercel.json file:

{
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "Cross-Origin-Embedder-Policy",
          "value": "require-corp"
        },
        {
          "key": "Cross-Origin-Opener-Policy",
          "value": "same-origin"
        }
      ]
    }
  ]
}