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:

Frontend

React
React Router
Babel for ES6 and ES7 magic
Webpack for bundling
Webpack Dev Middleware
Clean Webpack Plugin
Redux's futuristic Flux implementation
Redux Dev Tools for next generation DX (developer experience). 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
fetch A window.fetch JavaScript polyfill
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
ESLint, Airbnb Javascript/React Styleguide, Airbnb CSS / Sass Styleguide to maintain a consistent code style and eslint-plugin-import to make sure all imports are correct
mocha to allow writing unit tests for the project
Enzyme JavaScript Testing utilities for React
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

Backend

Django
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

Readme Notes

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

Retrieve code

$ git clone https://github.com/Seedstars/django-react-redux-jwt-base.git
$ cd django-react-redux-jwt-base
$ git submodule init
$ git submodule update
$ ./scripts/get_static_validation.sh

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

Installation

django-rest-knox dependencies

# apt-get install -y build-essential libssl-dev libffi-dev libpq-dev python3-dev python-dev

NodeJS

# wget -qO- https://deb.nodesource.com/setup_4.x | sudo bash -
# apt-get install --yes nodejs

Make sure npm version is 3.x

$ npm -v
$ npm install -g npm@next # only if version is lower than 3.x

Main Project

$ npm install
$ npm 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

Running

Run webpack in development mode

$ npm run dev

Run Django development http server

$ cd src
$ python manage.py runserver

Testing

Frontend (javascript tests)

$ ./scripts/test_local_frontend.sh

Backend (django/python tests)

$ ./scripts/test_local_backend.sh

Static analysis

To make sure the code respects all coding guidelines you should run the statics analysis script before pushing any code.

Frontend (javascript static analysis)

$ ./scripts/static_validate_frontend.sh

Backend (django/python static analysis)

$ ./scripts/static_validate_backend.sh

Screenshots

Here are some screenshots of the boilerplate project.

xinyuanyu/django-react-redux-base