Before we get started make sure you have a very basic DJango Project set up and that you have “Npm” installed.
If you do not have “Npm” installed go to the nodejs.org and install it.
- Create React App
- Configure Django URLS to React Files
- Configure Settings.py
- Run Build & Test
1 – Create React App
From you command prompt run “npm init react-app reactfiles” to create a new react project. Once we have our react app created we will copy and paste those files into our Django projects root directory.
Your django project should look something like this:
Test you app our by running npm start from your apps root direcotry in you command prompt.
If everything so far is configured quickly your prowser should automaticly open this page up on port 3000
2 – Configure Django URL’s to React Files
So far all we have is a react project inside of a django project but they do not work together yet. We need to make a few configurations for these two to be one.
We will first need to import template view in our projects root urls.py file and right our path to our react project.
3 – Configure Settings.py
In settings.py we need to specify a path to our template in our react files wich is where our index.html file will reside after we run “npm run build”.
4 – Run Build & Test
No that we have django configured with our react project we need to run “npm run build” from our command prompt and our project should be ready.
Once ran the command start your django server and see you app. It should now be running on the same port your django projects normally run on