Django/Flask with React.js
How in the world do you connect them?
Like me, you’ve probably developed a Django or Flask app before and have used their templating but you want to use the new hot front-end javascript library called React. But how in the hell can you connect these two together… And since I didn’t have much knowledge on frontend and backend frameworks, I was lost. There aren’t that much documentation on Django/Flask and React so hopefully this can fill in the gap and confusion that I felt a couple months ago.
Your options
- 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?
In Javascript, there are different ways of making HTTP Requests: JQuery $.ajax, Fetch, Axios, Superagent, and many more! I would recommend the Fetch API, since it is standardized and uses Promises! Essentially, you would use Fetch to make an HTTP request to a certain endpoint like 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 runserverThen, assuming that you are using create-react-app(You really should be), you run your React app normally with:
$ npm run startTo make HTTP requests, you will use the fetch API to make requests to your Django app that is directed, by default, to http://localhost:8000/.
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!
Resources
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!
