How to Serve Django and React on the Same Port
01/15/2021
![](https://264d689d6a.cbaul-cdnwnd.com/647e7d4cfe403ea29ba7a88491dfd629/200000012-c3c5ac3c5c/pexels-martin-damboldt-799091-2.jpg?ph=264d689d6a)
In this post I will describe how to serve your Django and React routes from the same port. Before we get started, your project structure should look something like this:
![](https://264d689d6a.cbaul-cdnwnd.com/647e7d4cfe403ea29ba7a88491dfd629/200000007-c5ca0c5ca2/Screen%20Shot%202021-01-14%20at%209.20.25%20PM.png?ph=264d689d6a)
1. In djangoproject/settings .py add the following lines of code.
2. In djangoapp1/views add a view to render the frontend index.html file from the build directory.
3. In djangoproject/urls.py add the path to the view we just created.
Now if you:
- cd djangoproject/frontend
- install your node packages: npm install
- create your build directory: npm run build
- start your frontend server: npm start
- cd ..
start your virtual env: source env/bin/activate (or however you start your virtual env)
start your backend server: python manage.py runserver
You should be able to see your react app at localhost: 8000/!
Feel free to leave me a comment to let me know what you thought of this article. Thank you!