# django-react-toolkit
Set of tools that gives you easy start with ReactJS integration
# What it all is about?
Main goal of this project is to make django-react apps development easy in the most easiest way without much interfering to django and react internal project code.
# Functionalities:
## 1. Reverse Proxy server - `manage.py runtkserver`
It's django-admin command used to start proxy server and work on django-react app on one domain.
### Setup from scratch
- Make root folder and create django and react projects:
```
mkdir example
cd example
```
django:
```
python -m venv env <- create your own virtual environment
source env/bin/activate
pip install django==3.2 <- choose your version
django-admin startproject backend
```
react (create-react-app):
```
npm init
npm install create-react-app
npx create-react-app frontend
rm -r package.json package-lock.json node_modules/
```
So at the end we've got two 3 folders:
```
backend
env
frontend
```
- Then we should install `django-react-toolkit` and add some configuration to our django project `settings.py`
Make sure you've got activated virtual env!!
```
pip install django-react-toolkit
```
backend/backend/settings.py
```
INSTALLED_APPS=[
...
'djnago_react_toolkit',
]
DJ_REACT_PROXY_RULE=[
#example configuration
('127.0.0.1',8000,['/api','/admin','/static']), # for django dev server
('127.0.0.1',3000,['.*']), # for react server
]
```
`DJ_REACT_PROXY_RULE` is varible that contains all of our proxy configuration. So later on url: `/admin`,proxy should redirect our request to server working on `127.0.0.1:8000` (django dev server) - so we should see django admin panel.
- At the and let's start all services and see in browser our proxy in work:
**frontend/**
Start react development server
```npm run start```
**backend/**
Apply django migrations and run django development server
```
python manage.py migrate
python mange.py runserver
```
**backend/ (in separete terminal window)**
Firslty activate virtual environment and then run toolkit server (reverse proxy):
```
source ../env/bin/acitivate
python manage.py runtkserver
```
At this stage all work is done. We can now access our react and django server from one domain on `127.0.0.1:8080` - default proxy address (more in spec). django on urls `/api`,`/admin`,`/static` and react on other that don't match django urls.
# 2. ----
# 3. ----
## Spec:
### Varibles:
- #### DJ_REACT_PROXY_RULE
It's list that conatains 3 element touples: `(host,port,endpoints_list)`.
**host** - proxy IP address (default 127.0.0.1)
**port** - port on which proxy will be served
**endpoints_list** - list of valid python regex expressions that should match your route.
*You need to know that proxy rules are iterated and there is choosed first match, so if you put `['.*']` as an element of first tuple and `['/api']` in secend element, you would never reach `/api` endpoint. It would look like this:*
```
DJ_REACT_PROXY_RULE=[
('127.0.0.1',3000,['.*']),
('127.0.0.1',8000,['/api','/admin','/static']) #this can't be reached
]
```
### Commands:
- #### `manage.py runtkserver`
Commad that starts reverse proxy server based on our configuration `DJ_REACT_PROXY_RULE`. It's used for serving react dev server and django dev server from same domain.
`manage.py runtkserver [--host (127.0.0.1)] [--port (8080)]`
For example: `manage.py runtkserver --host 192.168.80.2 --port 8098` and then you should reach your server based on proxy rules defined in settings above at: `192.168.80.2:8098`.
# To Do:
- [ ] django base viewset for session and JWT authentication
- [ ] helper js functions for authentication in react
- [ ] manage.py command that stats reverse proxy server and development server at the same time