Storefronts on Heroku

Heroku offers two ways to host a storefront, through the Heroku CLI and the Heroku dashboard. For this guide, we will be exploring how to host a storefront with the Heroku CLI. If you are looking to configure your storefront through Heroku's dashboard, please see Heroku's documentation.

The first step will be installing the Heroku CLI and logging in via the terminal. Heroku's comprehensive setup guide will take you through initializing the Heroku CLI and deploying your Heroku app.

For Swell storefront themes, you want to ensure that the build settings and environment variables are setup according to the theme’s instructions:

From the Heroku dashboard, navigate to your Settings tab. You will be adjusting the Config Vars. These are the same as the environment variables on other hosting platforms we cover.

A Procfile is required by Heroku, it should be added if isn’t already included and should contain the command used by your storefront app to run the application. See Heroku’s documentation on the Procfile to learn more.

Through the Heroku CLI, initiate the appropriate buildpack for the project. For the Swell starter kits, this will be Node.js.

heroku buildpacks: set heroku/node.js

With the Procfile and buildpack configured, the last step is to initiate the push to Heroku. This is done with the following command:

git push heroku master

Once started, it may take a few minutes to complete. After completion, you can view your storefront with the URL provided in the release message.

You can confirm your build success through the Heroku dashboard as well. The Heroku Resources tab will display a free dyno. The dashboard may need to be refreshed once the deployment has been completed to see these updates.

After the deployment process, you'll be able to access your shiny, new storefront from the Heroku dashboard. Here, you can view the external-facing site, configure your domain and website settings, and start making sales. When making any changes to your site, simply push them from your git repository to update your site on Heroku.

After verifying that your storefront is up and running, you can then add the storefront URL given by Vercel or a custom domain name to a storefront in the Dashboard. You can create a new storefront any time at Storefronts → New Storefront.

Doing so will allow you to showcase that storefront in your store’s dashboard and also set it as the primary storefront for your store.