Websites

Nitric provides a simple way to deploy websites to the cloud, allowing you to serve website assets in a serverless environment without managing complex infrastructure.

If you're interested in the architecture, provisioning, or deployment steps, they can be found here.

Overview

Nitric’s website resource lets you:

• Serve static files (HTML, JS, CSS, images) from cloud storage.
• Service your entire nitric application from a single domain.
• APIs are automatically served under /api and websites are served under /.
• Deploy to various supported providers with minimal configuration.
• Use infrastructure from code to keep your environment consistent.

Enabling Websites

Websites are currently in Preview. To enable this feature in your project add the following to your nitric.yaml file.

preview:
  - websites

Create a Website

1. Create your website project

Create a new website project using your preferred framework. For example, using Astro within your nitric project:

npm create astro@latest my-website

2. Add a website resources

Add a website resource to your nitric.yaml file.

websites:
  - basedir: ./my-website
    build:
      command: npm run build
      output: ./dist
    dev:
      command: npm run dev -- --port 4322
      url: http://localhost:4322

3. Start your website locally

Run nitric start to start your website locally. This will use the dev configuration, which proxies requests to your local development server.

Run nitric run command to run your production website locally. This will use the build configuration and serve the static files.

4. Deploy your website

Run nitric up to deploy your website to the cloud.

Sub Sites

You can also configure sub-sites under different paths. These will be deployed as subdirectories of the main site.

Here is an example configuration:

websites:
  - basedir: ./my-website
    build:
      command: npm run build
      output: ./dist
    dev:
      command: npm run dev -- --port 4322
      url: http://localhost:4322
  # the sub site is served under /docs, ensure you do not have conflicting routes
  - basedir: ./docs-website
    path: /docs
    build:
      command: npm run build
      output: ./dist
    dev:
      command: npm run dev -- --port 4323
      url: http://localhost:4323

Configuration

Here is a breakdown of the configuration options:

websites:
  - # The path to the website project directory
    basedir: ./my-website
    # The path to the website when deployed
    path: /
    # The default file to serve when no file is specified
    index: index.html
    # The file to serve when a 404 error occurs
    error: 404.html
    # The build options for the website
    build:
      # The command to build your website
      command: npm run build
      # The output directory for the build command
      output: ./dist
    # dev configuration is used by the `nitric start` command
    dev:
      # The command to run your website locally
      command: npm run dev -- --port 4322
      # The URL to access your website locally
      url: http://localhost:4322

Cloud Service Mapping

Each cloud provider comes with a set of default services used when deploying resources. You can find the default services for each cloud provider below.

• AWS
• Azure
• Google Cloud - Not implemented

If you need support for additional clouds or website types, let us know by opening an issue or joining the conversation on Discord.