Heroku offers two ways to host a storefront, through the 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.

Installing the CLI

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

Additional configurations

Now that we've got the CLI and our app ready to go, there are some additional changes that we need to make within the Heroku dashboard before we commit our git to the app. From the Heroku dashboard, navigate to your Settings tab. The first step will be adjusting the Config Vars. These are the same as the environment variables on other hosting platforms we cover.

We need to create the following config vars:

  • HOST: 0.0.0.0
  • 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 → you 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: This will be your Heroku app URL, found under the App Information on the Heroku Settings tab.

You can add a custom domain within the Heroku dashboard Settings tab in the Domains section. Once a custom domain has been added, an SSL certificate will be generated by Heroku.

Adjusting the Swell theme package.json

Once the dashboard settings have been completed, we'll need to add a heroku-postbuild script to our storefront's package.json under "scripts". Follow the example given below:

The proc file required by Heroku is already included with the correct npm start comment within the storefront. Once you've added the script, we can move on to the Heroku buildpack.

The above settings are specific to Swell themes. Consult your storefront documentation for additional information.

Heroku buildpack

Through the CLI, initiate the appropriate buildpack for the project. For the Swell storefronts, this will be Node.js. After initiation, we're ready to commit to Heroku.

Heroku buildpack
heroku buildpacks: set heroku/node.js

Deploy

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

Push to Heroku
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 with web npm start. The dashboard may need to be refreshed once the deployment has been completed to see these updates.

This will not be a statically generated website. This can be remedied with a Heroku app but will require additional configuration.

Check out your live site

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 repo to update your site on Heroku.