Django and React Development Automation

This repository provides a custom manage.py script to streamline the development workflow for projects using Django as the backend framework and React as the frontend library. The script automates the setup of the React development server and ensures a smooth integration with the Django development server.

Contents

• Prerequisites
• Installation
• Usage
• Custom manage.py Script
• Configuration
• Contributing
• License

Prerequisites

Make sure you have the following installed before using this script:

• Python (Django is a Python web framework)
• Node.js (Required for running the React development server)
• npm (Node Package Manager)

Installation

1. Clone this repository:

   git clone https://github.com/PetrJoe/React-Django-integration.git

2. Replace the default manage.py script in your Django project with the provided customized version.

3. Install the required Node.js dependencies for the React project:

   cd React-Django-integration/frontend
   npm install

Usage

Execute the custom manage.py script to start both the Django and React development servers simultaneously:

./manage.py runserver

The script will automatically check if the React development server is running. If not, it will install the necessary dependencies and start the server. The Django development server will also be launched.

Custom manage.py Script

The custom manage.py script provides the following features:

• Starts the React development server in a separate thread.
• Checks if the React server is already running to avoid redundant startups.
• Automatically installs Node.js dependencies and runs the React development server if not already running.

Configuration

In your Django project's settings.py file, make sure the following settings are configured to handle static files generated by the React build process:

STATICFILES_DIRS = [os.path.join(BASE_DIR, 'frontend/dist/assets')]
STATIC_URL = '/assets/'
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')

Note

	You have to change all the frontend to the name of your frontend folder inside manage.py file and settings.py where your static settings is located

Both ReactJS and Django server run simultaneously on the same terminal

Adjust these settings based on your project structure if needed.

Contributing

If you find any issues or have suggestions for improvement, feel free to open an issue or submit a pull request. Contributions are welcome!

License

This project is licensed under the MIT License.

• Follow the tutorial on dev.to for part 1 on the automation settings