Simple Chat-App with React & Flask

In this article, I’m going to show you how to build a real-time simple chat app using react, flask and socket.Io libraries. React is JavaScript Library and Flask is python Library. I use React as my client-side and flask as my server-side. And I used socket.Io to make my app Real-Time.

First I’m Going To Build Server-Side part using flask.

First, you need to install python 3 on your computer or if you did not click here and download and install the latest version of python 3. After that, you need to install flask and virtualenv son your computer. You can do that by opening your terminal or cmd (windows) and types pip install flask virtualenv.

I Already install before so it gives me a response like this

Then go to your project folder and create virtualenv. virtualenv venv.

It will create a venv folder and it is your environment for this application.

Now Open this folder your favourite text editor I’m Using vs-code and create a folder src. Inside src folder create app.py file. This app.py file is the main file in our application.

Then we need to activate our virtualenv to do that open terminal in your project folder and type source ./venv/scripts/activate.

Now in terminal (venv) shown

And Lastly, we need to install flask_socketio. We can do the using pip install flask_socketio

Now Environment setup is done in server-side. In app.py file first, we need to import flask and flask_socketio staff to build a server app.

Server-side code

Now Server-side is done and we need to run our server. Open terminal in our project src Folder and type python app.py

It will give a message like this. So in my case, my app will run port 5000. you can find your server port by terminal details like the above image. Now We need to work with a client-side.

Start with client-side with react first we need to install nodejs. Click here and download and install nodejs on your computer. After that, we need to create react app using create-react-app. install it globally type npm i -g create-react-app. After install go to your project folder and open terminal and type create-react-app client.

After app created open client folder in a text editor and inside App.js file paste bellow code ( Code explains in comments )

Now the server and client-side done.

Now npm start in client folder and test your app.

Source code

That’s it. Thank you