Django-Webpack-React-Typescript-HMR-Boilerplate

This project is DEPRECATED

Please checkout this one with Node.js support! :)

Stack

• django - backend
• yarn - dependency manager
• gulp - task runner
• materialize - a modern responsive front-end framework based on Material Design
• sass - CSS pre-processors
• postcss - CSS post-processor
• webpack 2 - module bundler
• webpack-dev-server - provides fast in-memory access to the webpack assets for live reloading
• followed ES6 standard
• babel - compile ES6 to ES5
• react - building user interfaces
• react-hot-loader 3 - hot module reload!
• react-router - routing
• react-redux - the official react bindings for redux (a predictable state container for js apps)
• react-router-redux - keep react-router and redux in sync
• Typescript - a typed superset of javascript that scales
• DefinitelyTyped - high quality TypeScript type definitions
• editorconfig - maintain consistent coding styles between different editors and IDEs
• eslint - lint javascript files (.js, .jsx)
• tslint - lint typescript files (.ts, .tsx)
• stylelint - lint style files (.css, .scss)
• pylint - lint python files (.py)
• postgresql - advanced open source database
• prismjs - code syntax highlight
• jest - painless javascript testing
• coveralls - test coverage
• husky - git hooks
• travis-ci - continuous integration tool for testing and deployment
• docker - the open-source application container engine

Install && Run

Prerequisite

• node
• yarn (recommended) or npm
• python 3.6.0 and virtualenv
  • Tip: you can use pyenv to manage your different versions of python
• postgresql or other databases

Install yarn follows official documentation.

Install pyenv follows official documentation.

Install project dependencies

Go to project root directory:

yarn
yarn global add gulp
bash patch.sh

If you meet permission problem when try to install yarn globally, check this out.

Set up python virtual environment

If you don't have python 3.6.0 installed, you can choose to use pyenv

brew install pyenv
pyenv install 3.6.0
pyenv local 3.6.0

After that, create a virtual python environment using python 3.6.0, naming the folder as pyenv which has been added to .gitignore

pip install virtualenv
virtualenv -p python3 pyenv

Source your virtualenv and install the required package through pip

source pyenv/bin/activate
pip install -r backend/requirements.txt

Customize your django setting

vim backend/project_name/settings.py

You probably want to change:

1. Database Config
2. Timezone
3. Cache Method
4. Others

(if you are using postgresql, then create a user called django with django database, and the default setting is good to go, otherwise you may need to install database driver for your own database)

Run gulp with webpack to generate bundle assets

On development (with react-hot-reload):

gulp

On production (with uglify-js and other optimazitions):

NODE_ENV=production gulp

Run django backend server

cd backend

On development:

python manage.py makemigrations
python manage.py migrate
python manage.py runserver

On production:

vim project_name/settings.py

Set DEBUG to False

python manage.py makemigrations
python manage.py migrate
python manage.py collectstatic
# Setup Apache or Nginx to support static files here
python manage.py runserver

Run test

yarn test

Code coverage

yarn coveralls

License

MIT License