Setting up Development Environment for React, Flask and MongoDB

Recently I wrote a post about learning React and Flask. If you tried it, then you must have realized that it takes a bit of effort to get up and running with React and Flask development environment.

In today’s post we will show you my setup that I have built using docker. Hopefully this will help you get going.

Install Docker

If you don’t have already Docker installed you can get it from the docker installation page. Docker makes it very easy to setup all kinds of tools and systems on your computer without dealing with a lot complicated setup.

Pull my GitHub repo

Next step is to download or clone my starter repo that includes both a the React client application, Flask server application, and also includes a Mongo DB instance for you to play with.

% git clone https://github.com/naveed125/react-flask-app.git

Start Your Engines

All you need now is to cd into the downloaded code directory use the docker-compose command to start everything and you are all set.

% docker-compose up -d
Creating network "react-flask-app_default" with the default driver
Creating react-flask-app_db_1     ... done
Creating react-flask-app_client_1 ... done
Creating react-flask-app_server_1 ... done

Test Your Setup

To test you app just hit the http://localhost in your browser and you should see the following page:

React App Running the Browser

(Optional) Initialize the Database

As the screen above suggests use the following command to initialize your database with some sample data:

% docker exec -it react-flask-app_db_1 mongo /scripts/InitDB.js
MongoDB shell version v4.2.6
connecting to: mongodb://127.0.0.1:27017/?compressors=disabled&gssapiServiceName=mongodb
Implicit session: session ...
MongoDB server version: 4.2.6
Inserting: 1 Imagination is more important than knowledge. Knowledge is limited. Imagination encircles the world
Inserting: 2 Try not to become a man of success, but rather try to become a man of value
Inserting: 3 Life is like riding a bicycle. To keep your balance you must keep moving
Inserting: 4 Look deep into nature, and then you will understand everything better
Inserting: 5 Logic will get you from A to B. Imagination will take you everywhere
Inserting: 6 Insanity is doing the same thing over and over again and expecting different results
Inserting: 7 The hardest thing to understand in the world is the income tax

Getting Help

If you are new to React and Flask, you should consider reading my previous post about learning these technologies to move your career forward.

If you need any help post on our Facebook page and someone will help you out. Don’t forget to like or follow our page so you get regular updates.

Cheers

%d bloggers like this: