How to deploy a FReMP Stack app to Heroku

Hello Flask & React lovers!

In my previous article, I have written about What is the FReMP Stack, How to install it on a Linux environment and a tutorial showing how to build a simple app with it. So, if you are still unsure about What is the FReMP Stack, feel free to check it out before reading this one. In this article, I will be showing you how did I deploy a FReMP Stack application on Heroku.

Why Heroku?

Well simply because you want to host you application for free and want to share it to the world. You may want to see how your application would behave in a production environment. It can also be used for testing purposes. Or, you may want to record traffic for analytics on your app. There can be many reasons.

Before we start, it's good to know

The FReMP Stack draws a line between your frontend and backend, that is, you will have two folders; one folder containing the code for you reactjs frontend and the other folder for your python/flask backend code. Due to that, we will create two applications on Heroku. We'll start by deploying the backend first, and this will act as a list of APIs endpoints that we will test using Postman. If all test works, we will proceed with deploying the frontend. We will, also, use MongoDB Atlas to connect our backend application to the database. MongoDB Atlas is simply MongoDB hosted on the cloud. It facilitates connection from our app to mongodb. Enough talking and let's get to the fun part now!

Step 0: Create an account on Heroku and MongoDB Atlas

1. Register for an account for free on Heroku by going to https://heroku.com. After you've created your account, create two apps and you can name them whatever you want. For this tutorial, we will use the names fe-name-app for deploying our frontend code and be-name-app for deploying our backend code.

2. Register for an account for free on Atlas Mongodb by going to https://cloud.mongodb.com. Once you've created your account, Atlas will give you a Cluster with 500MB for free. One important thing worth noting is whitelisting your connection IP address. If you ignore this step, you won't have access to the cluster. You should see a connect button around the dashboard. Click on that and choose Python. This will give you a connection url. Copy it and save it since we will use this later. We will use that for our app. Go ahead and create a database and call it names_db. In the db, create a collection and call it names_col.

3. Check out Heroku CLI installation by going to https://devcenter.heroku.com/articles/heroku-cli and get it installed on your environment

Step 1: Connecting with database using MongoDB Atlas

To start, fire up your terminal and navigate to your backend folder. If you followed the last tutorial, the backend folder will consist of only an app.py file. Open app.py on your IDE and look for the line:

mongoClient = MongoClient('mongodb://127.0.0.1:27017')

and change it to:

mongoClient = MongoClient('mongodb+srv://<username>:<password>@cluster0-e6reb.mongodb.net/test?retryWrites=true&w=majority')

Replace username and password with the username and password you have used when creating the database on MongoDB Atlas. After the connection has been established, we are good to start the deployment process.

Step 2: Deploying backend

To deploy a Flask application to Heroku, you will need two additional file; Procfile and requirements.txt

> FReMP/backend/requirements.txt

flask
gunicorn
pymongo
flask_cors
dnspython

The requirements.txt file contains of list of python packages that the application will need before starting.

> FReMP/backend/Procfile

web: gunicorn app:app

Create a file and name it Procfile in the backend folder. This is executed right after installing the packages and starts the application.

Afterwards, we deploy the backend.

$ git init
$ heroku git:remote -a be-name-app
$ git add .
$ git commit -m 'init'
$ git push heroku master

Step 3: Testing backend using Postman

You can test if your backend has been deployed successfully using the route /getnames/. At this point, you will receive an empty list of names, but if you can see the image below, that means the backend has been deployed.

Step 4: Deploying frontend

Now that our backend has been deployed, let's deploy our front end so that clients can start using the application.

There are two lines of code that you need to change before continuing. In App.js, we are currently calling localhost. So we need to change that and start calling the API that we just created. We'll make these changes in App.js.

> FReMP/frontend/src/App.js

In App.js, look for:

await fetch('/addname/' + this.state.name, {

and change it to:

await fetch('https://be-name-app.herokuapp.com/addname/' + this.state.name, {

Secondly, look for:

fetch('/getnames/')

and change it to:

fetch('https://be-name-app.herokuapp.com/getnames/')

That's it. We are good to go. We can now start the deployment process. To deploy a ReactJS application we need to add the NPM/Yarn and NodeJS version in 'package.json'.

> FReMP/frontend/package.json

  "engines": {
    "yarn": "1.22.4",
    "node": "12.16.0"
  },

After defining the versions, we can deploy using Git.

$ git init
$ heroku git:remote -a fe-name-app
$ heroku buildpacks:set https://github.com/mars/create-react-app-buildpack.git
$ git add .
$ git commit -m 'init'
$ git push heroku master

And that is it! You can now open browser at https://fe-name-app.herokuapp.com to see a live version of the application. If you add a name and submit, it will store the name to mongodb and re render the list of names with the name you just added.

Cheers (;