A guide to setup a React frontend with a Django backend
A basic understanding of Python, Django, JavaScript & React
-
Install Django:
pip(3) install django -
Install Virtualenv:
pip(3) install virtualenv -
Start Django Project:
django-admin startproject djangoreact -
Start virutalenv in project:
cd djangoreact && python3 -m virtualenv env -
Activate virtualenv:
source env/bin/activateon Mac orenv\Scripts\activateon Windows -
Install Packages in Virtualenv:
pip install django -
Start Django Frontend App:
django-admin startapp frontend -
Add
'frontend'to theINSTALLED_APPSlist indjangoreact/djangoreact/settings.pyfile -
Setup urls.py in
djangoreact/djangoreact/urls.pyto include frontend urls:- Add an import statement
from django.urls import include - To the
urlpatternslist add:path('', include('frontend.urls')),
- Add an import statement
-
Create a
templatesfolder in thefrontendapp folder & in thetemplatesfolder create afrontendfolder -
In
frontend/templates/frontendcreate anindex.htmlfile and enter the following:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Django React</title> {% load static %} </head> <body> <div id="root"></div> <script src="{% static "js/main.js" %}"></script> </body> </html>
-
Create a
staticfolder in thefrontendapp folder and add 3 subfolders:css,js&images -
In
djangoreact/djangoreact/settings.pyfile change STATIC_URL from/static/to/frontend/static/ -
In the
frontend/views.pyfile, create a view like the following:from django.shortcuts import render def index(request): return render(request, 'frontend/index.html')
-
Create a
urls.pyfile infrontendapp folder and enter the following in it:from django.urls import path from .views import index urlpatterns = [ path('', index), ]
Now onto some React & Webpack config
-
Create a folder called
srcin thefrontendapp folder and create anindex.jsfile and acomponentssubfolder in thissrcfolder -
Install npm & node from here
-
Make sure for the following commands you are inside the
frontendapp directory -
Initialize an npm project:
npm init -y -
Now install Webpack, Babel and React through the following npm commands:
npm install webpack webpack-cli --save-devnpm install @babel/core babel-loader @babel/preset-env @babel/preset-react --save-devnpm install @babel/plugin-proposal-class-properties(for implementing async/await in our React components)npm install react react-dom --save-dev -
Create a file called
babel.config.jsonin thefrontendapp directory and write as shown here -
Create a file called
webpack.config.jsin thefrontendapp directory and write as shown here -
Modify the npm scripts in the
package.jsonfile in thefrontendapp directory:- Remove
"test": "echo \"Error: no test specified\" && exit 1"from the scripts object - Add
"dev": "webpack --mode development --watch", - Add
"build": "webpack --mode production", - Save file
- Remove
-
Create a file called
App.jsin thesrc/componentsfolder we created and write the following:import React from "react"; const App = (props) => { return ( <div className="App"> <h1>Django React Setup Works</h1> </div> ); }; export default App;
-
Enter the following in the
src/index.jsfile:import React from "react"; import ReactDOM from "react-dom"; import App from "./components/App"; ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById("root") );
-
In the terminal,
cdto the project root directory and enterpython manage.py migrate && python manage.py runserver -
In a new terminal window, execute
cd frontend && npm run dev -
Visit http://127.0.0.1:8000 in your web browser and you should see your Django React Setup Works page.
-
Edit
App.jsfile to whatever you want it to say. Save the file & reload on the browser to see your changes! -
Happy Coding!