Need help with django-react-typescript?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

marcelovicentegc
169 Stars 20 Forks MIT License 89 Commits 1 Opened issues

Description

A boilerplate with Django on the backend, React on the frontend, and much more!

Services available

!
?

Need anything else?

Contributors list

# 125,854
HTML
gatsby
zero-co...
js
43 commits

License: MIT Build and Test app

django-react-typescript logo

Your favorite React-Django boilerplate.


About

This is a fully-featured Django-React boilerplate built for great development experience and easy deployment.

Global

  • Commit lint rules

Frontend

| Other features | Status | | --------------------------- | ----------- | | SSR ready | In progress | | Service workers | ✔️ | | Gzip static file gen | ✔️ | | Cache control | ✔️ | | Code split and lazy loading | ✔️ | | Google Analytics ready | ✔️ | | PWA ready | ✔️ |

Backend

| Other features | Status | | -------------------- | ------ | | Token authentication | ✔️ | | SMTP ready | ✔️ |

Infrastructure

| Other features | Status | | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | | NGINX config file | ✔️ | | CI/CD to any V.M. (AWS EC2s, GCloud apps, Digital Ocean droplets, Hostgator VPSs, etc) accessible via SSH (the

hml
and
prd
branches will trigger the deploy workflow) | ✔️ | | CI/CD to deploy straight on host (without virtualization; not recommended) (the branch
prd-host
will trigger this. See more on the host deploy workflow method) | ✔️ |

Integrations

Development directions

  1. Clone this repo:
    git clone https://github.com/marcelovicentegc/django-react-typescript.git
  2. Create a virtual environment:
    python -m venv venv
  3. Activate it ☝️:
    source venv/bin/activate
    or
    venv\Scripts\activate
    if you're on a Windows
  4. Install dependencies:
    npm i && pip install -r requirements.txt && cd frontend && npm i
  5. Setup the project
    .env
    file by taking as example the
    .env.example
    on the root folder (refer to configuration for more details)
  6. Setup the frontend app's
    frontend/.env
    file by taking as example the
    frontend/.env.example
    file (refer to configuration for more details)
  7. Start the application:
    npm start
    (make sure Postgres is up and running)

Configuration

You should configure these variables on a

.env
file on the root folder for the global configuration and a
.env
file for the frontend configuration under
frontend/.env
when developing. As for deploying the app, you will need to set the same set of dev variables + some variables exclusively used in production environments as secrets.

Global

| Environment variable | Default | Description | | -------------------- | ---------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | SECRETKEY | w%h-ok)&[email protected]&ht!#ol3!!qg9zwz9hs\[email protected]*#d | Django's SECRETKEY used to encrypt passwords. It can be generated by running:

python -c 'from django.core.management.utils import get_random_secret_key; print(get_random_secret_key())'
| | CDNNAME | - | Cloudinary's CDN name | | CDNAPIKEY | - | Cloudinary's CDN API key | | CDNAPISECRET | - | Cloudinary's CDN API secret | | DBHOST | - | Database host name | | DBNAME | - | Database name | | DBUSER | - | Database user | | DBPASSWORD | - | Database password | | DBPORT | - | Databse port | | SMTPHOSTUSER | | Your SMTP email (should be a GMail one) | | SMTPHOSTPASSWORD | - | Your SMTP email password | | TEST | 0 | Used to test the app on the pipeline | | TWILIOACCOUNTSID | - | Your Twilio account SID (optional) | | TWILIOAUTHTOKEN | - | Your Twilio account Auth token(optional) | | TWILIOWPPNUMBER | - | Your Twilio account's Whatsapp number (optional) |

Exclusively used in production

| Environment variable | Must be | | -------------------- | ---------------------------------------------------------------------------------------------------- | | IMAGENAME | Docker image name (for HML, it will append

-hml
on its name) | | MODE |
production
. This is hardcoded on the Dockerfile | | ALLOWED
HOSTS | A set of hosts allowed to pass CORS policy. I.g: "www.example.com" "example.com" | | HMLALLOWEDHOSTS | Same as ALLOWEDHOSTS but for a HML environment | | DEPLOYTOKEN | A Github token with permission to pull this project's image from your Github registry | | HMLDEPLOYTOKEN | Same as DEPLOYTOKEN but for a HML environment | | HOST | The domain under which your site will be hosted (i.g.:example.com) | | HMLHOST | Same of HOST but for a HML environment (i.g.: hml.example.com) | | SSHPRIVATEKEY | The SSH key used to access the host machine (currently, one for both PROD and HML environments) | | USERNAME | The SSH username used to access the host machine (currently, one for both PROD and HML environments) |

Frontend

| Environment variable | Default | Description | | -------------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | NODEENV |

development
| Let's Webpack know when to build files to correct public path, optimize code and when to prepend localhost for API endpoints or not. Values must be either
development
or
production
. This is hardcoded on the Dockerfile | | AUTH
TOKEN | - | An auth key generated on Django's admin that must be associated to a user with specific permissions (i.g.: read specific infos from Django's ORM) | | GTAG_ID | - | Google Analytics ID |

Exclusively used in production

| Environment variable | Must be | | -------------------- | ------------------------------------------ | | HMLAUTHKEY | Same as AUTHKEY but for a HML environment | | HMLGTAGID | Same as GTAGID but for a HML environment |

Deployment worfklows

Virtualized Deploy Workflow

Branches

hml
and
prd
will trigger this workflow.

Deploy workflow

Host Deploy Workflow

For this kind of deploy to work, you will need a running Postgres database, Nginx, and Supervisor processes.

Basic architecture

Architecture

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.