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 solders of giants with the following technologies:

Frontend

• React
• React Router
• JSON Web Token JSON Web Token for API authentication
• Babel for ES6 and ES7 magic
• Webpack for bundling
• Webpack Dev Middleware
• 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
• foundation-sites for the grid
• 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 framework JSON Web Token JSON Web Token Authentication support for Django REST Framework
• 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

• Command line starts with $, the command should run with user privileges
• 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

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.