!!! Disclaimer: This package is not maintained and therefore is not recommended for production use. It is also recommended not to deploy a JavaScript application through Django. Please refer to load balancing with nginx or ELB/ALB and storing files on S3 or similar services.
vue-django-webpack
Vue.js and Django Web Application
- Use of Vue.js in component form
- Webpack building the JavaScript and CSS portions of the application
- Django serving builds with django-webpack-loader
The advantage to this over a pure Vue.js application are those niceties included in Django's core library such as database managment and URL routing. This also includes the ability to add third party applications such as, the Django REST Framework, quickly and painfree.
Once a bundle has been created with Webpack, it can easily be served with Django's django.contrib.staticfiles app.
##Installation Setup a new Python 3 virtualenv and install the pip and npm requirements.
git clone https://github.com/djstein/vue-django-webpack.git
cd vue-django-webpack
# Virtual environment
virtualenv -p python3 venv
source venv/bin/activate
pip install -r requirements.txt
npm install
Development
During development it is useful to access the hot-load features without the need to rebuild the application. Do so by running Django in one terminal and the node server in another.
# Run Django webserver
python manage.py runserver
# Run node webserver
npm run dev
Any changes made to app/vueapp/src/
will now be seen automatically in development. Feel free to add components / new pages / etc.
Webpack Build
Local
To use the application without the use of the node server, use webpack to create a build. This will automatically switch the path needed in webpack-stats.json to reprsent the local build development bundles (.js and .css), with no changes to Django for local development.
# Local Build
npm run build
Django can continue to run while the build is recreated, however it is advised to stop the webserver and clear the browswer cache when creating new builds.
# Run Django webserver
python manage.py runserver
Production
Production Instructions Are Not Complete
For production builds, using build-proudction will pack and UglifyJS the application. IT IS RECOMMENDED TO STILL COMPLETE THE DJANGO AND VUE.JS PRODUCTION DOCUMENTATION BEFORE DEPLOYING.
# Production Build
npm run build-production
Sources
These resources were heavily referenced:
https://github.com/vuejs-templates/webpack/tree/master/template
https://github.com/owais/django-webpack-loader/tree/master/examples
Contributions
Please feel free to pull, fork, or add suggestions