Frontity Docs
  • Β» Welcome to Frontity
  • πŸš€Getting started
    • Quick start guide
  • πŸ“ƒAbout Frontity
    • Frontity features
    • Browser support
    • Get involved
  • πŸ“šCore Concepts
    • 1. Project
    • 2. Settings
    • 3. Packages
    • 4. Roots
    • 5. State
    • 6. Actions
    • 7. Libraries
    • 8. Namespaces
    • 9. Styles
  • πŸ—οΈArchitecture
    • Decoupled Mode
    • Embedded Mode
  • 🌎Deployment
    • Deploy Frontity using Vercel
    • Deploy Frontity on Layer0
    • Deploy Frontity on Heroku
  • πŸŒ—Isomorphic React
  • ⚑️ Perfomance
    • Caching
    • Link prefetching
    • Lazy Loading
    • Code Splitting
  • πŸ”ŽSEO
  • πŸ“–Guides
    • Setting the URL of the WordPress data source
    • Using Environment Variables in a Frontity project
    • WordPress requirements for Frontity
    • URLs in a Migration from WordPress to Frontity Decoupled Mode
    • Frontity Query Options
    • Redirections with Frontity
    • Understanding a Frontity project
    • Add a new Frontity package or theme to your project
    • How to share your Frontity project
    • Understanding Mars Theme
    • Working with processors
    • How to process page-builder content in Frontity
    • Keep Frontity Updated
    • Troubleshooting
    • JavaScript
    • React
  • πŸ‘Contributing
    • How to contribute?
    • Contributing Guide
Powered by GitBook
On this page
  • Create a heroku app
  • Add a start script
  • Deploy
  • Deploy a production site
  • Add your custom domain in your Heroku app
  • Add a CNAME in your domain provider's DNS settings
  • Deploy

Was this helpful?

  1. Deployment

Deploy Frontity on Heroku

PreviousDeploy Frontity on Layer0NextIsomorphic React

Last updated 4 years ago

Was this helpful?

To be able to deploy to Heroku you need to have a Heroku account. You can .

You will also need to install the

The Heroku CLI requires Git, the popular version control system. If you don’t already have Git installed, complete the following before proceeding: &

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 a

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    git@github.com:frontity-demos/my-frontity-project.git (fetch)
origin    git@github.com:frontity-demos/my-frontity-project.git (push)

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.

"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

Deploy

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 master
Enumerating objects: 5, done.
Counting objects: 100% (5/5), done.
Delta compression using up to 4 threads
Compressing 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 detected
remote:
remote: -----> Creating runtime environment
remote:
remote:        NPM_CONFIG_LOGLEVEL=error
remote:        NODE_ENV=production
remote:        NODE_MODULES_CACHE=true
remote:        NODE_VERBOSE=false
remote:
remote: -----> Installing binaries
remote:        engines.node (package.json):  unspecified
remote:        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.4
remote:
remote: -----> Restoring cache
remote:        - node_modules
remote:
remote: -----> Installing dependencies
remote:        Installing node modules (package.json + package-lock)
remote:        audited 10234 packages in 7.144s
remote:
remote:        15 packages are looking for funding
remote:          run `npm fund` for details
remote:
remote:        found 0 vulnerabilities
remote:
remote:
remote: -----> Build
remote:        Running build
remote:
remote:        > my-frontity-project@1.0.0 build /tmp/build_00b81abd8c2a36d3f2525857753e0188
remote:        > frontity build
remote:
remote:        mode: production
remote:
remote:        Building es5 bundle
remote:        Building module bundle
remote:        Building server bundle
remote:
remote:
remote: -----> Caching build
remote:        - node_modules
remote:
remote: -----> Pruning devDependencies
remote:        audited 10234 packages in 6.44s
remote:
remote:        15 packages are looking for funding
remote:          run `npm fund` for details
remote:
remote:        found 0 vulnerabilities
remote:
remote:
remote: -----> Build succeeded!
remote: -----> Discovering process types
remote:        Procfile declares types     -> (none)
remote:        Default types for buildpack -> web
remote:
remote: -----> Compressing...
remote:        Done: 52.3M
remote: -----> Launching...
remote:        Released v14
remote:        https://shielded-gorge-51896.herokuapp.com/ deployed to Heroku
remote:
remote: Verifying deploy... done.
To https://git.heroku.com/shielded-gorge-51896.git
   ee9c4d2..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

Deploy a production site

  1. Add your custom domain in your Heroku app

  2. Register a DNS record with your domain provider

...before deploying it

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:

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-domains

The domain www.variables-demo.com has been enqueued for addition
 β–Έ    Run heroku domains:wait 'www.variables-demo.com' to wait for completion

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.

β¬’  my-frontity-project ξ‚  master β¦Ύ heroku domains
 β€Ί   Warning: heroku update available from 7.25.0 to 7.38.2.
=== shielded-gorge-51896 Heroku Domain
shielded-gorge-51896.herokuapp.com

=== shielded-gorge-51896 Custom Domains
Domain Name             DNS Record Type  DNS Target
──────────────────────  ───────────────  ─────────────────────────────────────────────────
www.variables-demo.com  CNAME            damp-whale-rln632baq4jdhcj5aw495bst.herokudns.com

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

Deploy

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 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

To you have to...

Add a in your domain provider's DNS settings

With this info you can in your domain provider's DNS settings.

Still have questions? Ask ! We are here to help 😊

🌎
signup here
Heroku CLI
Git installation
First-time Git setup
heroku app
deploy your site under a custom domain in Heroku
CNAME
add a CNAME
the community