search

Deploy Frontity on Heroku

To be able to deploy to Heroku you need to have a Heroku account. You can signup herearrow-up-right.

You will also need to install the Heroku CLIarrow-up-right

The Heroku CLI requires Git, the popular version control system. If you don’t already have Git installed, complete the following before proceeding: Git installationarrow-up-right & First-time Git setuparrow-up-right

Once you have an account and the Heroku CLI installed you have to login from the terminal

> heroku login

These are the instructions to deploy a Frontity project on Heroku, once you are ready to deploy your project:

hashtag
Create a heroku apparrow-up-right

Create an app on Heroku from the root of your project

> heroku create

Heroku will generate a random name for your app (shielded-gorge-51896 in the example), or you can pass a parameter to specify your own app name.

β¬’  my-frontity-project ξ‚  master β¦Ύ heroku create
 β€Ί   Warning: heroku update available from 7.25.0 to 7.38.2.
Creating app... done, β¬’ shielded-gorge-51896
https://shielded-gorge-51896.herokuapp.com/ | https://git.heroku.com/shielded-gorge-51896.git

When you create an app, a remote git repository (called heroku) is also created on Heroku and associated with your local git repository.

β¬’  my-frontity-project ξ‚  master β¦Ύ git remote -v
heroku    https://git.heroku.com/shielded-gorge-51896.git (fetch)
heroku    https://git.heroku.com/shielded-gorge-51896.git (push)
origin    [email protected]:frontity-demos/my-frontity-project.git (fetch)
origin    [email protected]:frontity-demos/my-frontity-project.git (push)

hashtag
Add a start script

Heroku will automatically execute your start script so add the following to your scripts section in the package.json file at the root of your project.

Heroku will automatically execute your build script before starting your app. You should have this one already defined in your project.

Notice how we're using $PORT to read this value from an environment variable. It is because Heroku will set a different port for each process and that port will be stored in a PORT environment variable

hashtag
Deploy

The way to deploy to Heroku by is pushing to the heroku git remote, so we can do

You should get something like this

Heroku will assign you a domain (something like your-project-name.herokuapp.com) that will allow you to check your site online

hashtag
Deploy a production site

To deploy your site under a custom domain in Herokuarrow-up-right you have to...

  1. Add your custom domain in your Heroku app

  2. Register a DNS record with your domain provider

...before deploying it

hashtag
Add your custom domain in your Heroku app

With the command heroku domains:add you can add a specific custom domain in your Heroku app

for example by doing:

you should get something like this

hashtag
Add a CNAMEarrow-up-right in your domain provider's DNS settings

Once you have added your domain to your Heroku app, you can use the command heroku domains to see the value for the CNAME record that you have to set in your domain settings.

With this info you can add a CNAMEarrow-up-right in your domain provider's DNS settings.

circle-info

If you don't know how to do this, contact your domain provider (GoDaddy, CloudFlare, etc)

hashtag
Deploy

Then, deploy Frontity using this command (from the root of your project):

If no changes are detected you may have to do: npx frontity build β†’ to generate a new build git commit --allow-empty β†’ to force a empty commit git push heroku master β†’ to push this lateste build into heroku and launch its deploy process

circle-info

Still have questions? Ask the communityarrow-up-right! We are here to help 😊

PreviousDeploy Frontity on Layer0NextIsomorphic React

Last updated