Admin panel with Backend in Django using DRF and forntend with React (using hooks and Redux)
This project is a small arhchetype implementing the following technologies and features:
It consists on two main applications, one set for the backend with Django a DRF. The other one being the front-end client built with React and Redux
The backend is pretty simple, it's a normal Django project consisting on one main app (endpoints) wich exposes several models with their related serializers and views. It also implements the Django built-in User model for authentication and Rest-Auth package with token authentication. Every class uses the "Is authenticated" permission class.
The frontend application has been built with modern React and ES6 specifications in mind, working with latest React Hooks even for Redux. Every component is an arrow function component
and many of them utilize different hooks to provide functionalities in different ways, most used ones being useDispatch
to dispatch actions with Redux and useSelector
to read the state from Redux and use it in a component variable; and 'useEffect' and 'useState'.
It also utilizes React-Router-Dom with custom PrivateRoutes, which works together with Django permissions to provide a secure and private app.
You will need:
- Node installed (I recommend v10, v12 or anything newer and stable). I strongly recommend NVM.
- NPM (whichever version comes with above Node versions listed). I strongly recommend NVM.
- Python3 (I don't really know the minimum version that would work with this, but I recommend 3.7)
- In case you want to try the dockerized version, Docker (latest Community Edition) and docker-compose.
git clone https://github.com/geropellicer/DjangoReact.git
Use your favourite venv tool like pipenv or simply the built in venv:
python3 -m venv venv
source ./venv/bin/activate
pip install -r ./backend/requirements.txt
cd frontend
npm install
In frontend folder:
npm start
In backend/admin folder (with venv activated):
python3 manage.py migrate
python3 manage.py createsuperuser
python3 manage.py runserver
You can know check that the frontend app is working in the 3000 port at localhost and the backend in port 8000:
- localhost:3000
- localhost:8000 (localhost:8000/api for the DRF browsable API and localhost:8000/admin for Django admin)
This is an app I have that mainly served as a dashboard for showing tables of data. So if you go ahead in the admin and add new items for any of the models registered, you sould see them in the frontend.
-
Go to the settings file of the backend (backend/admin/admin/settings.py) and comment lines 91 to 96. Then uncomment lines 98 to 107.
-
npm run build
-
copy build folder to nginx folder
-
rename from build to frontend
-
inside production folder
-
docker-compose -f docker-compose-prod.yml up -d --build
-
Enter to the production_web container with bash (docker container exec -it bash) and create a superuser.
-
Visit localhost and you should be able to login with the user you just created
(If fails check running container with "docker container ls". If web is missing, try with docker-compose -f docker-compose-prod.yml down and then repeat step 5. If keeps failing, remove -d parameter and debug.)