Django-React Packager

React-Django packager helps you ship a react front end with django as backend. This package automatically builds your react project and places the static and index file in their appropriate place in your django project.

Installation

Install the package using pip:

pip install dr_packager

and thats it!

Motivation

React is one of the most popular front-end frameworks, and with django being one of the most popular backend choices, there are a lot of websites built with this stack. You can serve django on a different server than the react project and communicate between them using an API, but for smaller projects (or even bigger ones), Having 2 separate server is not justified. Copying react build files to your server is not fun either (which can be simplified with a CI\CD).

This project helps you serve react project with django (that can be deployed on a single server). This package was made out of frustration of building react project and manually copying everything to django project.

Usage

To use the packager, you should have both the react folder & django folder in the same parent folder as follows (Absolute path is still not supported in this version):

├───root_folder
│   ├───django_project
│   ├───react_project

Your django project should contain:

• An app that serves the index.html
• A static folder (set by STATIC_ROOT variable in your settings)

IMPORTANT: Your django project root folder and base app should have the same name for example, settings.py should be located at example.example.settings.py

Open terminal in root_folder, and run the following command:

dr_package <react_path> <django_path> <django_front_app_name>

Following the above folder example, consider that we have an app named front in our django project:

dr_package react_project django_project front

IMPORTANT: Your django settings files should contain STATIC_ROOT variable

Commands

usage: dr_package [-h] [-S] [--npm] [--yarn] [-D] [-I] [--folders-old [FOLDERS_OLD ...]]
                  react_path django_path app_name

Build React Project and Deploy with Django!

positional arguments:
  react_path            React folder name (RELATIVE PATH)
  django_path           Django folder name (RELATIVE PATH)
  app_name              Name of the app that holds index.html

optional arguments:
  -h, --help            show this help message and exit
  -S, --skip-build      Skip react build (Use what is alredy in \build\)
  --npm                 use npm as the package manager of the react project
  --yarn                use yarn as the package manager of the react project
  -D, --delete-old      Delete old static files
  -I, --install         Run install command before building (use if you haven't installed the required packages)
  --folders-old [FOLDERS_OLD ...]
                        Name of the folders to delete (Doesn't work if --delelete-old is not provided), separated by
                        space

Roadmap

• Support for absolute path
• Default setting file
• More customization
• Creating a separate django package (to run as management commands) to use with git hooks

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.