How to Serve Django and React on the Same Port
01/15/2021

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:

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!