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