Skip to main content

Deploying your storefront on Vercel

The storefront generated by Composable CLI is ready to deploy to any Next.js supporting hosting provider.

The following is a quick guide to deploying the Composable Starter to Vercel using the Vercel CLI. For more detailed information about features and additional functionality, see the Vercel documentation.

Pre-requisites​

Generated storefront​

You will need to have generated a storefront using the Composable CLI. If you haven't done this yet, you can follow the getting started guide to generate a storefront.

Required Accounts​

Required tooling​

  • Git and Git CLI: only required if you want to use GitHub continuous deployment

Deployment Options​

Once you have a Vercel account, you can deploy your storefront by using the Vercel CLI or GitHub and Vercel continuous deployment see the instruction below.

Option 1: Deploying to Vercel using GitHub continuous deployment​

The following is a quick guide to deploying the Composable Starter to Vercel using GitHub.

Create a GitHub repository​

Before you can deploy, you need to create a GitHub repository and push the starter codebase to it:

  1. On GitHub, click the plus icon at the top right, then click New Repository.
  2. You’ll then be redirected to a new page with a form. In the form, enter the Repository Name.
  3. Scroll down and click Create repository.

more information about creating a GitHub repository can be found here.

Push the starter codebase to GitHub​

Now that you have an empty repository the next step is to push the starter codebase to GitHub.

Looking at the repository page on GitHub you should see a URL that you can copy to connect to the repository e.g. https://github.com/<your-account>/<your-repo>.git

A local repository should have been initialized when you generated your storefront. If not, you can initialize a local repository by running the following command in the root of your storefront directory:

git init
git add .
git commit -m "initial commit"

Now in your terminal run the following command to connect your local repository to the GitHub repository you just created:

git remote add origin https://github.com/<your-account>/<your-repo>.git

making sure to replace https://github.com/<your-account>/<your-repo>.git with your repository URL.

Finally, push the starter codebase to GitHub by running the following command:

git push origin main

After the push is complete, you should see the starter codebase in your GitHub repository.

Deploy using Vercel Dashboard​

  1. Login to your Vercel account and load the dashboard.
  2. Click on "Add new..."
  3. Choose project from the dropdown
  4. In the Import page that opens, find the Git repository you just created and click Import. Make sure you have connected Vercel to your GitHub account first.
  5. In the Configure Project form:
    • Optionally change the projects name.
    • Open the "Environment Variables" section:
      • Add the environment variables to match your local environment. You can find these in the .env.local file in the root of your storefront directory. e.g. NEXT_PUBLIC_EPCC_CLIENT_ID, NEXT_PUBLIC_PASSWORD_PROFILE_ID etc
      • Instead of entering them individually, you can copy the contents of the file and paste it into the "Key" input on the form for all values to populate.
  6. Once all the settings are correct, click Deploy.

This will start the deployment of the Composable Starter. Once it’s done, you’ll be redirected to the main dashboard of your new project.

Option 2: Deploying to Vercel using the Vercel CLI​

Install the Vercel CLI​

To install the Vercel CLI globally, run the following command:

npm i -g vercel

You can confirm it installed correctly by running:

vercel --version

this should output something like below but with your installed version:

Vercel CLI 29.0.0
29.0.0

Vercel projects are the top level container for your deployments. To link our storefront folder with a new project, run the following command in your storefront directory:

vercel link

Follow the prompts to link and create the project. Making sure to answer the questions as follows:

? Set up “~/my-storefront”? [Y/n] y
? Which scope should contain your project? my-account (your account name)
? Link to an existing project? [Y/n] n
? What’s your project’s name? my-storefront (the name you want for the vercel project)
? In which directory is your code located? ./
Local settings detected in vercel.json:
Auto-detected Project Settings (Next.js):
- Build Command: next build
- Development Command: next dev --port $PORT
- Install Command: `yarn install`, `pnpm install`, `npm install`, or `bun install`
- Output Directory: Next.js default
? Want to modify these settings? [y/N] n
✅  Linked to my-account/my-storefront (created .vercel)

You should get a message to confirm the project has been linked. If there is any issues getting the project linked you can have a look at the Vercel CLI docs.

The most important outcome is the auto-detected project settings. This should have been Next.js if it wasn't you will have to open the project settings in the vercel dashboard and set the "Framework Preset" dropdown to Next.js or manually set the values for Build command, Development command, Install command and Output directory to match the above setup.

Setting environment variables​

The project needs to have the appropriate environment variables set to be able to deploy your storefront. There are different ways to set environment variables in Vercel projects:

note

The environment variables you need to match your local environment in Vercel are located in the .env.local file in the root of your storefront directory.

Using the Vercel dashboard​

Follow the instructions in the Vercel docs to add the following environment variables from your .env.local to your project.

Using the Vercel CLI​

caution

At this time there is no built-in way to add multiple environment variables at once using the Vercel CLI see this issue. You can use the Vercel dashboard to add multiple environment variables at once.

To set environment variables using the Vercel CLI, run the following command:

vercel env add NEXT_PUBLIC_EPCC_CLIENT_ID

where NEXT_PUBLIC_EPCC_CLIENT_ID is the name of the environment variable you want to set. You will be prompted to enter the value for the environment variable and what environments you want to set it for.

Frustratingly it's not currently possible to set multiple environment variables at once using the Vercel CLI. The above process will have to be repeated for each environment variable that we have to set. Alternatively you can use the Vercel dashboard to add multiple environment variables at once.

Deploy storefront to Vercel​

Lastly we need to deploy the storefront to Vercel. To do this run the following command in your storefront directory:

  vercel deploy

The storefront will be built and deployed to Vercel. Once the deployment is complete you will be given a URL to access your storefront.

more information can be found from the Vercel cli docs