# Storefronts on Heroku

Source: https://developers.swell.is/storefronts-v1/storefront-hosting/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.

### Installing the CLI

The first step will be installing the Heroku CLI and logging in via the terminal. Heroku's comprehensive [setup guide](https://devcenter.heroku.com/articles/getting-started-with-nodejs#set-up) will take you through initializing the Heroku CLI and deploying your Heroku app.

#### Adjusting the build settings

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

- [Origin](https://developers.swell.is/storefronts/origin)
- [Horizon](https://developers.swell.is/storefronts/horizon)

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.

#### Proc file

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](https://devcenter.heroku.com/articles/procfile) to learn more.

### Heroku buildpack

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

**Heroku buildpack**

**swell.js**

```javascript
heroku buildpacks: set heroku/node.js
```

### Deploy

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

**Push to Heroku**

**swell.js**

```javascript
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.

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

### Connect your storefront to Swell

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.