Deploying on Vercel

The following document outlines how to build, deploy and run your SCAYLE Storefront application on Vercel.

Prerequisites

To deploy to Vercel, you will first need to create an account. To do so, head over to Vercel Signup.

Installing the Vercel CLI

After creating an account, you will need to install the vercel CLI on your local machine:

yarn global add vercel

To learn more about the Vercel CLI, head over to the Vercel Docs.

Before running any other command, you need to login into Vercel on your local machine:

vercel login

Create a Vercel Project

To create a Vercel project, run the following command:

vercel link

This will guide you through the full setup process.

The Vercel CLI will also detect that this is a Nuxt project and automatically set project settings.

If you're working with a pre-existing Vercel project, this step remains the same.
When the CLI asks you Link to existing project?, just answer Yes and pick one of your existing projects.

Building the Application

The application should be built using the vercel preset from Nitro.

This can be set in the nuxt.config under nitro.preset or by using a NITRO_PRESET environment variable.

For example:

NITRO_PRESET=vercel yarn nuxt build

This will create a pre-built Vercel application in the .vercel directory.

Deploying the Application

To deploy the application, use the Vercel deploy command:

vercel deploy --prebuilt

To deploy directly to production, rather than promoting an existing build, add the --prod flag.

vercel deploy --prebuilt --prod

Configuration

Functions

When deploying a project to Vercel, your code will run in a serverless function.

Most notably, you can configure where your serverless function runs and the size of your function.

For the best performance, you should select a Function Region which is the closest to the majority of your users.

To learn more about Vercel functions, head over to the Vercel docs.

Environment Variables

You can configure the environment variables for the runtime settings through the Vercel user interface.
To learn more about Vercel's environment variables, head to the Vercel docs.

To manage your environment configuration, head over to Vercel and navigate to your project.
In the toolbar you should see a tab called Settings.

When you are in the Settings of your project, select in the left navigation the entry Environment Variables.

For a quick start, you can upload your local .env file for use as a starting point.

After changing your environment variables, you should re-deploy your project to ensure it picks up your changes.

There might be a few adjustments needed, most notably the storage configuration. For this we recommend using Vercel KV.

Using Vercel KV

Vercel KV is a serverless Redis storage that can be used as the backing storage for sessions and cache. To learn more about Vercel KV, head to the Vercel docs.

First, we need to configure our application to use vercelKV as our storage driver.
This happens automatically when you build for the vercel Nitro preset. If you need to further customize it, you can do so through the storefront.storage configuration.

Storefront Storage Config

let config = {
    storefront: {
        storage: {
            cache: {
                driver: 'vercelKV',
                url: '',
                token: '',
            },
            session: {
                driver: 'vercelKV',
                url: '',
                token: '',
            },
        }
    }
}

Create a new Vercel KV Storage

To create a new instance, navigate to the Storage in your projects toolbar and choose the KV option:

Make sure to select the primary region where your serverless function is located to have the best performance.

Once the storage is created, it's automatically linked to your project and you're ready to go.