Deploying on Vercel

Overview

The SCAYLE Storefront Application can be efficiently built, deployed, and run on Vercel. This guide provides step-by-step instructions for leveraging Vercel's platform to host your Storefront Application, covering everything from initial setup and project creation to deployment and configuration management for optimal performance.

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 a Vercel account. To do so, head over to Vercel Signup.

Installing Vercel CLI

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

sh

Copy

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

Login on Your Local Machine

Before running any other command, you need to log in to Vercel on your local machine using the CLI:

sh

Copy

This command will guide you through the authentication process.

Create a Vercel Project

To create or link to a Vercel project, run the following command from your Storefront Application's root directory:

sh

Copy

This will guide you through the full setup process. The Vercel CLI will automatically detect that this is a Nuxt project and set appropriate project settings.

Building the Application

The application should be built using the vercel preset from Nitro. This can be set in your nuxt.config.ts under nitro.preset or by using a NITRO_PRESET environment variable.

For example, to build for Vercel:

sh

Copy

This will create a pre-built Vercel-optimized application in the .vercel directory within your project.

Deploying the Application

To deploy the application, use the Vercel deploy command:

shell

Copy

This command deploys the pre-built application. To deploy directly to production, rather than promoting an existing build, add the --prod flag:

shell

Copy

Configuration

Functions

When deploying a project to Vercel, your code will run as a serverless function. You can configure aspects such as where your serverless function runs (Function Region) and its allocated size.

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

Environment Variables

You can configure the environment variables for your application's runtime settings directly through the Vercel user interface.

To manage your environment configuration:

1. Head over to Vercel and navigate to your project dashboard.
2. In the toolbar, you should see a tab called Settings.
3. When you are in the project Settings, select the Environment Variables entry in the left navigation.

For a quick start, you can upload your local .env file as a starting point. After changing your environment variables, you should re-deploy your project to ensure it picks up your changes. To learn more about Vercel's environment variables, head to the Vercel Docs.

There might be a few adjustments needed for your application's configuration, most notably for storage. 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 for your Storefront Application.

Application Configuration

First, configure your application to use vercelKV as your 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 in nuxt.config.ts.

Storefront Storage Config

typescript

Copy

Create a New Vercel KV Storage

To create a new KV instance, navigate to the Storage section in your project's toolbar and choose the KV option.

Once the storage is created, it's automatically linked to your project, and your application will automatically pick up the necessary url and token environment variables.