How to Serve Django and React on the Same Port


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/ add the path to the view we just created.

Now if you:

  1. cd djangoproject/frontend
  2. install your node packages: npm install
  3. create your build directory: npm run build
  4. start your frontend server: npm start
  5. cd .. 
  6. start your virtual env: source env/bin/activate (or however you start your virtual env)

  7. start your backend server: python 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!

© 2021 Casey Roby. All rights reserved.
Powered by Webnode
Create your website for free! This website was made with Webnode. Create your own for free today! Get started