After cloning the storefront to your private git repo, proceed to Vercel for the remainder of the configuration. If you don't already have a Vercel account, now is the time to create one (you can create an account with GitHub/GitLab). To create a Vercel account, click here. Otherwise, log in to Vercel with your Git account to get started.
Vercel's free account does not allow for monetization, so ecommerce sites hosted on Vercel will need to be on a paid plan.
Once logged in, you can import your storefront git repo from the Import Git Repository section of the Vercel dashboard. Select your storefront repo to begin.
For this deployment, we'll need to change a few things under the Build and Deployment Settings after selecting our repo.
To avoid any errors, we want to ensure that:
- BUILD FRAMEWORK is changed from Nuxt.js to Other.
- BUILD COMMAND is set to yarn generate with the Override toggle activated.
- OUTPUT DIRECTORY is set to dist with the Override toggle activated.
- INSTALL COMMAND is set to yarn install with the Override toggle activated.
The above settings are specific to Swell themes. Consult your storefront documentation for additional information.
Additionally, there are a few environment variables that need to be added under the Environmental Variables section:
- SWELL_STORE_ID: this is your store's subdomain and client ID on Swell. Your Swell store id is found on the top of your API keys section in the Swell dashboard.
For example, https://storefront-demo.swell.store → would use storefront-demo.
- SWELL_PUBLIC_KEY: One of your store's public API keys—found in the Developer settings within your dashboard.
- SWELL_STORE_URL: Your store's URL. This is for redirect purposes, so if you want to use a custom domain—this is where you'd put it. Note: include the https://.
Now that we've set the configurations, we can go ahead and deploy the site. This may take a bit of time depending on how much data is within your store. Starting from scratch, it took us anywhere from 3 to 5 minutes to get the base storefront theme deployed. If the deployment stalls or you encounter a network issue during your deployment attempt, wait a few minutes before trying again.
After the deployment process, you'll be able to access your shiny, new storefront from the Vercel dashboard. Here, you can view the external-facing site, configure your domain and website settings, add plugins, and start making sales. When making any changes to your site, simply push them from your git repo to go live on Vercel.