Hosting Nuxt.js applications on Stormkit

You can build, deploy and scale Nuxt.js applications on Stormkit.

Nuxt.js static websites

Landing pages are great examples of static websites. Usually, they do not require server side logic. To host a Nuxt.js static website on Stormkit:

  1. Go to your application.
  2. Click on your environment and then click on Edit.
  3. Turn off the serverless toggle to enable static websites.
  4. If you are using nuxt generate you don't have to do anything else. Make sure to use npm or yarn to run the build command. For instance, npm run export.

Nuxt.js single page applications

  1. Go to your application.
  2. Click on your environment and then click on Edit.
  3. Turn off the serverless toggle to enable static websites.
  4. Create a stormkit.config.yml file at the root level of your repository and write the following configuration:
    app:
    - redirects:
        - from: /*
          to: /index.html
          assets: false
    

Nuxt.js hybrid applications

If you need to fetch data from the database or do serverless side computation, you'll need to have a hybrid application. To enable your serverless side functionality:

  1. Go to your application.
  2. Click on your environment and then click on Edit.
  3. Turn on the serverless toggle to enable serverless websites.
  4. Follow one of the two methods below to serve the static files from the CDN:

    Method 1: Using stormkit.config.yml

    This configuration will tell Stormkit to rewrite the _nuxt prefix to / and serve anything under this path from the CDN.

    app:
    - redirects:
        - from: /_nuxt/*
          to: /
          replace: true
          cdn: true

    The replace is needed because Nuxt.js does not create a physical _nuxt folder during build and we need to make our CDN aware of this.

    Method 2: Using nuxt.config.js

    The alternative method is to use the PUBLIC_URL environment variable (which is injected by Stormkit during build time) and tell Nuxt.js to serve the static files from a different path. The following configuration will work either on local environments or Stormkit, as when the environment variable is not defined it will fallback to the default behaviour.

    module.exports = {
      build: {
        publicPath: process.env.PUBLIC_URL,
      }
    }

Keeping the bundle size minimal

Make sure to have the nuxt-start package in your dependencies and nuxt in your devDependencies. This will help keeping the bundle size minimal as webpack won't be included in it:

// package.json
{
  "dependencies": {
    "nuxt-start": "x.x.x"
  },
  "devDependecies": {
    "nuxt": "x.x.x"
  }
}