README.md

NOTE: THIS HAS BEEN DEPRECATED. Use this instead. Integrates Facebooks create react app with Django :)

An example project for a Dockerized Django/ReactJS web application

I set this up because it was SUCH a pain in the a** to set up a web application with all of the latest technologies. I created this as a boilerplate after much research and reading of blogs. For a detailed step by step for creating this project look here. Or you can just clone this repo and follow the local deployment instructions.

This is an example of a project that uses the following technologies:

• Docker with Docker Compose
• Django REST APIs
• ReactJS with Redux
• Webpack module bundler and Hot Reloading (Uses React Hot Reloader 3!)
• Karma with Mocha for JavaScript unit tests

System Requirements

• Docker
• Docker Compose
• PostgreSQL
• pyenv
• pyenv-virtualenv
• git
• NodeJS 6+
• NPM 3+

Setup Local Environment

First things, first. Clone the repo

git clone https://github.com/genomics-geek/django_reactjs_boilerplate.git

To setup a Dockerized development environment

In my opinion, this is the easiest way to get up and running.

1. Create .env file

Example .env file

2. Build docker container

make docker-build-dev
make docker-up-dev

Visit http://localhost:8000. You should see Hello World!. You should now see the application running locally! Also this project is set up to use hot reloading, so you can see your changes to React components live ;)

To setup a local development environment

If you want to a non dockerized development environment

1. Set up a virtual environment - Quick Guide to Virtual Environments

pyenv virtualenv [name_of_venv]

2. Install requirements

npm install
pip install -r requirements/local.txt

3. Create .env file

Example .env file

4. Create the PostgreSQL database

Quick Guide for installing PostgreSQL on MacOSX

5. Start the node server

Open a terminal window and run:

npm run watch

7. Start the django server

Before you run python manage.py run:

export DJANGO_SETTINGS_MODULE=django_config.settings.local

Or alternatively, you can just add --settings=django_config.settings.local to any python manage.py command you run.

Open another terminal window and run:

python manage.py migrate
python manage.py runserver

Visit http://localhost:8000. You should see Hello World!. You should now see the application running locally! Also this project is set up to use hot reloading, so you can see your changes to React components live ;)

Languages used

• Python
• JavaScript
• JSX

Tools used

• Docker 1.12.1
• Docker compose 1.8.0
• Django 1.10.2
• Django REST Framework 3.4.7
• ReactJS 15.3.2
• Redux 3.6.0
• PostgreSQL 9.6.0
• NodeJS 6.7.0
• NPM 3.10.7
• Webpack 1.13.2

Helpful resources

• Gist on setting up Django + ReactJS project
• Learn Redux from the Creator!
• More from Dan
• Dockerizing Django projects
• Owais Lane Blog Post on Django + ReactJS with Webpack
• Extension of Owais Lane's blog post
• YouTube Playlist on Django Rest Framework
• YouTube Playlist on ReactJS/Redux
• fullstackpython
• Write your first Django App
• Quick Django tutorial
• Django REST framework
• Using React with Django, with a little help from Webpack
• Hot Module Replacement with Webpack
• Example of React Hot Reloader 3