Git Product home page Git Product logo

django-react-boilerplate's Introduction

License: MIT

Django React Boilerplate

About

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

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.

Project bootstrap CircleCI Greenkeeper badge

  • 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

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

  • Above: don't forget the --extension and --name params!
  • Navigate to the project's directory through your command line.
  • 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
  • Compile the requirements before installation and install them: make compile_install_requirements
  • 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.

Running

Setup

  • 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

If you are using plain python:

  • Create the migrations for users app: python manage.py makemigrations
  • Run the migrations: python manage.py migrate

If you are using Docker:

  • Create the migrations for users app:
    docker-compose run --rm backend python manage.py makemigrations
  • Run the migrations: docker-compose run --rm backend python manage.py migrate

Tools

Running the project (without docker)

  • Open a command line window and go to the project's directory.
  • pip install -r requirements.txt && pip install -r dev-requirements.txt
  • npm install
  • npm run start
  • Open another command line window.
  • workon theprojectname or source theprojectname/bin/activate depending on if you are using virtualenvwrapper or just virtualenv.
  • Go to the backend directory.
  • python manage.py runserver

Running the project (with docker)

  • Open a command line window and go to the project's directory.
  • docker-compose up -d To access the logs for each service run docker-compose logs -f service_name (either backend, frontend, etc)

Celery

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

Testing

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

Adding new pypi libs

Add the libname to either requirements.in or dev-requirents.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

Cleaning example code

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.

Deployment

Setup

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

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:

Deploy

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

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.

Sentry source maps for JS files

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:

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.

Linting

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

Pre-commit hooks

  • 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.

Opinionated Settings

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

CELERY_ACKS_LATE = True

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.

Contributing

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.

Commercial Support

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) 2020 Vinta Serviços e Soluções Tecnológicas Ltda.

MIT License

django-react-boilerplate's People

Contributors

aericson avatar amandasavluchinske avatar andersonresende avatar chocoelho avatar dependabot[bot] avatar edilson avatar felipefarias avatar filipeximenes avatar fjsj avatar greenkeeper[bot] avatar gtsalles avatar heliomeiralins avatar hugobessa avatar joaopslins avatar laisvarejao avatar lucabezerra avatar marycaroline avatar mazulo avatar morrme avatar osantana avatar pantoja avatar pauloromeira avatar pdrmtaheri avatar rsarai avatar sichgeis avatar sloria avatar sobolevn avatar victorcarrico avatar victorfsf avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.