DEV Community: Hans(Akhil) Maulloo

How to deploy a FReMP Stack app to Heroku

Hans(Akhil) Maulloo — Wed, 15 Jul 2020 06:28:06 +0000

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

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.
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.
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 (;

FReMP Stack (Flask, ReactJS, MongoDB, Python)

Hans(Akhil) Maulloo — Wed, 01 Jul 2020 09:49:30 +0000

Technology keeps on evolving everyday and developers constantly look for more and more things to get their hands-on. In this article, I will be introducing a new full stack framework, called FReMP. The abbreviation used is not the best one, but it just gets the work done in justifiable ways.

What is FReMP?
How to install FReMP?
Building a simple app

What is FReMP?

FReMP stands for Flask, ReactJS, MongoDB and Python. Unlike MEAN and MERN, the FReMP stack uses Python to deal with the back end part. Therefore, all core operations such as creating and handling APIs or dealing with functional/OO logic can easily be dealt in Python. As for the front end, it uses Javascript, which allows you to do common operations, such as validating input fields and updating components on the DOM.

How to install FReMP?

In this section, we will go through the steps to install the FReMP stack on a Linux environment(Ubuntu).

1. Install Flask

To install flask, we need to make sure Python is installed. Since Python is deprecated and Python3 has taken over, we will use Python3 for this tutorial.

$ apt-get install python3
$ apt-get install python3-pip
$ sudo -H pip3 install flask
$ flask --version

pip is a package manager for python, and is used to install Flask globally on your environment using -H flag.
At the time of this writing, the latest version of Flask is 1.1.1

2. Install ReactJS

To install ReactJS, we need to install NodeJS first, then use npm/yarn to install the necessary modules. For this tutorial, we use install and use yarn.

$ apt-get install nodejs
$ sudo npm install -g yarn
$ sudo npm install -g npx
$ yarn --version
$ npx --version

yarn is a package manager for javascript and is much faster and lighter than npm.
npx is used to run the module create-react-app and this will create the starter project for our front end.

3. Install MongoDB

$ apt-get install mongodb
$ mongo --version

To ensure you have everything installed properly, check the version of each framework. If the versions show up without any error, you should be good to go.

Building a simple app

In this section, we will build a simple interface that will, locally, allow the user to write his name in a form and on submitting the form, the name is saved in mongodb and at the same time all the names are retrieved and displayed on the user interface. Below is an example of how the final product will look like:

I did not focus on stylings so much, I tend to make it as minimal as possible for simplicity. So let's get started!

1. Project Folder

We will start by making a root folder to contain both the front end and the back end of the application. In this case, we'll call the root folder 'frmp-app'. Feel free to call it whatever you want.

$ mkdir frmp-app
$ cd frmp-app

2. Create React frontend folder

Secondly we'll create the front end folder and call it 'frontend'. To do so, run the following command and wait for it to finish:

$ create-react-app frontend

At this point, your directory should look like this:

~/frmp-app$ ls -al
total 16
drwxrwxr-x  4 akhil akhil 4096 zin 30 17:55 .
drwxr-xr-x 13 akhil akhil 4096 zin 30 17:39 ..
drwxrwxr-x  6 akhil akhil 4096 zin 30 17:44 frontend

After the folder 'frontend' is created, you can 'cd frontend' and start doing changes on the frontend foler. The first change you got to make is to define a proxy in package.json file.

  "proxy": "http://localhost:5000"

Add the line to the bottom of package.json. Whenever a request hits goes from localhost:3000, it hits the proxy and is redirected to localhost:5000. The backend processes the request with the information in it and replies back. After setting the proxy, we can implement the HTML form in the App.js component.

src/App.js

import React, { Component } from 'react';
import './App.css';
import Results from './components/Results';
import NewName from './components/NewName';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: '',
      names: [],
      loading: true
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({ name: event.target.value });
  }

  async handleSubmit(event) {
    event.preventDefault();
    this.setState({
      loading: true,
    })
    await fetch('/addname/' + this.state.name, {
      method: 'GET'
    });
    this.getNames()
  }


  getNames() {
    fetch('/getnames/')
      .then(response => response.json())
      .then(json => {
        this.setState({
          name: '',
          names: json,
          loading: false
        })
      })
  }

  componentDidMount() {
    this.getNames();
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <NewName handleChange={this.handleChange} handleSubmit={this.handleSubmit} value={this.state.name} />
          {this.state.loading ? <h1>Loading</h1> : <Results {...this.state} />}
        </header>
      </div>
    );
  }
}

export default App;

As you may have seen, we have two components namely 'NewName' and 'Results'.

NewName is the component which contains the input bar. The user writes his name and press Enter.

src/components/NewName.js

import React, { Component } from 'react';

class NewName extends Component {
    render() {
        return (
            <div>
                <form onSubmit={this.props.handleSubmit}>
                    <input
                        type="text"
                        name="newName"
                        value={this.props.value}
                        onChange={this.props.handleChange}
                        placeholder="New Name"
                        autoFocus
                        autoComplete='off'
                    />
                    <button type="submit">Add</button>
                </form>
            </div>
        )
    }
}

export default NewName;

Results is the component that displays the list of names.

src/components/Results.js

import React, { Component } from 'react';

class Results extends Component {
    render() {
        return (
            this.props.names.map(row => 
                <div key={row.id}>
                    {row.name}
                </div>
            )
        )
    }
}

export default Results;

Now that we are completely done with the frontend section, we can change directory and move to the root directory and create our backend folder.

$ cd ..

3. Create Flask backend folder

After creating our front-end starter project, we will set up our backend by creating a folder called 'backend' and keep all logic and operations related to APIs and database in here. To do so, run the following command:

$ mkdir backend
$ touch app.py

At this point, your directory should look like this:

~/frmp-app$ ls -al
total 16
drwxrwxr-x  4 akhil akhil 4096 zin 30 17:55 .
drwxr-xr-x 13 akhil akhil 4096 zin 30 17:39 ..
drwxrwxr-x  2 akhil akhil 4096 zin 30 18:01 backend
drwxrwxr-x  6 akhil akhil 4096 zin 30 17:44 frontend

app.py

from flask import Flask, redirect, url_for
from pymongo import MongoClient
from flask_cors import CORS, cross_origin
import json

app = Flask(__name__)
cors = CORS(app)
app.config['CORS_HEADERS'] = 'Content-Type'


mongoClient = MongoClient('mongodb://127.0.0.1:27017')
db = mongoClient.get_database('names_db')
names_col = db.get_collection('names_col')

@app.route('/addname/<name>/')
def addname(name):
    names_col.insert_one({"name": name.lower()})
    return redirect(url_for('getnames'))

@app.route('/getnames/')
def getnames():
    names_json = []
    if names_col.find({}):
        for name in names_col.find({}).sort("name"):
            names_json.append({"name": name['name'], "id": str(name['_id'])})
    return json.dumps(names_json)

if __name__ == "__main__":
    app.run(debug=True)

Since we are connection Python with MongoDB, we will use pymongo and use the MongoClient function to establish the connection. MongoClient accepts a string as parameter, and the string is the url with the port that connects your pc to mongodb, i.e, mongodb://127.0.0.1:27017. In the cluster, we will create a database called names-db and inside the database, we will create a collection, names-col, which will contain a list of json objects. Each object will the name input by the user. After getting the collection name, we define two methods, namely, addname and getnames. When addname is called, it saves the name passed into the db. Then the second method calls all the names in the db and sends them to the frontend, on the component Results.

4. Mongo shell

This part is optional. If you want to see the names directly in your database, you can fire up the terminal and run mongo, which will open the mongo shell.

$ mongo
$ use names-db
$ db.names-col.find()

5. Run the project

To run the project and see you app in action, you will open two terminals. On one terminal, change directory to frontend and on the other terminal, change directory to backend:

Inside your frontend directory, run

$ yarn start

Inside your backend directory, run

$ python3 app.py

If you followed the instruction clearly so far, this should run flawlessly.

Open up localhost:3000 on your browser to get the application live.

Cheers!

How was DockerCon 2020

Hans(Akhil) Maulloo — Fri, 29 May 2020 06:12:56 +0000

Hello dev people,

Dockercon 2020 was truly a huge success to me, with a great team and a well organized plan behind the scene. I assume that the organisation was not very easy, but the team nailed it. Since this year's dockercon was made online, all I had to do to attend was to register and that's it. It was fairly easy for me to switch between the different talks from time to time. I imagine it would have been a costly task for me to join this conference physically, but since it was made virtual, I could easily join it and give my personal opinions on how it all went.

The fact that all these developers and docker captains, from different regions of the globe, were sharing their knowledge about particular topics in the docker world, is truly fascinating to me.

Some of the talks that really intrigued me:

Although I could not attend the conference till the end, I will make it a must to watch all talks on YouTube sooner or later. Personally, I think there should be more conferences like this one since it gives people the opportunity to start coding and for those who already code, it gives them the chance of getting hands dirty with live DEVs sessions and at the same time, learn the best practices of their technology. We all know how documentation can become tedious at some point, but watching a conference can wipe out the tedious part of it.

I was, simultaneously, following the hashtags on social media platforms and I can say that there was a really big crowd of developers watching
the conference.

Some of the hashtags you can check out:

#dockercon
#dockerconjobs
#dockerselfie

Having said all this, let me point out that these were all opinions from my point of view on DockerCon 2020.

Cheers!

Rendering HTML in Flask

Hans(Akhil) Maulloo — Sat, 23 May 2020 15:55:31 +0000

Hello World!
In my previous article, I talked about building the most simple application you can ever build using Flask. In this article, I will write about rendering HTML files instead of return static strings. It will not really matter if you did not read the previous article, because I will build a new application from scratch that renders HTML pages in this article.

Content

Prerequisites
Generate HTML pages
Build flask application
Run the app!

1. Prerequisites

Python3
Pip3
Flask
Basics of Html

Directory layout

.
├── app.py
├── templates/
    └── index.html

Before starting, please create a directory as shown above. This will be where we will store all our code.

2. Generate HTML pages

In flask, we use a render_template method to render any HTML page on our browser. This method will, first of all, look for a specific folder in the project's root folder called templates. All your html pages need to be placed in templates so that it can rendered correctly on your browser. Below is a snippet for a simple Hello World which I will write to templates/index.html.

<!-- templates/index.html -->
<!DOCTYPE html>
<html>
  <head>
    <title>Hello World</title>
  </head>
  <body>
    <h1>Hello World!!</h1>
  </body>
</html>

3. Build flask application

After writing our rendering template, we have to pass this to our backend code for it to know when to return it to the browser. This page can be rendered when the user go to route '/' or '/test'. We need to specify this in our back-end code. Below you will find the snippet for our app.py file.

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def hello():
  return render_template('index.html')

if __name__ == '__main__':
  app.run()

Compared to previous article, we are importing a render_template method from flask and we are using this method to return our index.html file that we created earlier.

After you set this, you are good to go and run the application.

4. Run the app!

To run the app, simply run

python3 app.py

After that, open up localhost:5000 to see you newly written HTML page.

Thank you for reading and I hope this article was helpful. I will be seeing you in my next article.

Cheers!

Building a Minimal Flask Application from scratch

Hans(Akhil) Maulloo — Thu, 30 Apr 2020 06:51:12 +0000

Hello world!
In this article, I will be demonstrating how Flask is used in web development by building the most basic application you can ever build; which is displaying the message 'Hello World!' on your browser.

Content

Introduction to Flask
Prerequisites
Install Flask
Build flask application
Run the app!

1. Introduction to Flask

Flask, known as Python's micro web framework, has gained a lot of popularity over the past recent years. It is used for development of web application and, personally, I believe it provides all the flexibility needed to build a powerful full stack web application.

While Flask is mostly used for the backend, it deals with frontend with a templating language called Jinja2 with which you can write HTML pages from scratch and render on your browser.

2. Prerequisites

Python3
Pip3

As some of you may know, Python has come to an end of life on December 2019, and Python3 is now taking over. All os are coming with Python3 installed by default. And since we are using Python3, we will obviously need to install pip3. It may come by default on certain OS.

3. Install Flask

First things first, you have to make sure that you have Flask installed on your machine. We will use pip, a package manager that allows you to install and uninstall python modules easily, to install Flask on our environment.

$ pip3 install Flask

To ensure Flask has been installed correctly, you can run the following command, which will display the version of Python and Flask you currently have on your machine.

$ flask --version

If you can see the versions correctly, that means Flask is installed. You are good to go! Now that we have setup our environment, let's get to coding!

4. Build flask application

You can create an empty directory and call it whatever you want to name your application. Inside the directory create an app.py. This python script will contain you minimal Flask application.

# app.py
from flask import Flask

app = Flask(__name__)

@app.route('/')
def index():
  return '<h1>Helllo World!</h1>'

if __name__ == '__main__':
  app.run()

This is everything you need to run a minimal Flask application on your machine! Pretty cool right?

Let's dive into app.py and examine each line to see what it does.

First we imported the Flask class.
Using the Flask class we imported, we create an instance and pass the name of our application as the first argument. Here we are passing __name__.
- __name__ is a special built-in character in Python.
We then use something called the route decorator to specify the route we want to create in our application.
After the route '/' is hit, it should execute a method. This method is defined right below the route decorator
- This where you specify the actions you want the app to do when the user call the predefined route('/').
Last but not least, we call our app, which we defined on line 2, with app.run().

5. Run the app!

Now we have everything setup, we only need to run the script to get our message on the browser. Open up a terminal, change directory to your project's root directory and simply run the command:

$ python3 app.py

Open up localhost:5000 on your browser and your message should be there waiting for you! :)

If you have enjoyed it so far, feel free to checkout buildflaskapp, which is a command-line tool to automatically generate a minimal Flask application by running one command.

Congrats if you made it up to here! You now have a minimal Flask application which you can modify and add in your own content. Some of the next articles regarding Flask will include:

Rendering html page with Flask
Building a CRUD application with Flask
Create a REST api with Flask
Containerizing our flask application
Deploying flask apps on heroku

Cheers!

Build a Flask web app by running one command!

Hans(Akhil) Maulloo — Wed, 29 Apr 2020 17:12:03 +0000

About buildflaskapp

buildflaskapp is a command-line tool whose aim is to generate a minimal Flask application by simply running a command from your CLI.

Demo

It has been tested on Linux and Window terminal interface and it should work without any problem. If you happen to encounter any kind of issue, please feel free to raise an issue.

Installation

$ pip3 install buildflaskapp

Official website

You can check out the official website to learn more about how to use the tool.

Source code

The code is freely available on Github with an MIT license. Feel free to create issues or even pr if you think a new feature should be added.

Additional Resources/Info

At the time of this writing, buildflaskapp supports few options that you can pass in when building the app; options such as adding bootstrap cdn, jQuery cdn and font-awesome cdn automatically.

PyPi
Github
Official Website