To be able to deploy to Heroku you need to have a Heroku account. You can signup here.
You will also need to install the Heroku CLI
The Heroku CLI requires Git, the popular version control system. If you don’t already have Git installed, complete the following before proceeding: Git installation & First-time Git setup
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:
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-51896https://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 -vheroku https://git.heroku.com/shielded-gorge-51896.git (fetch)heroku https://git.heroku.com/shielded-gorge-51896.git (push)origin git@github.com:frontity-demos/my-frontity-project.git (fetch)origin git@github.com:frontity-demos/my-frontity-project.git (push)
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.
"scripts": {"start": "frontity serve --port $PORT","dev": "frontity dev","build": "frontity build","serve": "frontity serve"},
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
The way to deploy to Heroku by is pushing to the heroku
git remote, so we can do
git push heroku master
You should get something like this
⬢ my-frontity-project master ⦾ git push heroku masterEnumerating objects: 5, done.Counting objects: 100% (5/5), done.Delta compression using up to 4 threadsCompressing objects: 100% (3/3), done.Writing objects: 100% (3/3), 290 bytes | 290.00 KiB/s, done.Total 3 (delta 2), reused 0 (delta 0)remote: Compressing source files... done.remote: Building source:remote:remote: -----> Node.js app detectedremote:remote: -----> Creating runtime environmentremote:remote: NPM_CONFIG_LOGLEVEL=errorremote: NODE_ENV=productionremote: NODE_MODULES_CACHE=trueremote: NODE_VERBOSE=falseremote:remote: -----> Installing binariesremote: engines.node (package.json): unspecifiedremote: engines.npm (package.json): unspecified (use default)remote:remote: Resolving node version 12.x...remote: Downloading and installing node 12.16.2...remote: Using default npm version: 6.14.4remote:remote: -----> Restoring cacheremote: - node_modulesremote:remote: -----> Installing dependenciesremote: Installing node modules (package.json + package-lock)remote: audited 10234 packages in 7.144sremote:remote: 15 packages are looking for fundingremote: run `npm fund` for detailsremote:remote: found 0 vulnerabilitiesremote:remote:remote: -----> Buildremote: Running buildremote:remote: > my-frontity-project@1.0.0 build /tmp/build_00b81abd8c2a36d3f2525857753e0188remote: > frontity buildremote:remote: mode: productionremote:remote: Building es5 bundleremote: Building module bundleremote: Building server bundleremote:remote:remote: -----> Caching buildremote: - node_modulesremote:remote: -----> Pruning devDependenciesremote: audited 10234 packages in 6.44sremote:remote: 15 packages are looking for fundingremote: run `npm fund` for detailsremote:remote: found 0 vulnerabilitiesremote:remote:remote: -----> Build succeeded!remote: -----> Discovering process typesremote: Procfile declares types -> (none)remote: Default types for buildpack -> webremote:remote: -----> Compressing...remote: Done: 52.3Mremote: -----> Launching...remote: Released v14remote: https://shielded-gorge-51896.herokuapp.com/ deployed to Herokuremote:remote: Verifying deploy... done.To https://git.heroku.com/shielded-gorge-51896.gitee9c4d2..ab9b152 master -> master
Heroku will assign you a domain (something like your-project-name.herokuapp.com) that will allow you to check your site online
To deploy your site under a custom domain in Heroku you have to...
Add your custom domain in your Heroku app
Register a DNS record with your domain provider
...before deploying it
With the command heroku domains:add
you can add a specific custom domain in your Heroku app
for example by doing:
heroku domains:add heroku domains:add www.variables-demo.com
you should get something like this
⬢ my-frontity-project master ⦾ heroku domains:add www.variables-demo.com› Warning: heroku update available from 7.25.0 to 7.38.2.Adding www.variables-demo.com to ⬢ shielded-gorge-51896... done▸ Configure your app's DNS provider to point to the DNS Target damp-whale-rln632baq4jdhcj5aw495bst.herokudns.com.▸ For help, see https://devcenter.heroku.com/articles/custom-domainsThe domain www.variables-demo.com has been enqueued for addition▸ Run heroku domains:wait 'www.variables-demo.com' to wait for completion
CNAME
in your domain provider's DNS settingsOnce 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.
⬢ my-frontity-project master ⦾ heroku domains› Warning: heroku update available from 7.25.0 to 7.38.2.=== shielded-gorge-51896 Heroku Domainshielded-gorge-51896.herokuapp.com=== shielded-gorge-51896 Custom DomainsDomain Name DNS Record Type DNS Target────────────────────── ─────────────── ─────────────────────────────────────────────────www.variables-demo.com CNAME damp-whale-rln632baq4jdhcj5aw495bst.herokudns.com
With this info you can add a CNAME in your domain provider's DNS settings.
If you don't know how to do this, contact your domain provider (GoDaddy, CloudFlare, etc)
Then, deploy Frontity using this command (from the root of your project):
> git push heroku master
If no changes are detected you may have to do:
npx frontity build
→ to generate a new buildgit commit --allow-empty
→ to force a empty commitgit push heroku master
→ to push this lateste build into heroku and launch its deploy process
Still have questions? Ask the community! We are here to help 😊