Last updated

Create test environment

Deploy the app to Heroku to share it online with other testers.

Table of Contents

Now we have branded FTW-daily template to CottageDays marketplace. It's time to deploy the web app to some hosting service. After all, we want to get some feedback from colleagues and friends.

Note: if you have removed all the Saunatime related content from your client app and your marketplace doesn't need more advanced functionality to work, you should consider launching your marketplace. If you want to read more, there's a Marketplace Academy article about why you should launch your marketplace early.

Test server-side rendering locally

Before we push the code to Heroku or another hosting service, we need to make sure that the server-side rendering (SSR) works.

FTW templates come with small Node/Express server that renders the public pages on the server. This makes it faster to render the page, but even more importantly search engines can read the content (in case they don't execute JavaScript).

Previously used command, yarn run dev, doesn't start this Node.js server but uses Webpack's dev-server with hot module replacement functionality. There's a different package.json script that starts the actual server:

yarn run dev-server

Then test that the application works on different pages.

If the server-side rendering doesn't work, it is likely that you have called functions that belong to "window" object/scope. In the server environment, "window" object is not available.

Deploy to Heroku

Generic Heroku deployment has the following steps:

Step 1: Create a Heroku account

Go to Heroku and create a new account if you don't have one. There's a free plan available.

Step 2: Create a new app

Create a new app in Heroku dashboard.

Create new app button in Heroku

Step 3: Change environment variables

In Heroku, you can configure environment variables from the Heroku dashboard.

Go to the Settings page of your new app and reveal Config Vars:

Heroku: reveal Config Vars

Then add the following environment variables as Config Vars:


    Flex client ID. Check this from Console.


    Flex client secret. Check this from Console.


    Stripe publishable API key for generating tokens with Stripe API. Use the test key (prefix pk_test) for development.


    If you are using Mapbox instead of Google Maps


    The currency used in the Marketplace as ISO 4217 currency code. For example USD, EUR, CAD, AUD, etc.


    Canonical root URL of the marketplace. Remove trailing slash from the domain.
    E.g. https://<the-name-of-your-app>


    Node environment is used to build the app. Use 'development' for development and 'production' for production.
    Use value: 'production'


    A more fine-grained env definition than NODE_ENV. For example, this is used to send environment info to logging service: Sentry. (If you have enabled it with REACT_APP_SENTRY_DSN).
    For this setup, use value: 'development'


    Redirect HTTP to HTTPS?
    Use value: true


    Set this when running the app behind a reverse proxy, e.g. in Heroku.
    Use value: true


    Content Security Policy (CSP). Read more from this article.
    Accepts values: block and report. The recommended value is block.


    Possible values: true/false
    Use value: true


    Possible values: true/false
    Use value: true

If you change these values later on, you need to deploy the app again. Environment variables are baked into the static build files of the webapp - so, a new build is needed.

Step 4: Add Node.js buildpack

Go to the Settings page of your new app and add official buildpack: heroku/nodejs

Add buildpack

Step 5: Connect the Heroku app to Github

Go to the Deploy page of your new app and connect the app with Github.

Heroku: Connect the app with Github repository

After that, you can deploy the app manually or enable automatic deploy from your default branch (usually named as main or master).

If everything works, your app should be available in URL that looks a bit like this: https://<your-app-name>

What you should do next?

You should test the app fully with both desktop layout and mobile layout:

If your marketplace concept needs advanced features, you need to continue with customizations. In the next part of this tutorial, we'll go through how to extend listing entity with extended data.

› Go to the next article