Django React/Redux Base Project
This repository includes a boilerplate project used for all Seedstars Labs applications. It uses Django as backend and React as frontend.
We build on the shoulders of giants with the following technologies:
- React Router Declarative routing for React
- Babel for ES6 and ES7 magic
- Webpack for bundling
- Webpack Dev Middleware
- Clean Webpack Plugin
- Redux Dev Tools DevTools for Redux with hot reloading, action replay, and customizable UI. Watch Dan Abramov's talk
- Redux Thunk Thunk middleware for Redux - used in async actions
- React Router Redux Ruthlessly simple bindings to keep react-router and redux in sync
- tcomb form Forms library for react
- style-loader, sass-loader and less-loader to allow import of stylesheets in plain css, sass and less,
- font-awesome-webpack to customize FontAwesome
- bootstrap-loader to customize Bootstrap
- mocha to allow writing unit tests for the project
- redux-mock-store a mock store for your testing your redux async action creators and middleware
- expect Write better assertions
- Nock HTTP mocking and expectations library
- istanbul to generate coverage when running mocha
- Django REST framework Django REST framework is a powerful and flexible toolkit for building Web APIs
- Django REST Knox Token based authentication for API endpoints
- WhiteNoise to serve files efficiently from Django
- Prospector a complete Python static analysis tool
- Bandit a security linter from OpenStack Security
- pytest a mature full-featured Python testing tool
- Mock mocking and testing Library
- Responses a utility for mocking out the Python Requests library
- If the command line starts with $, the command should run with user privileges
- If the command line starts with #, the command should run with root privileges
$ git clone https://github.com/seedstars/django-react-redux-base.git
$ cd django-react-redux-base
$ git submodule init
$ git submodule update
Remember that when you copy this repository for a new project you need to add the scripts external module using:
$ git submodule add https://github.com/Seedstars/culture-scripts scripts
NOTE: This is only needed in case you copy this code to a new project. If you only clone or fork the repository, the submodule is already configured
You have two ways of running this project: Using the Dockers scripts or running directly in the console.
Running NO DOCKER
$ wget -qO- https://deb.nodesource.com/setup_6.x | sudo bash -
$ apt-get install --yes nodejs
$ curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
$ echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
$ sudo apt-get update && sudo apt-get install yarn
Compile and run project
yarn run dev should be run in another console because it blocks it.
$ yarn run dev# will run webpack with watch and compile code as it changes
$ virtualenv -p /usr/bin/python3 virtualenv
$ source virtualenv/bin/activate
$ pip install -r py-requirements/dev.txt
$ cd src
$ python manage.py migrate
$ python manage.py loaddata fixtures.json
$ python manage.py runserver
Then open your browser the page: http://localhost:8000/ If all goes ok you should see a React single page app.
We use Docker as a development environment. For production, we leave you to set it up the way you feel better, although it is trivial to extrapolate a production environment from the current docker-compose.yml.
To stop the development server:
$ docker-compose stop
Stop Docker development server and remove containers, networks, volumes, and images created by up.
$ docker-compose down
You can access shell in a container
$ docker ps # get the name from the list of running containers
$ docker exec -i -t djangoreactreduxbase_frontend_1 /bin/bash
The database can be accessed @localhost:5433
$ psql -h localhost -p 5433 -U djangoreactredux djangoreactredux_dev
To make sure the code respects all coding guidelines you should run the statics analysis and test scripts before pushing any code.
Backend (django/python tests)
Please take into account that test_local_backend.sh runs py.test with
--nomigrations --reuse-db flags to allow it be performant. Any time you add a migration please remove those flags next time you run the script.
Backend (django/python static analysis)
Deployment in Production
We deploy all our production code using Kubernetes. Explaining how to do deployments is beyond the scope of this boilerplate.
Here's a great article from digital ocean on how to deploy django project in a VM: https://www.digitalocean.com/community/tutorials/how-to-set-up-django-with-postgres-nginx-and-gunicorn-on-ubuntu-16-04
Here are some screenshots of the boilerplate project.
Gotchas in Docker
- This project uses NodeJS v6.x (stable) and yarn
- If your IDE has builtin language support for python with auto-imports (e.g. PyCharm), you can create a virtualenv and install the py-requirements.
- If you are annoyed by docker creating files belonging to root (which is Docker's intended behaviour), you can run
# chown -hR $(whoami) .before firing up the server.
We welcome contributions from the community, given that they respect these basic guidelines:
- All Tests & Static Analysis passing;
- 100% code coverage;
Prior to any pull-request, we advise to open an issue. This is because, although we are happy to merge your code, we must make sure the changes don't impact our way of doing things, thus resulting on a declined PR, and your time wasted.
If you want to tackle any open issue, well..... Just go for it! :)