How to deploy FTW to production
This guide describes how to set up a production deployment for Flex Template for Web (FTW).
Table of Contents
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.
After this you need to do the following steps:
To deploy the application add at least the following variables:
Use value 'production' for production.
Must be set if the production environment doesn't set it by default. Heroku sets this up automatically.
Your client ID. It can be found in Flex Console.
Your client secret. It can in found in Flex Console.
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.
Canonical root URL of the marketplace. E.g.
https://the-name-of-your-app.herokuapp.comor 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.
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.
After this, your app is ready to be deployed.
Start the server:
- Fork the repository
- Create a new app
- Connect GitHub to Heroku
- Heroku logs
When deploying to Heroku you should use a forked repository. This makes it possible to make manual deploys after changes to environment variables.
For more information, see the How to Customize FTW guide.
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.
Connecting your GitHub account to Heroku makes it possible to do automatic and manual deploys in the dashboard using GitHub branches.
- In Heroku dashboard go to Deploy tab and find Deployment method section.
- Click Connect to GitHub button. After that, you will see Connect to GitHub section.
- Search the repository you have forked to your account and click connect.
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:
In the Settings tab you can manage your application's information, set it to maintenance mode and delete the app if needed.
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 manages SSL certificates automatically for new applications. You can change your domain and SSH settings in the Settings tab.
Read more from Heroku docs:
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.
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
yarn run dev-server.
This can be done by adding an
engines section to the
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.