Django + webpack + Vue.js - setting up a new project that's easy to develop and deploy (part 1)

https://ariera.github.io/2017/09/26/django-webpack-vue-js-setting-up-a-n
ew-project-that-s-easy-to-develop-and-deploy-part-1.html

Author: ariera

.gitignore

@@ -29,3 +29,6 @@ local_settings.py
 db.sqlite3
 
 
+webpack-stats.json
+public/
+dist/

README.md

@@ -2,21 +2,36 @@
 
 > A Vue.js and Django example
 
-## Build Setup
+This repo goes along with the first part series of a blogpost I wrote some time ago on how to effectively [setup a project that's easy to develop and deploy using Django, Vue and webpack](https://ariera.github.io/2017/09/26/django-webpack-vue-js-setting-up-a-new-project-that-s-easy-to-develop-and-deploy-part-1.html).
 
-``` bash
-# install dependencies
-npm install
+## Installation
+
+```bash
+yarn install
+python3 -m venv .venv
+source .venv/bin/activate
+pip install -r requirements.txt
+```
 
-# serve with hot reload at localhost:8080
+## Development
+
+* On one terminal run your webpack dev server
+
+```bash
 npm run dev
+```
 
-# build for production with minification
-npm run build
+* On another terminal launch the Django application
 
-# build for production and view the bundle analyzer report
-npm run build --report
+```bash
+python manage.py runserver
+```
+
+And point your browser to [http://localhost:8000](), but test that you can also access the pure Django world, for example by going to the admin panel [http://localhost:8000/admin]()
+
+## Tests
 
+``` bash
 # run unit tests
 npm run unit
 
@@ -26,5 +41,3 @@ npm run e2e
 # run all tests
 npm test
 ```
-
-For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).

build/webpack.base.conf.js

@@ -3,6 +3,7 @@ const path = require('path')
 const utils = require('./utils')
 const config = require('../config')
 const vueLoaderConfig = require('./vue-loader.conf')
+const BundleTracker = require('webpack-bundle-tracker')
 
 function resolve (dir) {
   return path.join(__dirname, '..', dir)
@@ -13,6 +14,9 @@ module.exports = {
   entry: {
     app: './src/main.js'
   },
+  plugins: [
+    new BundleTracker({filename: './webpack-stats.json'}),
+  ],
   output: {
     path: config.build.assetsRoot,
     filename: '[name].js',
@@ -25,6 +29,7 @@ module.exports = {
     alias: {
       'vue$': 'vue/dist/vue.esm.js',
       '@': resolve('src'),
+      '__STATIC__': resolve('static'),
     }
   },
   module: {

build/webpack.dev.conf.js

@@ -32,7 +32,10 @@ const devWebpackConfig = merge(baseWebpackConfig, {
     quiet: true, // necessary for FriendlyErrorsPlugin
     watchOptions: {
       poll: config.dev.poll,
-    }
+    },
+    headers: {
+      "Access-Control-Allow-Origin": "\*",
+    },
   },
   plugins: [
     new webpack.DefinePlugin({

config/index.js

@@ -9,7 +9,7 @@ module.exports = {
 
     // Paths
     assetsSubDirectory: 'static',
-    assetsPublicPath: '/',
+    assetsPublicPath: 'http://localhost:8080/',
     proxyTable: {},
 
     // Various Dev Server settings
@@ -47,15 +47,15 @@ module.exports = {
     // just be aware of this issue when enabling this option.
     cssSourceMap: false,
   },
-  
+
   build: {
     // Template for index.html
     index: path.resolve(__dirname, '../dist/index.html'),
 
     // Paths
-    assetsRoot: path.resolve(__dirname, '../dist'),
-    assetsSubDirectory: 'static',
-    assetsPublicPath: '/',
+    assetsRoot: path.resolve(__dirname, '../dist/'),
+    assetsSubDirectory: '',
+    assetsPublicPath: '/static/',
 
     /**
      * Source Maps
@@ -64,14 +64,14 @@ module.exports = {
     productionSourceMap: true,
     // https://webpack.js.org/configuration/devtool/#production
     devtool: '#source-map',
-    
+
     // Gzip off by default as many popular static hosts such as
     // Surge or Netlify already gzip all static assets for you.
     // Before setting to `true`, make sure to:
     // npm install --save-dev compression-webpack-plugin
     productionGzip: false,
     productionGzipExtensions: ['js', 'css'],
-    
+
     // Run the build command with an extra argument to
     // View the bundle analyzer report after build finishes:
     // `npm run build --report`

project/settings.py

@@ -31,6 +31,7 @@
 # Application definition
 
 INSTALLED_APPS = [
+    'webpack_loader',
     'django.contrib.admin',
     'django.contrib.auth',
     'django.contrib.contenttypes',
@@ -54,7 +55,9 @@
 TEMPLATES = [
     {
         'BACKEND': 'django.template.backends.django.DjangoTemplates',
-        'DIRS': [],
+        'DIRS': [
+            os.path.join(BASE_DIR, 'templates'),
+        ],
         'APP_DIRS': True,
         'OPTIONS': {
             'context_processors': [
@@ -118,3 +121,14 @@
 # https://docs.djangoproject.com/en/1.11/howto/static-files/
 
 STATIC_URL = '/static/'
+STATICFILES_DIRS = (
+    os.path.join(BASE_DIR, 'dist'),
+    os.path.join(BASE_DIR, 'static'),
+)
+STATIC_ROOT = os.path.join(BASE_DIR, 'public')
+WEBPACK_LOADER = {
+    'DEFAULT': {
+        'BUNDLE_DIR_NAME': '',
+        'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json'),
+    }
+}

project/urls.py

@@ -15,7 +15,9 @@
 """
 from django.conf.urls import url
 from django.contrib import admin
+from django.views.generic import TemplateView
 
 urlpatterns = [
     url(r'^admin/', admin.site.urls),
+    url(r'^$', TemplateView.as_view(template_name='project/spa.html'), name='home'),
 ]

templates/project/base.html

@@ -0,0 +1,8 @@
+{% load render_bundle from webpack_loader %}
+<html>
+  <body>
+    {% block content %}
+    {% endblock %}
+    {% render_bundle 'app' %}
+  </body>
+</html>

templates/project/spa.html

@@ -0,0 +1,5 @@
+<!-- ./templates/my_project/spa.html -->
+{% extends "project/base.html" %}
+{% block content %}
+  <div id="app"></div>
+{% endblock %}