How to deploy Chartbrew on Render
6 min read

How to deploy Chartbrew on Render

You can use Render to deploy your Chartbrew application for free. This tutorial will show you all the steps to get your visualization stack up and running.
Tutorial on how to deploy Chartbrew on Render

Render is getting a lot of attention in the developer world since Heroku decided to sunset their free plans. This tutorial will show you how to deploy Chartbrew on Render so you can add a data visualization platform to your stack for free.

If you are interested in deploying the project on Heroku, you can read the tutorial over here:

How to deploy Chartbrew on Heroku and Vercel
Deploy Chartbrew for free on Heroku and Vercel and power up your data reporting with a platform where you can gather all your data.

Set up a database on Render (optional)

🙋
The Postgres service on Render is free only for 90 days after which you will have to pay for it. If you are looking for a 3rd party Postgres service with unlimited free time, check out Supabase.

This step is not required if you have a MySQL or Postgres database running somewhere else. Render gives you 90 days of free access to a Postgres database, so in. this tutorial we are going to show you how you can use this service to store the Chartbrew data.

From your Render dashboard, select the option to create a Postgres database and proceed to fill in the form as per your requirements:

Set up a Postgres database for Chartbrew on Render
Chartbrew Postgres database settings
Fill in the form with the name and location you desire

Render will then create a database for you and you will receive the connection options we are going to use later. From this list, we will need the following:

  • Hostname
  • Port
  • Database
  • Username
  • Password
Render postgres connection options
The connection options for your database

Deploy the Chartbrew backend on Render

You will first need a copy of Chartbrew in your GitHub or Gitlab account. If you are using GitHub, you can fork the repository from here directly:

Build software better, together
GitHub is where people build software. More than 94 million people use GitHub to discover, fork, and contribute to over 330 million projects.
Fork Chartbrew's repository on GitHub

On the fork screen, select your account and give any name you want for the repository:

Forking Chartbrew from GiHub
Forking Chartbrew

Back on your Render dashboard, click the New button at the top, and select Web Service from the dropdown list.

Creating a new Chartbrew web service on Render

If you cannot see the newly forked project in the list, click to connect your GitHub or Gitlab account or update your integration to allow access to your Chartbrew fork.

Connecting GitHub to Render to fetch Chartbrew

After connecting your account you should see the fork appearing in the list. Click the Connect button to proceed.

Connecting Render to the Chartbrew fork

After you connect the repository, you will have to configure how the app runs. You can enter a name and a preferred region. For the rest of the options, copy the information below:

  • Branch: master
  • Root directory: server
  • Environment: Node
  • Build Command: npm install
  • Start Command: NODE_ENV=production node index.js
Chartbrew backend options for Render

Next, scroll down the page and click on the Advanced button. This will open a new section where we need to enter the environmental variables that Chartbrew needs to function correctly.

In this section, we will need the database details. If you created the database on Render, you can find your service in the dashboard. Click on the Postgres service and it will show all the required information there.

  • CB_API_HOST - set this to 0.0.0.0 like in the example
  • CB_DB_DIALECT - postgres
  • CB_DB_PORT - 5432
  • CB_DB_NAME - The name of the Chartbrew database
  • CB_DB_USERNAME - The database user
  • CB_DB_PASSWORD - The database user password
  • CB_DB_HOST - The Hostname of your database
  • CB_SECRET - any secure string used to encrypt the data in the database.
Chartbrew environment variables in Render

If you use the Postgres service on Render, you will need to get the info from the highlighted sections in the screenshot below:

Render database credentials needed for Chartbrew

Now it's time to deploy the app! The build takes a few minutes if you are on the free plan. If everything worked, you should see that the server is running on an assigned port and that the database schema has been updated.

Chartbrew deployment logs on Render

Deploy the Chartbrew front end on Render

If you noticed in the Chartbrew repository, there is a server folder for the backend and a client folder for the front end. We are going to use the client folder to build a static site on Render and connect it to the backend we just set up. Click to add a new Static Site to your Render dashboard.

Creating a new static site on Render for Chartbrew

Select the same repository from the list as before (your repository fork). On the next screen enter the information as shown below, then click Advanced to set up environmental variables.

Setting up the Chartbrew front end on Render

To successfully connect the front end to the back end service, we need to set up an environment variable to tell the address of the web service.

Chartbrew front-end environment variables on Render

To get the URL of your back-end service, access your web service that was set up in the previous step, and you will see the URL at the top of the page.

The Chartbrew back end URL on Render
The Chartbrew back-end URL on Render

After creating the static site, you will need to wait a few minutes for the deployment after which some extra rewrite rules need to be put in place for the application to work.

Chartbrew front-end deployment on Render
Wait for the deployment, then click on Redirects/Rewrites

Add the following rule on the Redirects/Rewrites page and save the changes:

Rewrite rules for the Chartbrew front-end on Render

If everything worked, you can access the URL at the top and you should be redirected to the Signup page in Chartbrew.

The Chartbrew signup page
The Chartbrew signup page

Final touches

The application's main functionality is up and running now, but to make sure all the features work properly, we need to tell the back-end and front-end about the exact address of the static site. To do this, we need to add a new environment variable to both the back-end and front-end services.

In this example, the front-end URL is https://chartbrew-frontend.onrender.com

For the front end, click on the environment menu option and add the REACT_APP_CLIENT_HOST variable.

Adding the Chartbrew client front end variable

Add the same variable with the same value on the back-end web service too:

Adding the Chartbrew client URL as a variable

Alternatively, deploy the front end on Vercel

If you wish to deploy the front-end application on Vercel instead, you can follow the tutorial here:

How to deploy Chartbrew on Heroku and Vercel
Deploy Chartbrew on Heroku and Vercel and power up your data reporting with a platform where you can gather all your data.

Next steps

Now that you have a working Chartbrew application, you can explore the full list of tutorials to see how you can connect your data sources and visualize your data.

If you prefer to use Chartbrew as a service without setting up the platform yourself, you can do so at chartbrew.com and can start with a 30-day trial.

Let us know how you get on by joining our Discord community:

Join the Chartbrew 📈☕ Discord Server!
Check out the Chartbrew 📈☕ community on Discord - hang out with 172 other members and enjoy free voice and text chat.