Front end React app with DJango Backend

 If you're having very less time which is likely and really want to see it working first..

git clone https://github.com/bmkamath2000/DJango-Projects-FSW.git

cd DJango-Projects-FSW

cd 15DJangoSchool515DJangoSchoolDJangoSchool15DJangoSchool

then execute following commands

cd frontend

npm install 

(which recreates the node_modules folder)
npm run build 

(this builds the frontend)
cd ..
(comes out of frontend directory)
python manage.py collectstatic 

(bundles all static files and stores in a folder)

python manage.py runserver

(launches the backend server)

Finally headover to http://localserver:8000/enroll to see the react app inside the django project.

If you're wondering what this is all about,

here is a brief:

You might have known that DJango is a python framework which has very powerful features and can create a working backend server in matter of minutes.

You will need django installed via 

pip install django

and react via

npm install -g react

(assuming you already have python and node js in your system and path configured to point to their respective bin folders)

After that you will need to create a django project(called schoolmodule) and app(called backend) in it.

you do it like this:

django-admin startproject schoolmodule

cd schoolmodule

py manage.py startapp backend

cd ..

npx create-react-app frontend

Then you will have the following folder structure:

I have modified some parts of the DJango backend to include context processors and a template.

Let the React app as it is. Files like views.py, urls.py and apps.py were modified and their contents are as in the repo.

Settings.py in DJango project was modified via

import os

# Build paths inside the project like this: BASE_DIR / 'subdir'.

BASE_DIR = Path(__file__).resolve().parent.parent

..

..

STATIC_URL = '/static/'

STATIC_ROOT = BASE_DIR / 'staticfiles'

STATICFILES_DIRS = [

    BASE_DIR / 'frontend' / 'build',

    BASE_DIR / 'frontend' / 'build' / 'static',

]

We get a react app to run as a front end to a django project with url http://127.0.0.1:8000/enroll/

With this look:

(PS : I used ChatGPT to make this app)