djavue-template is a Django+VueJs combo template to start with the latest Django v3, VueJs v2 and Vue-cli v4. The django basically is used here for the API and serving the static files part and the Vue is for the frontend part.
Webpack is used to generate static bundles without django's staticfiles or opaque wrappers and Django webpack loader django-webpack-loader is used which consumes the output generated by webpack-bundle-tracker and lets you use the generated bundles in django. django-webpack-loader settings is present in settings.py which consumes the output generated by webpack bundle tracker with the help of webpack-stats json file. webpack-stats.json is self created as it is configured in the webpack plugins with the filename. If you want to learn more about it then you can visit the github repo and
Vue.config.js file has vue config for webpack and others which you can learn about it at VueJs cli config page
git clone https://github.com/pawanpaudel93/djavue-template.git
.env-exampleto .env and modify the values as you like and keeping the same value for development is okay.
npm installto install all the vue dependencies from package.json
python manage.py makemigrations && python manage.py migrateto make and migrate the migrations to SQLite database (SQLite used for development purpose) or you can set any other database in the
settings.pyand then run
python manage.py runserverto run the django development server.
npm run serveto compile and hot-reload for development. The vuejs will run at
127.0.0.1:8000to view vuejs web app served through django consumed using django-webpack-loader.
You can use this commands for deployment or use the heroku website for this purpose. For heroku deployment run the following commands after logging to heroku on terminal after installing heroku cli and logging to heroku using command
Check heroku cli install guide for installation Heroku cli Install guide
Change the heroku app name as per your wish as I have selected djavue-template-demo for this demo purpose.
heroku apps:create djavue-template-demo heroku buildpacks:add --index 2 heroku/python heroku buildpacks:add --index 1 heroku/nodejs heroku addons:create heroku-postgresql:hobby-dev heroku config:set VUE_APP_BASEURL=heroku web app URL from first command without http/https heroku config:set DJANGO_SECRET_KEY=your secret key # secret key without space or with space enclosed with inverted commas heroku config:set DJANGO_DEBUG=False heroku config:set ALLOWED_HOSTS=.herokuapp.com git push heroku master
After this steps you can access the deployed demo app at URL which you get from the first command.(Mine is deployed at https://djavue-template.herokuapp.com)