The FReMP Stack — Deploying to Heroku

In my previous articles, I wrote about “What the FReMP Stack is”, “How to install it on Ubuntu 20.04” and “How to build a full stack web application with it”. So, if you are still unsure about What the FReMP Stack is, feel free to check the articles before reading this one. If you are too lazy, then just clone the source code and get it going. In this article, I will be showing you how to deploy a FReMP Stack application on Heroku.

FReMP Stack + Heroku

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 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

• Register an account 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.

Two Heroku apps

• Register an account on MongoDB Atlas by going to https://cloud.mongodb.com. Once you’ve created your account, Atlas will give you a Cluster with 500MB for free. Adding to that, do not forget to whitelist your IP address, or the application will not be able to communication with the database. You should see a connect button around the dashboard. Click on that and choose Python(3.6 or later). This will give you a connection URL. Copy it and save it since we will use this later. We will use that URL later on to establish a connection from our app. Go ahead and create a database and call it names_db. In the db, create a collection and call it names_col.
• 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 to 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. You can, of course, modularize your code, but for simplicity we will use app.py for everything. Open it 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 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

> ./backend/requirements.txt

flask
gunicorn
pymongo
flask_cors
dnspython 

Create a requirements.txt file in the backend folder. The requirements.txt file will contain of list of python packages that the application will need before starting.

> ./backend/Procfile

web: gunicorn app:app

Create a file and name it Procfile in the backend folder. Procfile is executed right after installing the packages and this is what starts the application. We are simply defining that we will use the web server guicorn to run the app app.

That is all you need to do regarding backend configuration. Let’s set up the Heroku CLI and start the deployment.

$ heroku login

We can now start deploying.

# Run these in the /backend/ folder
$ 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 not have any names and will receive an empty list of names. So if you can see an empty list, it means you application’s backend has been deployed. See image below:

Testing /getnames/ endpoint using Postman

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.

> ./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’.

> ./frontend/package.json

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

After defining the versions, we can deploy using Git.

# Run these in the /frontend/ folder
$ 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

5. That’s it!

You can now open your 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 the database and update the list of names with the name you just added, without refreshing the entire page. That’s it, you just deployed your own app on Heroku.

Thank you for reading. Stay connected for my next article. Until then,

Cheers (;