https://github.com/app-generator/django-react-starter
Django & React - Open-Source Starter | AppSeed
https://github.com/app-generator/django-react-starter
appseed django-react django-template
Last synced: 6 months ago
JSON representation
Django & React - Open-Source Starter | AppSeed
- Host: GitHub
- URL: https://github.com/app-generator/django-react-starter
- Owner: app-generator
- License: other
- Created: 2023-04-01T15:31:06.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-04-11T18:29:50.000Z (over 2 years ago)
- Last Synced: 2025-04-06T18:13:08.367Z (6 months ago)
- Topics: appseed, django-react, django-template
- Language: HTML
- Homepage: https://blog.appseed.us/how-to-integrate-django-with-react/
- Size: 74.2 KB
- Stars: 15
- Watchers: 3
- Forks: 4
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# [Django & React](https://blog.appseed.us/how-to-integrate-django-with-react/) `Codebase`
Open-source **Django Starter** bundled with React, React-Flow - Actively supported by AppSeed. The code for this starter is fully explained [here](https://blog.appseed.us/how-to-integrate-django-with-react/).
- 👉 [Django & React](https://django-react-starter.onrender.com/charts) - `LIVE deployment`
- [ReCharts](https://django-react-starter.onrender.com/charts) `sample page`
- [ReactFlow](https://django-react-starter.onrender.com/flow) `sample page`
- 🚀 Free [Support](https://appseed.us/support/) via `Email` & `Discord`
> Feature:
- 🚀 `Stack`: **Django** & **React**
- ✅ Tooling: `Webpack`
- ✅ `Design`: [Django Theme Datta](https://github.com/app-generator/django-admin-datta) - `Free Version`
- ✅ `Sections` covered by the design:
- ✅ **Admin section** (reserved for superusers)
- ✅ **Authentication**: `Django.contrib.AUTH`, Registration
- ✅ **All Pages** available in for ordinary users
- 🚀 `Deployment`: Docker, `CI/CD` flow via `Render`
[](https://blog.appseed.us/how-to-integrate-django-with-react/)
## Start with `Docker`
> 👉 **Step 1** - Download the code from the GH repository (using `GIT`)
```bash
$ git clone https://github.com/app-generator/django-react-starter.git
$ cd django-react-starter
```
> 👉 **Step 2** - Start the APP in `Docker`
```bash
$ docker-compose up --build
```
Visit `http://localhost:5085` in your browser. The app should be up & running.
## Manual Build
> Download the code
```bash
$ git clone https://github.com/app-generator/django-react-starter.git
$ cd django-react-starter
```
### 👉 Build `React Frontend`
```bash
$ yarn # Install React
$ yarn dev # development build (with LIVE Reload)
$ yarn build # production build
```
### 👉 Build `Django Backend`
> Install modules via `VENV`
```bash
$ virtualenv env
$ source env/bin/activate
$ pip install -r requirements.txt
```
> Set Up Database
```bash
$ python manage.py makemigrations
$ python manage.py migrate
```
> Start the APP
```bash
$ python manage.py createsuperuser # create the admin
$ python manage.py runserver # start the project
```
At this point, the app runs at `http://127.0.0.1:8000/`.
## `Charts` Provisioning
Open the Django shell and create manually new records:
```python
$ python manage.py shell
>>> from apps.home.models import Sales
>>>
>>> s1 = Sales() # Use the default country `USA`
>>> s1.save()
>>>
>>> s2 = Sales() # Use the default country `USA`
>>> s2.save()
>>>
>>> s3 = Sales()
>>> s3.country = 'ger' # Create a sale from `Germany`
>>> s3.save()
>>>
>>> s4 = Sales()
>>> s4.country = 'france' # Ans another one from France
>>> s4.save()
```
Once the information is saved, the `/charts` route should render the information:
## Codebase Structure
The project is coded using a simple and intuitive structure presented below:
```bash
< PROJECT ROOT >
|
|-- core/
| |-- settings.py # Project Configuration
| |-- urls.py # Project Routing
|
|-- apps/
| |-- home/ # Handle the default route
|
|-- frontend/ # React Code
|
|-- requirements.txt # Project Dependencies
|-- manage.py # Start the app - Django default start script
|
|-- ************************************************************************
```
---
[Django & React](https://blog.appseed.us/how-to-integrate-django-with-react/) `Codebase` - `Open-Source` starter crafted by **[AppSeed](https://appseed.us)**.