django-react-toolkit 0.0.4
Set of tools that gives you easy start with ReactJS integration.
License: MIT
Requires Python: >=3.6

# 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