djavue-template

by pawanpaudel93

GitHub Readme.md

djavue-template

DjaVue Template

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

Development Installation

  • Clone the repository git clone https://github.com/pawanpaudel93/djavue-template.git
  • Rename .env-example to .env and modify the values as you like and keeping the same value for development is okay.
  • Install pipenv from pipenv repo and create a virtual environment and install django and django dependencies with it from the Pipfile.
  • And npm install to install all the vue dependencies from package.json
  • Run python manage.py makemigrations && python manage.py migrate to make and migrate the migrations to SQLite database (SQLite used for development purpose) or you can set any other database in the settings.py and then run python manage.py runserver to run the django development server.
  • In the next terminal tab or command prompt run npm run serve to compile and hot-reload for development. The vuejs will run at localhost:8080 or 127.0.0.1:8080.
  • Now you can access the development server at localhost:8000 or 127.0.0.1:8000 to view vuejs web app served through django consumed using django-webpack-loader.

Heroku Deployment

Deploy

OR

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 heroku login.

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)