What's different from the original repo?

Changed backend folder into api.
Added Vuetify Vuex PWA SASS stylus.

Django Vue Template ✌️ 🐍

This template is a minimal example for an application using VueJs and Django (RestFramework).

It's setup to have a clear separation: use Vue, Yarn, and Webpack to handle all frontend logic and asset bundling, and use Django and RestFramework to manage a Data Models, Web API, and serve static files.

While it's possible to add endpoints to serve django-rendered html responses, the intention is to use Django primarily for the backend, and have view rendering and routing and handled by Vue + Vue Router as a Single Page Application (SPA).

Out of the box, Django will serve the application entry point (index.html + bundled assets) at / , data at /api/, and static files at /static/. Django admin panel is also available at /admin/ and can be extended as needed.

The application templates from Vue Cli create and Django createproject are kept as close as possible to their original state, except where a different configuration is needed for better integration of the two frameworks.

Alternatives

If this setup is not what you are looking for, you might want look at other similar projects:

Prefer Flask? Checkout my gtalarico/flask-vuejs-template

Demo

Live Demo

Includes

Django
Django Restframework
Django Whitenoise, CDN Ready
Vue Cli 3
Vue Router
Gunicorn
Configuration for Heroku Deployment

Template Structure

Location	Content
`/api`	Django Project & Backend Config
`/api/api`	Django App (`/api`)
`/src`	Vue App .
`/src/main.js`	JS Application Entry Point
`/public/index.html`	Html Application Entry Point (`/`)
`/public/static`	Static Assets
`/dist/`	Bundled Assets Output (generated at `yarn build`

Prerequisites

Before getting started you should have the following installed and running:

Yarn - instructions
Vue Cli 3 - instructions
Python 3
Pipenv

Setup Template

$ git clone https://github.com/gtalarico/django-vue-template
$ cd django-vue

Setup

$ yarn install
$ pipenv install --dev & pipenv shell
$ python manage.py migrate

Running Development Servers

$ python manage.py runserver

From another tab in the same directory:

$ yarn serve

The Vuejs application will be served from localhost:8080 and the Django Api and static files will be served from localhost:8000.

The dual dev server setup allows you to take advantage of webpack's development server with hot module replacement. Proxy config in vue.config.js is used to route the requests back to django's Api on port 8000.

If you would rather run a single dev server, you can run Django's development server only on :8000, but you have to build build the Vue app first and the page will not reload on changes.

$ yarn build
$ python manage.py runserver

Deploy

Set ALLOWED_HOSTS on api.settings.prod.py

Heroku Server

$ heroku apps:create django-vue-template-demo
$ heroku git:remote --app django-vue-template-demo

$ heroku buildpacks:add --index 1 heroku/nodejs
$ heroku buildpacks:add --index 2 heroku/python
$ heroku addons:create heroku-postgresql:hobby-dev

$ heroku config:set HOST_ENV=production
$ heroku config:set SECRET_KEY=123456
$ heroku config:set ALLOWED_HOSTS=YOUR_APP_NAME.herokuapp.com
$ heroku config:set DATABASE_URL=postgres://YOUR_DB_URL

$ git push heroku

Heroku's nodejs buidlpack will handle install for all the dependencies from the packages.json file. It will then trigger the postinstall command which calls yarn build. This will create the bundled dist folder which will be served by whitenoise.

The python buildpack will detect the pipfile and install all the python dependencies.

The Procfile will run Django migrations and then launch Django'S app using gunicorn, as recommended by heroku.

Heroku One Click Deploy

Static Assets

See settings.dev and vue.config.js for notes on static assets strategy.

This template implements the approach suggested by Whitenoise Django. For more details see WhiteNoise Documentation

It uses Django Whitenoise to serve all static files and Vue bundled files at /static/. While it might seem inefficient, the issue is immediately solved by adding a CDN with Cloudfront or similar. Use vue.config.js > baseUrl option to set point all your assets to the CDN, and then set your CDN's origin back to your domains /static url.

Whitenoise will serve static files to your CDN once, but then those assets are cached and served directly by the CDN.

This allows for an extremely simple setup without the need for a separate static server.

Cloudfront Setup Wiki

yaseralnajjar/django-vue-template