Last updated

How to deploy FTW to production

This guide describes how to set up a production deployment for Flex Template for Web (FTW).

Getting started

The easiest way to get started is deploying the application to Heroku. Before creating the app you need three accounts: Heroku, Stripe and Mapbox. Creating the accounts is free unless you start heavily using them.

Read more from detailed Heroku instructions with a deploy-to-Heroku button.

In other production environments, make sure that you have Node.js and Yarn installed. You will also need accounts to Stripe and Mapbox.

After this you need to do the following steps:

  1. Set environment variables
  2. Build the app
  3. Run the node server

Environment variables

To deploy the application add at least the following variables:

  • NODE_ENV

    Use value 'production' for production.

  • PORT

    Must be set if the production environment doesn't set it by default. Heroku sets this up automatically.

  • REACT_APP_SHARETRIBE_SDK_CLIENT_ID

    Your Client ID (API key). It can found in the Flex Console.

  • REACT_APP_STRIPE_PUBLISHABLE_KEY

    Stripe publishable API key for generating tokens with Stripe API. It can be found from Stripe API keys page. Make sure to toggle "View test data" on if you don't want to use real money yet. The secret key needs to be added to Flex Console.

  • REACT_APP_MAPBOX_ACCESS_TOKEN

    Sign up for Mapbox and go to account page. Then click Create access token. See the How to set up Mapbox for FTW guide for more information.

  • REACT_APP_CANONICAL_ROOT_URL

    Canonical root URL of the marketplace. E.g. https://the-name-of-your-app.herokuapp.com or your actual domain. This is needed for social media sharing and SEO optimization.

There are also some other variables that can be used. See the FTW Environment configuration variables reference for more information.

Building the app

Running the following command builds the app for production to the build folder. It correctly bundles React in production mode and optimizes the build for the best performance.

yarn build

After this, your app is ready to be deployed.

Starting the app

Start the server:

yarn start

Deploying to Heroku

Before creating the app you need three accounts: Heroku, Stripe and Mapbox. Creating the accounts is free unless you start heavily using them.

Fork the repository

When deploying to Heroku you should use a forked repository. This makes it possible to make manual deploys after changes to environment variables.

If you haven't done this already, you just need to click the "Fork" button on the top-right corner of the page: fork button

For more information, see the How to Customize FTW guide.

Create a new app

The easiest way is to click the "Deploy to Heroku" button (check the root folder in your forked repository) and fill in the needed information.

After deploying you will find your app from your Heroku dashboard. If you click your application you will see Overview and some other tabs.

If you don't want to use the deploy button you can also manually create a new application in Heroku dashboard but then you have to manually set all the environment variables. If you prefer using the command line you can also use Heroku CLI.

Connect GitHub to Heroku

Connecting your GitHub account to Heroku makes it possible to do automatic and manual deploys in the dashboard using GitHub branches.

  1. In Heroku dashboard go to Deploy tab and find Deployment method section.
  2. Click Connect to GitHub button. After that, you will see Connect to GitHub section.
  3. Search the repository you have forked to your account and click connect.

Connect GitHub to Heroku

After this, you can enable automatic deploys from specific GitHub branch or do the manual deploy from any branch in the repository.

Read more from Heroku docs:

Heroku settings

In the Settings tab you can manage your application's information, set it to maintenance mode and delete the app if needed.

Update enviroment variables

In the Settings tab click "Reveal Config Vars" button to see the applications environment variables. Click edit to update them or add new ones if needed.

NOTE: If you change these variables, you need to deploy the app again.

Heroku settings

Set up domains and certificates

Heroku manages SSL certificates automatically for new applications. You can change your domain and SSH settings in the Settings tab.

Read more from Heroku docs:

Heroku settings

Heroku logs

You can find your application's logs by clicking button "More" in the upper right corner and selecting "View logs" from the opening dropdown. Logs can be useful if there are problems when deploying the app.

Heroku logs

Troubleshooting Heroku

By default, Heroku will use latest Long-Term-Support (LTS) version of Node.js. So, you might want to specify that your dev and production environments use the same Node version as your local machine when you run yarn run dev-server.

This can be done by adding an engines section to the package.json. Read more from Heroku's Node.js Support guide.

You should also check that the environment variables in your local environment matches with Config Vars in Heroku app settings.