danwild / react-webpack-django

De-coupled ReactJS client for greater flexibility and less black-box Django magic

react-webpack-django

Full-stack application scaffold. Structured to provide much needed decoupling between the client application build and Django's opinionated pipeline/staticfiles systems.

Achieved by using webpack to manage our client bundling, with these tools:

• webpack-bundle-tracker
• django-webpack-loader

In short, we'll let Django do what it is good at; Server-side/ORM stuff, while de-coupling the client for greater flexibility (and less confusing black-box Django magic!)

routing notes

• Routing (e.g. /, /about) has been configured using react-router-dom.
• In our Django apps urls.py we have defined a catchall which essentially defers routing to React.
• There is also an example url configured to allow django to serve a route template (depending on your use case you may want a mix of both approaches).

styling

• Bootstrap v4 Alpha with reactstrap for UI components has been added
• less-loader has been configured to transpile/bundle less files.
• Uses Bootswatch Flatly 4 Alpha theme
• Uses react-fa for FontAwesome icons as React components.

todo

• Client/Server request auth.

install, build, run etc.

From project root:

# javascript things
npm install                         # install js packages
npm run watch                       # run webpack build for client app, and rebuild on \*change

# python things
virtualenv venv                     # create python virtualenv
source venv/bin/activate            # enter venv
pip install -r requirements.txt     # install pip packages
python manage.py runserver          # serve

*to just build a webpack bundle once use: npm run build

License

MIT License

Resources

Heavily based on these great resources:

• Let's modernize the way we handle frontend code with Django
• Using Webpack transparently with Django + hot reloading React components as a bonus
• Using React with Django, with a little help from Webpack
• Setting up ReactJS/Redux using Webpack for an existing Django project
• Moving to Webpack v2 (notes still useful, many example use v1)