A Django project boilerplate/template with lots of state of the art libraries and tools like:

• React, for building interactive UIs
• django-js-reverse, for generating URLs on JS
• React Bootstrap, for responsive styling
• Webpack, for bundling static assets
• Celery, for background worker tasks
• WhiteNoise with brotlipy, for efficient static files serving
• prospector and ESLint with pre-commit for automated quality assurance (does not replace proper testing!)

For continuous integration, a CircleCI configuration .circleci/config.yml is included.

Also, includes a Heroku app.json and a working Django production.py settings, enabling easy deployments with 'Deploy to Heroku' button. Those Heroku plugins are included in app.json:

• PostgreSQL, for DB
• Redis, for Celery
• Sendgrid, for e-mail sending
• Papertrail, for logs and platform errors alerts (must set them manually)

This is a good starting point for modern Python/JavaScript web projects.

• Make sure you have Python 3.8 installed
• Install Django with pip install django, to have the django-admin command available.
• Open the command line and go to the directory you want to start your project in.
• Start your project using:

  django-admin startproject theprojectname --extension py,yml,json --name Procfile,Dockerfile,README.md,.env.example,.gitignore,Makefile --template=https://github.com/vintasoftware/django-react-boilerplate/archive/boilerplate-release.zip
  

  Alternatively, you may start the project in the current directory by placing a . right after the project name, using the following command:

  django-admin startproject theprojectname . --extension py,yml,json --name Procfile,Dockerfile,README.md,.env.example,.gitignore,Makefile --template=https://github.com/vintasoftware/django-react-boilerplate/archive/boilerplate-release.zip
  

In the next steps, always remember to replace theprojectname with your project's name

• Above: don't forget the --extension and --name params!
• Change the first line of README to the name of the project
• Add an email address to the ADMINS settings variable in {{project_name}}/backend/{{project_name}}/settings/base.py
• Change the SERVER_EMAIL to the email address used to send e-mails in {{project_name}}/backend/{{project_name}}/settings/production.py
• Rename the folder circleci to .circleci with the command mv circleci .circleci

After completing ALL of the above, remove this Project bootstrap section from the project README. Then follow Running below.

• Setup editorconfig, prospector and ESLint in the text editor you will use to develop.

• Inside the backend folder, do the following:
• Create a copy of {{project_name}}/settings/local.py.example:
   cp {{project_name}}/settings/local.py.example {{project_name}}/settings/local.py
• Create a copy of .env.example: cp .env.example .env

• Open a new command line window and go to the project's directory.
• Create the migrations for users app:
  make docker_makemigrations
• Run the migrations: make docker_migrate
• Run the project: make docker_up
• To access the logs for each service, run: make docker_logs <service name> (either backend, frontend, etc)
• Stop the project: make docker_down

• Open a new command line window and go to the project's directory.
• To install a new frontend package, run: make docker_npm_install <package name>
• To update the frontend dependencies using the current package.json, run: make docker_update_frontend_deps
• To update the backend dependencies using the current requirements.in and dev-requirements.in, run: make docker_update_backend_deps

• Open a new command line window and go to the project's directory.
• npm install
• npm run start

• Open a new command line window and go to the project's directory.

• Create a new virtualenv with either virtualenvwrapper or only virtualenv: mkvirtualenv {{project_name}} or python -m venv {{project_name}}-venv

  If you're using Python's virtualenv (the latter option), make sure to create the environment with the suggested name, otherwise it will be added to version control.

• Make sure the virtualenv is activated workon {{project_name}} or source {{project_name}}-venv/bin/activate

• Run make compile_install_requirements to install the requirements

  Please make sure you have already setup PostgreSQL on your environment before installing the requirements

  In case you wish to use a Conda virtual environment, please remove the line export PIP_REQUIRE_VIRTUALENV=true; \ from Makefile

• With the virtualenv enabled, go to the backend directory.
• Create the migrations for users app: python manage.py makemigrations
• Run the migrations: python manage.py migrate
• Run the project: python manage.py runserver

• Open a command line window and go to the project's directory
• workon {{project_name}} or source {{project_name}}-venv/bin/activate depending on if you are using virtualenvwrapper or just virtualenv.
• python manage.py celery

• For development, we use Mailhog to test our e-mail workflows, since it allows us to inspect the messages to validate they're correctly built
  • Docker users already have it setup and running once they start the project
  • For non-Docker users, please have a look here for instructions on how to setup Mailhog on specific environments

The project expects Mailhog SMTP server to be running on port 1025, you may alter that by changing EMAIL_PORT on settings

make test

Will run django tests using --keepdb and --parallel. You may pass a path to the desired test module in the make command. E.g.:

make test someapp.tests.test_views

Add the libname to either requirements.in or dev-requirements.in, then either upgrade the libs with make upgrade or manually compile it and then, install. pip-compile requirements.in > requirements.txt or make upgrade pip install -r requirements.txt

Before you start creating your own apps remove the example:

• Run the command make clean_examples in order to clean up the example apps from the front and backend.
• Deregister the example app by removing 'exampleapp.apps.ExampleappConfig' from backend/{{project_name}}/settings/base.py.
• Adjust backend/{{project_name}}/urls.py to point to your newly created Django app and remove the path configuration that redirects to the deleted example app.

This project comes with an app.json file, which can be used to create an app on Heroku from a GitHub repository.

Before deploying, please make sure you've generated an up-to-date requirements.txt file containing the Python dependencies. This is necessary even if you've used Docker for local runs. Do so by following these instructions.

After setting up the project, you can init a repository and push it on GitHub. If your repository is public, you can use the following button:

If you are in a private repository, access the following link replacing $YOUR_REPOSITORY_LINK$ with your repository link.

• https://heroku.com/deploy?template=$YOUR_REPOSITORY_LINK$

Remember to fill the ALLOWED_HOSTS with the URL of your app, the default on heroku is appname.herokuapp.com. Replace appname with your heroku app name.

Sentry is already set up on the project. For production, add SENTRY_DSN environment variable on Heroku, with your Sentry DSN as the value.

You can test your Sentry configuration by deploying the boilerplate with the sample page and clicking on the corresponding button.

The bin/post_compile script has a step to push Javascript source maps to Sentry, however some environment variables need to be set on Heroku.

You need to enable Heroku dyno metadata on your Heroku App. Use the following command on Heroku CLI:

• heroku labs:enable runtime-dyno-metadata -a <app name>

The environment variables that need to be set are:

• SENTRY_ORG - Name of the Sentry Organization that owns your Sentry Project.
• SENTRY_PROJECT_NAME - Name of the Sentry Project.
• SENTRY_API_KEY - Sentry API key that needs to be generated on Sentry. You can find or create authentication tokens within Sentry.

After enabling dyno metadata and setting the environment variables, your next Heroku Deploys will create a release on Sentry where the release name is the commit SHA, and it will push the source maps to it.

• Manually with prospector and npm run lint on project root.
• During development with an editor compatible with prospector and ESLint.

• Run pre-commit install to enable the hook into your git repo. The hook will run automatically for each commit.
• Run git commit -m "Your message" -n to skip the hook if you need.

Some settings defaults were decided based on Vinta's experiences. Here's the rationale behind them:

We believe Celery tasks should be idempotent. So for us it's safe to set CELERY_ACKS_LATE = True to ensure tasks will be re-queued after a worker failure. Check Celery docs on "Should I use retry or acks_late?" for more info.

If you wish to contribute to this project, please first discuss the change you wish to make via an issue.

Check our contributing guide to learn more about our development process and how you can test your changes to the boilerplate.

This project, as other Vinta open-source projects, is used in products of Vinta clients. We are always looking for exciting work, so if you need any commercial support, feel free to get in touch: [email protected]

Copyright (c) 2021 Vinta Serviços e Soluções Tecnológicas Ltda.

MIT License