Django/Flask with React.js
How in the world do you connect them?
- Using Django/Flask to create a REST API and having React to consume the API by making HTTP requests to it.
- Using Webpack (module bundler) and Babel (transpiler) to bundle up your React files and link them in your HTML file. This will not use Django’s templating but instead use React. Some tutorials on this are here and here.
Consuming a Python REST API with React
Essentially, the Django or Flask application will entirely be separate from your React app. You will run Django, and then run React, which will connect to Django through HTTP Requests. However, for this to work, you must know what a REST API is and how you can implement one. I actually wrote a post about this, but in short, a REST API has endpoints such as /users that will return text(information related to the name of the endpoint), and React will make HTTP Requests that will get the text and display it in a certain way. The text will most likely be in JSON format. Think about going to a webpage with just text displayed, and thats it.
How does React make HTTP Requests?
https://api.yourdomain.com/users, get the JSON text, and return a Promise object, which wraps around the JSON text. You will then pass the data inside the Promise to your React Components, who will display them.
How do you implement a REST API using Django/Flask?
For Django, a great way and easy way is to use the Django REST Framework. This Django Package provides you with general functions that you would generally use to create an API such as serialization and authentication. Please understand what a REST API is before you jump into this. For Flask, there is a library called Flask API that is pretty much the same as the Django REST Framework. Note that these packages are just used to help and guide you to create an API. You can just create URL endpoints(in
views.py for Django) and write out the functionality and return a JSON text.
What would it look like in Development?
So, for Django, you would run your API aka your application like you normally do with:
$ python manage.py runserver
Then, assuming that you are using create-react-app(You really should be), you run your React app normally with:
$ npm run start
To make HTTP requests, you will use the fetch API to make requests to your Django app that is directed, by default, to
What would it look like in Production?
They are separate applications! Since a React app is static(think HTML/CSS/JS files), you can use Amazon’s AWS S3, Heroku, or Now to deploy the app. You would have
yourdomain.com pointed to that server. Then, you would use AWS, Heroku, Google Cloud, Digital Ocean to serve your API . aka your Django app like you would normally do. Another domain such as
api.yourdomain.com could be pointed to the server serving your API. Your React app will then make HTTP requests to
api.yourdomain.com! If you don’t want to pay for two services, you can put both applications in the same server and use a reverse proxy(e.g. Nginx) and use that to serve React files and your Django app. Here’s a previous a post I wrote on deploying React with Nginx!
I know this may be a lot of information and jargon to take in, especially if you are just starting to learn about Web Development. Here is a list of technologies you should know about that will definitely help you better understand what is going on!
This post is also very useful to understanding Web Development! There are plenty of guides on topics like implementing an API using Django and how to deploy a Django app or React app and I believe they would be more helpful to you than if I were to rewrite one. But hopefully, this gives you an overall picture of what is happening allow you to move on to actually developing applications instead of wondering how everything works together!
I hope this guide helped solve a headache of yours! I’m pretty new at this and I’d like to get better — any response is welcome :)
Check out my other posts and tutorials!