Django React/Redux Base Project

This repository includes a base project to be used for all new online applications.

It uses the following technologies:

Frontend

• React
• React Router
• 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 andless-loader to allow import of stylesheets in plain css, sass and less,
• bootstrap-sass-loader andfont-awesome-webpack to customize Bootstrap and FontAwesome
• ESLint , Airbnb Javascript/React Styleguide , Airbnb CSS / Sass Styleguide to maintain a consistent code style
• 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

Backend

• Django
• WhiteNoise to serve files efficiently from Django
• Prospector a complete Python static analysis tool
• 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-base.git
• $ cd django-react-redux-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

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