Starter project template

🤠⚛️ Dockerized hybrid Django React app

Starter project template using Docker to build a Django app that serves React apps statically (as JavaScript files)

Tech stack

Django (with Rest framework, PostgreSQL, SMTP gmail backend, whitenoise, etc.)
React (bundled with webpack and transpiled with babel)
Docker
Deployment to Heroku

Prerequisites

Docker
pip, poetry, pyenv or a similar tool to access pypi

Installation

Install with the following command

pip install hybrid-django-react

Usage

Run the scripts with the following command:

create-django-react-app

You will be prompted for some information like project name, email, etc. This data is needed to change the configuration files accordingly

After the script has run, you don't need this tool anymore 😀

Simply start the docker container to start working:

docker-compose up -d

You can then work as usual on your Django project.

The entry point of the React render can be edited from the file frontend/index.js

Debugging with Docker and VSCode

Support for debugging remotely with VSCode is supported out-of-the-box.

To debug with Docker:

Run your Docker containers as usual: docker-compose up -d --build
Start the debug session from VS Code for the [django:docker] runserver configuration (either from the Debugger menu or with F5)
- Logs will redirect to your integrated terminal as well.
Set some breakpoints in functions or methods executed when needed. Usually it's Model methods or View functions

Adding external libraries

It's better to install external libraries from from Docker directly

Python libraries:

Production libraries

docker-compose exec web poetry add [pip_package]

Development libraries

docker-compose exec web poetry add [pip_package] --dev

JavaScript libraries:

Production libraries

docker-compose exec web npm install [npm_package]

Development libraries

docker-compose exec web npm install -D [npm_package]

Deploy to Heroku

First setup

Create an account and install Heroku CLI
Create a new app on Heroku
```
heroku create
```
Your app will get a randomly generated name, like lazy-beyond-52146. Let's call this name [APP_NAME]
Add environment variables that Django needs to read:
1. DJANGO_ENVIRONMENT:
```
heroku config:set DJANGO_ENVIRONMENT=production
```
2. DJANGO_SECRET_KEY: You can create a safe secret key using this site
```
heroku config:set DJANGO_SECRET_KEY=[secret_key]
```
3. DJANGO_DEBUG:
```
heroku config:set DJANGO_DEBUG=False
```
Set the stack to Docker containers using the app's name
```
heroku stack:setcontainer -a [APP_NAME]
```

Create a managed postgresql database on Heroku

heroku addons:create heroku-postgresql:hobby-dev -a [APP_NAME]

Create a heroku remote repository and push changes to it
```
heroku git:remote -a [APP_NAME]
git push heroku main
```

Migrate Database and create superuser

heroku run python manage.py migrate
heroku run python manage.py createsuperuser

After deployment, check that the site's security audit shows no warnings

Consecutive deployments to production

Deploy by pushing to Heroku git repository:

git push heroku main

Metadata

Release files for hybrid-django-react 0.2.2

For a detailed explanation of source distributions (sdists) and built distributions (wheels), please see the package formats documentation.

Source distribution (sdist)

Source distribution for hybrid-django-react 0.2.2
File	Size	Uploaded	Provenance
hybrid-django-react-0.2.2.tar.gz	83.6 kB	Feb 1, 2022	Without provenance	Details

Built distribution (wheel)

Table of built distributions (wheels) for hybrid-django-react 0.2.2
File	Interpreter	ABI	Platform	Reset
hybrid_django_react-0.2.2-py3-none-any.whl 95.8 kB Feb 1, 2022 Without provenance	Python 3	none	any	Details

Total release size: 179.4 kB

Release files / hybrid-django-react-0.2.2.tar.gz

Download URL	hybrid-django-react-0.2.2.tar.gz
Size	83.6 kB
Tags	Source
SHA-256 checksum How to use checksums	`264613fbd146de68ad7af195a042755d374ae05eb026354a455c72a140a43c01`
BLAKE2b-256 checksum How to use checksums	`e2cd768f6374bab0bcd36a02ac76ab5ec33d566d1dc7d4e70fa400b4dc039f51`
Upload date	Feb 1, 2022
Uploaded using Trusted Publishing? What is trusted publishing?	No
Uploaded via	`poetry/1.1.12 CPython/3.8.10 Linux/5.11.0-40-generic`

Release files / hybrid_django_react-0.2.2-py3-none-any.whl

Download URL	hybrid_django_react-0.2.2-py3-none-any.whl
Size	95.8 kB
Tags	Python 3
SHA-256 checksum How to use checksums	`209e1e399f647087aa2288d7c15ee244d0265ea9d49a14f75b83b33bf260a86e`
BLAKE2b-256 checksum How to use checksums	`15065bd4b54bb308be17c063e21ed40999622d76f0da6d362d26f5204d6cc44f`
Upload date	Feb 1, 2022
Uploaded using Trusted Publishing? What is trusted publishing?	No
Uploaded via	`poetry/1.1.12 CPython/3.8.10 Linux/5.11.0-40-generic`

Security for hybrid-django-react 0.2.2

Report project as malware

Provenance

Provenance describes where a file came from. On PyPI, provenance is shared via attestations, which provide a verifiable record of the build or publishing details. View details, limitations and caveats.

No provenance found

None of the files in this release were uploaded with provenance metadata.

A note on package security

PyPI is a repository for distributing packages, not a service for auditing them. While third-party security researchers and our staff do their best to detect and remove malicious packages, PyPI cannot guarantee the quality, security or suitability of any given package.