├── .gitignore ├── LICENSE ├── README.md ├── circle.yml ├── deploy-docs.sh ├── docs ├── README.md ├── SUMMARY.md ├── backend.md ├── commands.md ├── e2e.md ├── env.md ├── linter.md ├── pre-processors.md ├── prerender.md ├── proxy.md ├── static.md ├── structure.md └── unit.md ├── meta.js ├── package.json ├── template ├── .babelrc ├── .editorconfig ├── .eslintignore ├── .eslintrc.js ├── .gitignore ├── .postcssrc.js ├── Makefile ├── README.md ├── backend │ ├── __init__.py │ ├── settings.py │ ├── settingsdev.py │ ├── templates │ │ └── index.html │ ├── urls.py │ ├── views.py │ └── wsgi.py ├── frontend │ ├── build │ │ ├── build.js │ │ ├── check-versions.js │ │ ├── logo.png │ │ ├── utils.js │ │ ├── vue-loader.conf.js │ │ ├── webpack.base.conf.js │ │ ├── webpack.dev.conf.js │ │ ├── webpack.prod.conf.js │ │ └── webpack.test.conf.js │ ├── config │ │ ├── dev.env.js │ │ ├── index.js │ │ ├── prod.env.js │ │ └── test.env.js │ ├── index.html │ ├── src │ │ ├── App.vue │ │ ├── assets │ │ │ └── logo.png │ │ ├── components │ │ │ └── HelloWorld.vue │ │ ├── main.js │ │ └── router │ │ │ └── index.js │ └── test │ │ ├── e2e │ │ ├── custom-assertions │ │ │ └── elementCount.js │ │ ├── nightwatch.conf.js │ │ ├── runner.js │ │ └── specs │ │ │ └── test.js │ │ └── unit │ │ ├── .eslintrc │ │ ├── index.js │ │ ├── karma.conf.js │ │ ├── setup.js │ │ └── specs │ │ └── HelloWorld.spec.js ├── manage.py ├── package.json ├── public │ └── .gitkeep ├── requirements-dev.txt ├── requirements.txt └── static │ └── .gitkeep └── test.sh /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | docs/_book 4 | test/ 5 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2013-present, Yuxi (Evan) You 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-webpack-vue-django-boilerplate 2 | 3 | > A full-featured Webpack setup with hot-reload, lint-on-save, unit testing & css extraction, setup with Vue and Django. 4 | 5 | > This template is Vue 2.0 compatible. For Vue 1.x use this command: `vue init webpack#1.0 my-project` 6 | 7 | > This template is a fork of [vuejs-templates/webpack](https://github.com/vuejs-templates/webpack). Snippets and guidance have been found from [hello-vue-django](https://github.com/rokups/hello-vue-django) and a post from [ariera](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) blog. 8 | 9 | ## Documentation 10 | 11 | - [For this template](http://vuejs-templates.github.io/webpack): common questions specific to this template are answered and each part is described in greater detail 12 | - [For Vue 2.0](http://vuejs.org/guide/): general information about how to work with Vue, not specific to this template 13 | 14 | ## Usage 15 | 16 | This is a project template for [vue-cli](https://github.com/vuejs/vue-cli). **It is recommended to use npm 3+ for a more efficient dependency tree.** 17 | 18 | ``` bash 19 | $ npm install -g vue-cli 20 | $ vue init webpack my-project 21 | $ cd my-project 22 | $ npm install 23 | $ npm run dev 24 | ``` 25 | 26 | The development server will run on port 8001 by default. If that port is already in use on your machine, the next free port will be used. 27 | 28 | ## What's Included 29 | 30 | - `npm run dev`: first-in-class development experience. 31 | - Webpack + `vue-loader` for single file Vue components. 32 | - State preserving hot-reload 33 | - State preserving compilation error overlay 34 | - Lint-on-save with ESLint 35 | - Source maps 36 | 37 | - `npm run build`: Production ready build. 38 | - JavaScript minified with [UglifyJS](https://github.com/mishoo/UglifyJS2). 39 | - HTML minified with [html-minifier](https://github.com/kangax/html-minifier). 40 | - CSS across all components extracted into a single file and minified with [cssnano](https://github.com/ben-eb/cssnano). 41 | - Static assets compiled with version hashes for efficient long-term caching, and an auto-generated production `index.html` with proper URLs to these generated assets. 42 | - Use `npm run build --report`to build with bundle size analytics. 43 | 44 | - `npm run unit`: Unit tests run in [JSDOM](https://github.com/tmpvar/jsdom) with [Jest](https://facebook.github.io/jest/), or in PhantomJS with Karma + Mocha + karma-webpack. 45 | - Supports ES2015+ in test files. 46 | - Easy mocking. 47 | 48 | - `npm run e2e`: End-to-end tests with [Nightwatch](http://nightwatchjs.org/). 49 | - Run tests in multiple browsers in parallel. 50 | - Works with one command out of the box: 51 | - Selenium and chromedriver dependencies automatically handled. 52 | - Automatically spawns the Selenium server. 53 | 54 | ### Fork It And Make Your Own 55 | 56 | You can fork this repo to create your own boilerplate, and use it with `vue-cli`: 57 | 58 | ``` bash 59 | vue init username/repo my-project 60 | ``` 61 | -------------------------------------------------------------------------------- /circle.yml: -------------------------------------------------------------------------------- 1 | machine: 2 | node: 3 | version: stable 4 | 5 | dependencies: 6 | pre: 7 | - sudo sh -c 'echo "deb http://dl.google.com/linux/chrome/deb/ stable main" > /etc/apt/sources.list.d/google-chrome.list' 8 | - sudo apt-get update 9 | - sudo apt-get install google-chrome-stable 10 | 11 | test: 12 | override: 13 | - bash test.sh 14 | -------------------------------------------------------------------------------- /deploy-docs.sh: -------------------------------------------------------------------------------- 1 | cd docs 2 | rm -rf _book 3 | gitbook build 4 | cd _book 5 | git init 6 | git add -A 7 | git commit -m 'update book' 8 | git push -f git@github.com:vuejs-templates/webpack.git master:gh-pages 9 | -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | # Introduction 2 | 3 | This boilerplate is targeted towards large, serious projects and assumes you are somewhat familiar with Webpack and `vue-loader`. Make sure to also read [`vue-loader`'s documentation](https://vue-loader.vuejs.org/) for common workflow recipes. 4 | 5 | If you just want to try out `vue-loader` or whip out a quick prototype, use the [webpack-simple](https://github.com/vuejs-templates/webpack-simple) template instead. 6 | 7 | ## Quickstart 8 | 9 | To use this template, scaffold a project with [vue-cli](https://github.com/vuejs/vue-cli). **It is recommended to use npm 3+ for a more efficient dependency tree.** 10 | 11 | ``` bash 12 | $ npm install -g vue-cli 13 | $ vue init webpack my-project 14 | $ cd my-project 15 | $ npm install 16 | $ npm run dev 17 | ``` 18 | -------------------------------------------------------------------------------- /docs/SUMMARY.md: -------------------------------------------------------------------------------- 1 | # Summary 2 | 3 | - [Project Structure](structure.md) 4 | - [Build Commands](commands.md) 5 | - [Linter Configuration](linter.md) 6 | - [Pre-Processors](pre-processors.md) 7 | - [Handling Static Assets](static.md) 8 | - [Environment Variables](env.md) 9 | - [Integrate with Backend Framework](backend.md) 10 | - [API Proxying During Development](proxy.md) 11 | - [Unit Testing](unit.md) 12 | - [End-to-end Testing](e2e.md) 13 | - [Prerendering for SEO](prerender.md) 14 | -------------------------------------------------------------------------------- /docs/backend.md: -------------------------------------------------------------------------------- 1 | # Integrating with Backend Framework 2 | 3 | If you are building a purely-static app (one that is deployed separately from the backend API), then you probably don't even need to edit `config/index.js`. However, if you want to integrate this template with an existing backend framework, e.g. Rails/Django/Laravel, which comes with their own project structures, you can edit `config/index.js` to directly generate front-end assets into your backend project. 4 | 5 | Let's take a look at the default `config/index.js`: 6 | 7 | ``` js 8 | // config/index.js 9 | 'use strict' 10 | const path = require('path') 11 | 12 | module.exports = { 13 | build: { 14 | index: path.resolve(__dirname, 'dist/index.html'), 15 | assetsRoot: path.resolve(__dirname, 'dist'), 16 | assetsSubDirectory: 'static', 17 | assetsPublicPath: '/', 18 | productionSourceMap: true 19 | }, 20 | dev: { 21 | port: 8001, 22 | proxyTable: {} 23 | } 24 | } 25 | ``` 26 | 27 | Inside the `build` section, we have the following options: 28 | 29 | ### `build.index` 30 | 31 | > Must be an absolute path on your local file system. 32 | 33 | This is where the `index.html` (with injected asset URLs) will be generated. 34 | 35 | If you are using this template with a backend-framework, you can edit `index.html` accordingly and point this path to a view file rendered by your backend app, e.g. `app/views/layouts/application.html.erb` for a Rails app, or `resources/views/index.blade.php` for a Laravel app. 36 | 37 | ### `build.assetsRoot` 38 | 39 | > Must be an absolute path on your local file system. 40 | 41 | This should point to the root directory that contains all the static assets for your app. For example, `public/` for both Rails/Laravel. 42 | 43 | ### `build.assetsSubDirectory` 44 | 45 | Nest webpack-generated assets under this directory in `build.assetsRoot`, so that they are not mixed with other files you may have in `build.assetsRoot`. For example, if `build.assetsRoot` is `/path/to/dist`, and `build.assetsSubDirectory` is `static`, then all Webpack assets will be generated in `path/to/dist/static`. 46 | 47 | This directory will be cleaned before each build, so it should only contain assets generated by the build. 48 | 49 | Files inside `static/` will be copied into this directory as-is during build. This means if you change this prefix, all your absolute URLs referencing files in `static/` will also need to be changed. See [Handling Static Assets](static.md) for more details. 50 | 51 | ### `build.assetsPublicPath` 52 | 53 | This should be the URL path where your `build.assetsRoot` will be served from over HTTP. In most cases, this will be root (`/`). Only change this if your backend framework serves static assets with a path prefix. Internally, this is passed to Webpack as `output.publicPath`. 54 | 55 | ### `build.productionSourceMap` 56 | 57 | Whether to generate source maps for production build. 58 | 59 | ### `dev.port` 60 | 61 | Specify the port for the dev server to listen to. 62 | 63 | ### `dev.proxyTable` 64 | 65 | Define proxy rules for the dev server. See [API Proxying During Development](proxy.md) for more details. 66 | -------------------------------------------------------------------------------- /docs/commands.md: -------------------------------------------------------------------------------- 1 | # Build Commands 2 | 3 | All build commands are executed via [NPM Scripts](https://docs.npmjs.com/misc/scripts). 4 | 5 | ### `npm run dev` 6 | 7 | > Starts a Node.js local development server. See [API Proxying During Development](proxy.md) for more details. 8 | 9 | - Webpack + `vue-loader` for single file Vue components. 10 | - State preserving hot-reload 11 | - State preserving compilation error overlay 12 | - Lint-on-save with ESLint 13 | - Source maps 14 | 15 | ### `npm run build` 16 | 17 | > Build assets for production. See [Integrating with Backend Framework](backend.md) for more details. 18 | 19 | - JavaScript minified with [UglifyJS](https://github.com/mishoo/UglifyJS2). 20 | - HTML minified with [html-minifier](https://github.com/kangax/html-minifier). 21 | - CSS across all components extracted into a single file and minified with [cssnano](https://github.com/ben-eb/cssnano). 22 | - All static assets compiled with version hashes for efficient long-term caching, and a production `index.html` is auto-generated with proper URLs to these generated assets. 23 | 24 | ### `npm run unit` 25 | 26 | > Run unit tests in JSDOM with [Jest](https://facebook.github.io/jest/docs/getting-started.html). See [Unit Testing](unit.md) for more details. 27 | 28 | - Supports ES2015+ in test files. 29 | - Easy [mocking](https://facebook.github.io/jest/docs/mock-functions.html). 30 | 31 | ### `npm run e2e` 32 | 33 | > Run end-to-end tests with [Nightwatch](http://nightwatchjs.org/). See [End-to-end Testing](e2e.md) for more details. 34 | 35 | - Run tests in multiple browsers in parallel. 36 | - Works with one command out of the box: 37 | - Selenium and chromedriver dependencies automatically handled. 38 | - Automatically spawns the Selenium server. 39 | -------------------------------------------------------------------------------- /docs/e2e.md: -------------------------------------------------------------------------------- 1 | # End-to-end Testing 2 | 3 | This boilerplate uses [Nightwatch.js](http://nightwatchjs.org) for e2e tests. Nightwatch.js is a highly integrated e2e test runner built on top of Selenium. This boilerplate comes with Selenium server and chromedriver binaries pre-configured for you, so you don't have to mess with these yourself. 4 | 5 | Let's take a look at the files in the `test/e2e` directory: 6 | 7 | - `runner.js` 8 | 9 | A Node.js script that starts the dev server, and then launches Nightwatch to run tests against it. This is the script that will run when you run `npm run e2e`. 10 | 11 | - `nightwatch.conf.js` 12 | 13 | Nightwatch configuration file. See [Nightwatch's docs on configuration](http://nightwatchjs.org/gettingstarted#settings-file) for more details. 14 | 15 | - `custom-assertions/` 16 | 17 | Custom assertions that can be used in Nightwatch tests. See [Nightwatch's docs on writing custom assertions](http://nightwatchjs.org/guide#writing-custom-assertions) for more details. 18 | 19 | - `specs/` 20 | 21 | Your actual tests! See [Nightwatch's docs on writing tests](http://nightwatchjs.org/guide#writing-tests) and [API reference](http://nightwatchjs.org/api) for more details. 22 | 23 | ### Running Tests in More Browsers 24 | 25 | To configure which browsers to run the tests in, add an entry under "test_settings" in [`test/e2e/nightwatch.conf.js`](https://github.com/vuejs-templates/webpack/blob/master/template/test/e2e/nightwatch.conf.js#L17-L39) , and also the `--env` flag in [`test/e2e/runner.js`](https://github.com/vuejs-templates/webpack/blob/master/template/test/e2e/runner.js#L15). If you wish to configure remote testing on services like SauceLabs, you can either make the Nightwatch config conditional based on environment variables, or use a separate config file altogether. Consult [Nightwatch's docs on Selenium](http://nightwatchjs.org/guide#selenium-settings) for more details. 26 | -------------------------------------------------------------------------------- /docs/env.md: -------------------------------------------------------------------------------- 1 | # Environment Variables 2 | 3 | Sometimes it is practical to have different config values according to the environment that the application is running in. 4 | 5 | As an example: 6 | 7 | ```js 8 | // config/prod.env.js 9 | module.exports = { 10 | NODE_ENV: '"production"', 11 | DEBUG_MODE: false, 12 | API_KEY: '"..."' // this is shared between all environments 13 | } 14 | 15 | // config/dev.env.js 16 | module.exports = merge(prodEnv, { 17 | NODE_ENV: '"development"', 18 | DEBUG_MODE: true // this overrides the DEBUG_MODE value of prod.env 19 | }) 20 | 21 | // config/test.env.js 22 | module.exports = merge(devEnv, { 23 | NODE_ENV: '"testing"' 24 | }) 25 | ``` 26 | 27 | > **Note:** string variables need to be wrapped into single and double quotes `'"..."'` 28 | 29 | So, the environment variables are: 30 | - Production 31 | - NODE_ENV = 'production', 32 | - DEBUG_MODE = false, 33 | - API_KEY = '...' 34 | - Development 35 | - NODE_ENV = 'development', 36 | - DEBUG_MODE = true, 37 | - API_KEY = '...' 38 | - Testing 39 | - NODE_ENV = 'testing', 40 | - DEBUG_MODE = true, 41 | - API_KEY = '...' 42 | 43 | As we can see, `test.env` inherits the `dev.env` and the `dev.env` inherits the `prod.env`. 44 | 45 | ### Usage 46 | 47 | It is simple to use the environment variables in your code. For example: 48 | 49 | ```js 50 | Vue.config.productionTip = process.env.NODE_ENV === 'production' 51 | ``` 52 | -------------------------------------------------------------------------------- /docs/linter.md: -------------------------------------------------------------------------------- 1 | # Linter Configuration 2 | 3 | This boilerplate uses [ESLint](https://eslint.org/) as the linter, and uses the [Standard](https://github.com/feross/standard/blob/master/RULES.md) preset with some small customizations. 4 | 5 | If you are not happy with the default linting rules, you have several options: 6 | 7 | 1. Overwrite individual rules in `.eslintrc.js`. For example, you can add the following rule to enforce semicolons instead of omitting them: 8 | 9 | ``` js 10 | // .eslintrc.js 11 | "semi": [2, "always"] 12 | ``` 13 | 14 | 2. Pick a different ESLint preset when generating the project, for example [eslint-config-airbnb](https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb). 15 | 16 | 3. Pick "none" for ESLint preset when generating the project and define your own rules. See [ESLint documentation](https://eslint.org/docs/rules/) for more details. 17 | -------------------------------------------------------------------------------- /docs/pre-processors.md: -------------------------------------------------------------------------------- 1 | # Pre-Processors 2 | 3 | This boilerplate has pre-configured CSS extraction for most popular CSS pre-processors including LESS, SASS, Stylus, and PostCSS. To use a pre-processor, all you need to do is install the appropriate webpack loader for it. For example, to use SASS: 4 | 5 | ``` bash 6 | npm install sass-loader node-sass --save-dev 7 | ``` 8 | 9 | Note you also need to install `node-sass` because `sass-loader` depends on it as a peer dependency. 10 | 11 | ### Using Pre-Processors inside Components 12 | 13 | Once installed, you can use the pre-processors inside your `*.vue` components using the `lang` attribute on ` 19 | ``` 20 | 21 | ### A note on SASS syntax 22 | 23 | - `lang="scss"` corresponds to the CSS-superset syntax (with curly braces and semicolons). 24 | - `lang="sass"` corresponds to the indentation-based syntax. 25 | 26 | ### PostCSS 27 | 28 | Styles in `*.vue` files are piped through PostCSS by default, so you don't need to use a specific loader for it. You can simply add PostCSS plugins you want to use in `build/webpack.base.conf.js` under the `vue` block: 29 | 30 | ``` js 31 | // build/webpack.base.conf.js 32 | module.exports = { 33 | // ... 34 | vue: { 35 | postcss: [/* your plugins */] 36 | } 37 | } 38 | ``` 39 | 40 | See [vue-loader's related documentation](http://vuejs.github.io/vue-loader/en/features/postcss.html) for more details. 41 | 42 | ### Standalone CSS Files 43 | 44 | To ensure consistent extraction and processing, it is recommended to import global, standalone style files from your root `App.vue` component, for example: 45 | 46 | ``` html 47 | 48 | 49 | ``` 50 | 51 | Note you should probably only do this for the styles written by yourself for your application. For existing libraries e.g. Bootstrap or Semantic UI, you can place them inside `/static` and reference them directly in `index.html`. This avoids extra build time and also is better for browser caching. (See [Static Asset Handling](static.md)) 52 | -------------------------------------------------------------------------------- /docs/prerender.md: -------------------------------------------------------------------------------- 1 | # Prerendering for SEO 2 | 3 | If you want to prerender routes that will not significantly change once pushed to production, use this Webpack plugin: [prerender-spa-plugin](https://www.npmjs.com/package/prerender-spa-plugin), which has been tested for use with Vue. For pages that _do_ frequently change, [Prerender.io](https://prerender.io/) and [Netlify](https://www.netlify.com/pricing) both offer plans for regularly re-prerendering your content for search engines. 4 | 5 | ## Using `prerender-spa-plugin` 6 | 7 | 1. Install it as a dev dependency: 8 | 9 | ```bash 10 | npm install --save-dev prerender-spa-plugin 11 | ``` 12 | 13 | 2. Require it in **build/webpack.prod.conf.js**: 14 | 15 | ```js 16 | // This line should go at the top of the file where other 'imports' live in 17 | const PrerenderSpaPlugin = require('prerender-spa-plugin') 18 | ``` 19 | 20 | 3. Configure it in the `plugins` array (also in **build/webpack.prod.conf.js**): 21 | 22 | ```js 23 | new PrerenderSpaPlugin( 24 | // Path to compiled app 25 | path.join(__dirname, '../dist'), 26 | // List of endpoints you wish to prerender 27 | [ '/' ] 28 | ) 29 | ``` 30 | 31 | If you also wanted to prerender `/about` and `/contact`, then that array would be `[ '/', '/about', '/contact' ]`. 32 | 33 | 4. Enable history mode for `vue-router`: 34 | ```js 35 | const router = new VueRouter({ 36 | mode: 'history', 37 | routes: [...] 38 | }) 39 | ``` 40 | -------------------------------------------------------------------------------- /docs/proxy.md: -------------------------------------------------------------------------------- 1 | # API Proxying During Development 2 | 3 | When integrating this boilerplate with an existing backend, a common need is to access the backend API when using the dev server. To achieve that, we can run the dev server and the API backend side-by-side (or remotely), and let the dev server proxy all API requests to the actual backend. 4 | 5 | To configure the proxy rules, edit `dev.proxyTable` option in `config/index.js`. The dev server is using [http-proxy-middleware](https://github.com/chimurai/http-proxy-middleware) for proxying, so you should refer to its docs for detailed usage. But here's a simple example: 6 | 7 | ``` js 8 | // config/index.js 9 | module.exports = { 10 | // ... 11 | dev: { 12 | proxyTable: { 13 | // proxy all requests starting with /api to jsonplaceholder 14 | '/api': { 15 | target: 'http://jsonplaceholder.typicode.com', 16 | changeOrigin: true, 17 | pathRewrite: { 18 | '^/api': '' 19 | } 20 | } 21 | } 22 | } 23 | } 24 | ``` 25 | 26 | The above example will proxy the request `/api/posts/1` to `http://jsonplaceholder.typicode.com/posts/1`. 27 | 28 | ## URL Matching 29 | 30 | In addition to static urls you can also use glob patterns to match URLs, e.g. `/api/**`. See [Context Matching](https://github.com/chimurai/http-proxy-middleware#context-matching) for more details. In addition, you can provide a `filter` option that can be a custom function to determine whether a request should be proxied: 31 | 32 | ``` js 33 | proxyTable: { 34 | '**': { 35 | target: 'http://jsonplaceholder.typicode.com', 36 | filter: function (pathname, req) { 37 | return pathname.match('^/api') && req.method === 'GET' 38 | } 39 | } 40 | } 41 | ``` 42 | -------------------------------------------------------------------------------- /docs/static.md: -------------------------------------------------------------------------------- 1 | # Handling Static Assets 2 | 3 | You will notice in the project structure we have two directories for static assets: `src/assets` and `static/`. What is the difference between them? 4 | 5 | ### Webpacked Assets 6 | 7 | To answer this question, we first need to understand how Webpack deals with static assets. In `*.vue` components, all your templates and CSS are parsed by `vue-html-loader` and `css-loader` to look for asset URLs. For example, in `` and `background: url(./logo.png)`, `"./logo.png"` is a relative asset path and will be **resolved by Webpack as a module dependency**. 8 | 9 | Because `logo.png` is not JavaScript, when treated as a module dependency, we need to use `url-loader` and `file-loader` to process it. This template has already configured these loaders for you, so you get features such as filename fingerprinting and conditional base64 inlining for free, while being able to use relative/module paths without worrying about deployment. 10 | 11 | Since these assets may be inlined/copied/renamed during build, they are essentially part of your source code. This is why it is recommended to place Webpack-processed static assets inside `/src`, alongside other source files. In fact, you don't even have to put them all in `/src/assets`: you can organize them based on the module/component using them. For example, you can put each component in its own directory, with its static assets right next to it. 12 | 13 | ### Asset Resolving Rules 14 | 15 | - **Relative URLs**, e.g. `./assets/logo.png` will be interpreted as a module dependency. They will be replaced with an auto-generated URL based on your Webpack output configuration. 16 | 17 | - **Non-prefixed URLs**, e.g. `assets/logo.png` will be treated the same as the relative URLs and translated into `./assets/logo.png`. 18 | 19 | - **URLs prefixed with `~`** are treated as a module request, similar to `require('some-module/image.png')`. You need to use this prefix if you want to leverage Webpack's module resolving configurations. For example if you have a resolve alias for `assets`, you need to use `` to ensure that alias is respected. 20 | 21 | - **Root-relative URLs**, e.g. `/assets/logo.png` are not processed at all. 22 | 23 | ### Getting Asset Paths in JavaScript 24 | 25 | In order for Webpack to return the correct asset paths, you need to use `require('./relative/path/to/file.jpg')`, which will get processed by `file-loader` and returns the resolved URL. For example: 26 | 27 | ``` js 28 | computed: { 29 | background () { 30 | return require('./bgs/' + this.id + '.jpg') 31 | } 32 | } 33 | ``` 34 | 35 | **Note the above example will include every image under `./bgs/` in the final build.** This is because Webpack cannot guess which of them will be used at runtime, so it includes them all. 36 | 37 | ### "Real" Static Assets 38 | 39 | In comparison, files in `static/` are not processed by Webpack at all: they are directly copied to their final destination as-is, with the same filename. You must reference these files using absolute paths, which is determined by joining `build.assetsPublicPath` and `build.assetsSubDirectory` in `config.js`. 40 | 41 | As an example, with the following default values: 42 | 43 | ``` js 44 | // config/index.js 45 | module.exports = { 46 | // ... 47 | build: { 48 | assetsPublicPath: '/', 49 | assetsSubDirectory: 'static' 50 | } 51 | } 52 | ``` 53 | 54 | Any file placed in `static/` should be referenced using the absolute URL `/static/[filename]`. If you change `assetSubDirectory` to `assets`, then these URLs will need to be changed to `/assets/[filename]`. 55 | 56 | We will learn more about the config file in the section about [backend integration](backend.md). 57 | -------------------------------------------------------------------------------- /docs/structure.md: -------------------------------------------------------------------------------- 1 | # Project Structure 2 | 3 | ``` bash 4 | . 5 | ├── build/ # webpack config files 6 | │ └── ... 7 | ├── config/ 8 | │   ├── index.js # main project config 9 | │ └── ... 10 | ├── src/ 11 | │   ├── main.js # app entry file 12 | │   ├── App.vue # main app component 13 | │   ├── components/ # ui components 14 | │   │   └── ... 15 | │   └── assets/ # module assets (processed by webpack) 16 | │      └── ... 17 | ├── static/ # pure static assets (directly copied) 18 | ├── test/ 19 | │ └── unit/ # unit tests 20 | │ │ ├── specs/ # test spec files 21 | │ │ ├── setup.js # file that runs before Jest tests 22 | │ │ ├── index.js # test build entry file 23 | │ │ └── karma.conf.js # test runner config file 24 | │ └── e2e/ # e2e tests 25 | │ │   ├── specs/ # test spec files 26 | │ │   ├── custom-assertions/ # custom assertions for e2e tests 27 | │ │   ├── runner.js # test runner script 28 | │ │   └── nightwatch.conf.js # test runner config file 29 | ├── .babelrc # babel config 30 | ├── .postcssrc.js # postcss config 31 | ├── .eslintrc.js # eslint config 32 | ├── .editorconfig # editor config 33 | ├── index.html # index.html template 34 | └── package.json # build scripts and dependencies 35 | ``` 36 | 37 | ### `build/` 38 | 39 | This directory holds the actual configurations for both the development server and the production webpack build. Normally you don't need to touch these files unless you want to customize Webpack loaders, in which case you should probably look at `build/webpack.base.conf.js`. 40 | 41 | ### `config/index.js` 42 | 43 | This is the main configuration file that exposes some of the most common configuration options for the build setup. See [API Proxying During Development](proxy.md) and [Integrating with Backend Framework](backend.md) for more details. 44 | 45 | ### `src/` 46 | 47 | This is where most of your application code will live in. How to structure everything inside this directory is largely up to you; if you are using Vuex, you can consult the [recommendations for Vuex applications](http://vuex.vuejs.org/en/structure.html). 48 | 49 | ### `static/` 50 | 51 | This directory is an escape hatch for static assets that you do not want to process with Webpack. They will be directly copied into the same directory where webpack-built assets are generated. 52 | 53 | See [Handling Static Assets](static.md) for more details. 54 | 55 | ### `test/unit` 56 | 57 | Contains unit test related files. See [Unit Testing](unit.md) for more details. 58 | 59 | ### `test/e2e` 60 | 61 | Contains e2e test related files. See [End-to-end Testing](e2e.md) for more details. 62 | 63 | ### `index.html` 64 | 65 | This is the **template** `index.html` for our single page application. During development and builds, Webpack will generate assets, and the URLs for those generated assets will be automatically injected into this template to render the final HTML. 66 | 67 | ### `package.json` 68 | 69 | The NPM package meta file that contains all the build dependencies and [build commands](commands.md). 70 | -------------------------------------------------------------------------------- /docs/unit.md: -------------------------------------------------------------------------------- 1 | # Unit Testing 2 | 3 | This project offers two options for unit testing: 4 | 5 | 1. Jest 6 | 2. Karma and Mocha. 7 | 8 | 9 | ## Jest 10 | 11 | - [Jest](https://facebook.github.io/jest/): the test runner that launches JSDOM runs the tests and reports the results to us. 12 | 13 | ### Files 14 | 15 | - `setup.js` 16 | 17 | Jest runs this file before it runs the unit tests. It sets the Vue production tip to false. 18 | 19 | ### Mocking Dependencies 20 | 21 | The Jest boilerplate comes with the ability to mock dependencies. See the [mock functions guide](https://facebook.github.io/jest/docs/mock-functions.html) for more details. 22 | 23 | ## Karma and Mocha 24 | 25 | - [Karma](https://karma-runner.github.io/): the test runner that launches browsers, runs the tests and reports the results to us. 26 | - [karma-webpack](https://github.com/webpack/karma-webpack): the plugin for Karma that bundles our tests using Webpack. 27 | - [Mocha](https://mochajs.org/): the test framework that we write test specs with. 28 | - [Chai](http://chaijs.com/): test assertion library that provides better assertion syntax. 29 | - [Sinon](http://sinonjs.org/): test utility library that provides spies, stubs and mocks. 30 | 31 | Chai and Sinon are integrated using [karma-sinon-chai](https://github.com/kmees/karma-sinon-chai), so all Chai interfaces (`should`, `expect`, `assert`) and `sinon` are globally available in test files. 32 | 33 | ### Files 34 | 35 | - `index.js` 36 | 37 | This is the entry file used by `karma-webpack` to bundle all the test code and source code (for coverage purposes). You can ignore it for the most part. 38 | 39 | - `specs/` 40 | 41 | This directory is where you write your actual tests. You can use full ES2015+ and all supported Webpack loaders in your tests. 42 | 43 | - `karma.conf.js` 44 | 45 | This is the Karma configuration file. See [Karma docs](https://karma-runner.github.io/) for more details. 46 | 47 | ### Running Tests in More Browsers 48 | 49 | You can run the tests in multiple real browsers by installing more [karma launchers](https://karma-runner.github.io/1.0/config/browsers.html) and adjusting the `browsers` field in `test/unit/karma.conf.js`. 50 | 51 | ### Mocking Dependencies 52 | 53 | The Karma unit test boilerplate comes with [inject-loader](https://github.com/plasticine/inject-loader) installed by default. For usage with `*.vue` components, see [vue-loader docs on testing with mocks](http://vue-loader.vuejs.org/en/workflow/testing-with-mocks.html). 54 | -------------------------------------------------------------------------------- /meta.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "helpers": { 3 | "if_or": function (v1, v2, options) { 4 | if (v1 || v2) { 5 | return options.fn(this); 6 | } 7 | 8 | return options.inverse(this); 9 | } 10 | }, 11 | "prompts": { 12 | "name": { 13 | "type": "string", 14 | "required": true, 15 | "message": "Project name" 16 | }, 17 | "description": { 18 | "type": "string", 19 | "required": false, 20 | "message": "Project description", 21 | "default": "A Vue.js project" 22 | }, 23 | "author": { 24 | "type": "string", 25 | "message": "Author" 26 | }, 27 | "build": { 28 | "type": "list", 29 | "message": "Vue build", 30 | "choices": [ 31 | { 32 | "name": "Runtime + Compiler: recommended for most users", 33 | "value": "standalone", 34 | "short": "standalone" 35 | }, 36 | { 37 | "name": "Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere", 38 | "value": "runtime", 39 | "short": "runtime" 40 | } 41 | ] 42 | }, 43 | "router": { 44 | "type": "confirm", 45 | "message": "Install vue-router?" 46 | }, 47 | "sass": { 48 | "type": "confirm", 49 | "message": "Handle sass syntax?" 50 | }, 51 | "lint": { 52 | "type": "confirm", 53 | "message": "Use ESLint to lint your code?" 54 | }, 55 | "lintConfig": { 56 | "when": "lint", 57 | "type": "list", 58 | "message": "Pick an ESLint preset", 59 | "choices": [ 60 | { 61 | "name": "Standard (https://github.com/standard/standard)", 62 | "value": "standard", 63 | "short": "Standard" 64 | }, 65 | { 66 | "name": "Airbnb (https://github.com/airbnb/javascript)", 67 | "value": "airbnb", 68 | "short": "Airbnb" 69 | }, 70 | { 71 | "name": "none (configure it yourself)", 72 | "value": "none", 73 | "short": "none" 74 | } 75 | ] 76 | }, 77 | "unit": { 78 | "type": "confirm", 79 | "message": "Setup unit tests" 80 | }, 81 | "runner": { 82 | "when": "unit", 83 | "type": "list", 84 | "message": "Pick a test runner", 85 | "choices": [ 86 | { 87 | "name": "Jest", 88 | "value": "jest", 89 | "short": "jest" 90 | }, 91 | { 92 | "name": "Karma and Mocha", 93 | "value": "karma", 94 | "short": "karma" 95 | }, 96 | { 97 | "name": "none (configure it yourself)", 98 | "value": "noTest", 99 | "short": "noTest" 100 | } 101 | ] 102 | }, 103 | "e2e": { 104 | "type": "confirm", 105 | "message": "Setup e2e tests with Nightwatch?" 106 | } 107 | }, 108 | "filters": { 109 | ".eslintrc.js": "lint", 110 | ".eslintignore": "lint", 111 | "config/test.env.js": "unit || e2e", 112 | "test/unit/**/*": "unit", 113 | "test/unit/index.js": "unit && runner === 'karma'", 114 | "test/unit/karma.conf.js": "unit && runner === 'karma'", 115 | "test/unit/specs/index.js": "unit && runner === 'karma'", 116 | "test/unit/setup.js": "unit && runner === 'jest'", 117 | "test/e2e/**/*": "e2e", 118 | "src/router/**/*": "router" 119 | }, 120 | "completeMessage": "To get started:\n\n {{^inPlace}}cd {{destDirName}}\n {{/inPlace}}npm install\n npm run dev\n\nDocumentation can be found at https://vuejs-templates.github.io/webpack" 121 | }; 122 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-cli-template-webpack-vue-django", 3 | "version": "1.2.3", 4 | "license": "MIT", 5 | "description": "A webpack template derived, with vue and django setup, no ceremony", 6 | "scripts": { 7 | "docs": "cd docs && gitbook serve", 8 | "docs:deploy": "bash ./deploy-docs.sh" 9 | }, 10 | "devDependencies": { 11 | "vue-cli": "^2.8.1" 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /template/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "modules": false 5 | }], 6 | "stage-2" 7 | ], 8 | "plugins": ["transform-runtime"], 9 | "env": { 10 | "test": { 11 | "presets": ["env", "stage-2"]{{#if_eq runner "karma"}}, 12 | "plugins": ["istanbul"] 13 | {{/if_eq}} 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /template/.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /template/.eslintignore: -------------------------------------------------------------------------------- 1 | /build/ 2 | /config/ 3 | /dist/ 4 | /*.js 5 | {{#unit}} 6 | /test/unit/coverage/ 7 | {{/unit}} 8 | -------------------------------------------------------------------------------- /template/.eslintrc.js: -------------------------------------------------------------------------------- 1 | // https://eslint.org/docs/user-guide/configuring 2 | 3 | module.exports = { 4 | root: true, 5 | parser: 'babel-eslint', 6 | parserOptions: { 7 | sourceType: 'module' 8 | }, 9 | env: { 10 | browser: true, 11 | }, 12 | {{#if_eq lintConfig "standard"}} 13 | // https://github.com/standard/standard/blob/master/docs/RULES-en.md 14 | extends: 'standard', 15 | {{/if_eq}} 16 | {{#if_eq lintConfig "airbnb"}} 17 | extends: 'airbnb-base', 18 | {{/if_eq}} 19 | // required to lint *.vue files 20 | plugins: [ 21 | 'html' 22 | ], 23 | {{#if_eq lintConfig "airbnb"}} 24 | // check if imports actually resolve 25 | 'settings': { 26 | 'import/resolver': { 27 | 'webpack': { 28 | 'config': 'build/webpack.base.conf.js' 29 | } 30 | } 31 | }, 32 | {{/if_eq}} 33 | // add your custom rules here 34 | 'rules': { 35 | {{#if_eq lintConfig "standard"}} 36 | // allow paren-less arrow functions 37 | 'arrow-parens': 0, 38 | // allow async-await 39 | 'generator-star-spacing': 0, 40 | {{/if_eq}} 41 | {{#if_eq lintConfig "airbnb"}} 42 | // don't require .vue extension when importing 43 | 'import/extensions': ['error', 'always', { 44 | 'js': 'never', 45 | 'vue': 'never' 46 | }], 47 | // allow optionalDependencies 48 | 'import/no-extraneous-dependencies': ['error', { 49 | 'optionalDependencies': ['test/unit/index.js'] 50 | }], 51 | {{/if_eq}} 52 | // allow debugger during development 53 | 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /template/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | /dist/ 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | {{#unit}} 8 | /test/unit/coverage/ 9 | {{/unit}} 10 | {{#e2e}} 11 | /test/e2e/reports/ 12 | selenium-debug.log 13 | {{/e2e}} 14 | 15 | # Editor directories and files 16 | .idea 17 | .vscode 18 | *.suo 19 | *.ntvs* 20 | *.njsproj 21 | *.sln 22 | -------------------------------------------------------------------------------- /template/.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | // to edit target browsers: use "browserslist" field in package.json 6 | "postcss-import": {}, 7 | "autoprefixer": {} 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /template/Makefile: -------------------------------------------------------------------------------- 1 | # Use development settings for running django dev server. 2 | export DJANGO_SETTINGS_MODULE=backend.settingsdev 3 | 4 | # Initializes virtual environment with basic requirements. 5 | prod: 6 | pip install -r requirements.txt 7 | npm install --production 8 | 9 | # Installs development requirements. 10 | dev: 11 | pip install -r requirements.txt 12 | pip install -r requirements-dev.txt 13 | npm install 14 | 15 | # Runs development server. 16 | # This step depends on `make dev`, however dependency is excluded to speed up dev server startup. 17 | run: 18 | npm run dev & python ./manage.py runserver 19 | 20 | # Creates migrations and migrates database. 21 | # This step depends on `make dev`, however dependency is excluded to speed up dev server startup. 22 | migrate: 23 | python ./manage.py makemigrations 24 | python ./manage.py migrate 25 | 26 | # Builds files for distribution which will be placed in /static/dist 27 | build: prod migrate 28 | npm run build 29 | 30 | # Cleans up folder by removing virtual environment, node modules and generated files. 31 | clean: 32 | rm -rf node_modules 33 | rm -rf static/dist 34 | 35 | # Run linter 36 | lint: 37 | @npm run lint --silent 38 | 39 | # Run test 40 | test: dev 41 | python ./manage.py test 42 | npm run test 43 | 44 | -------------------------------------------------------------------------------- /template/README.md: -------------------------------------------------------------------------------- 1 | # {{ name }} 2 | 3 | > {{ description }} 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8001 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | 17 | # build for production and view the bundle analyzer report 18 | npm run build --report 19 | {{#unit}} 20 | 21 | # run unit tests 22 | npm run unit 23 | {{/unit}} 24 | {{#e2e}} 25 | 26 | # run e2e tests 27 | npm run e2e 28 | {{/e2e}} 29 | {{#if_or unit e2e}} 30 | 31 | # run all tests 32 | npm test 33 | {{/if_or}} 34 | ``` 35 | 36 | 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). 37 | -------------------------------------------------------------------------------- /template/backend/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CharlesAracil/webpack-vue-django/0787422019f980482b3ea62288c63c3abf3043f0/template/backend/__init__.py -------------------------------------------------------------------------------- /template/backend/settings.py: -------------------------------------------------------------------------------- 1 | """ 2 | Django settings for backend project. 3 | 4 | Generated by 'django-admin startproject' using Django 1.11.4. 5 | 6 | For more information on this file, see 7 | https://docs.djangoproject.com/en/1.11/topics/settings/ 8 | 9 | For the full list of settings and their values, see 10 | https://docs.djangoproject.com/en/1.11/ref/settings/ 11 | """ 12 | 13 | import os 14 | 15 | # Build paths inside the project like this: os.path.join(BASE_DIR, ...) 16 | BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__))) 17 | 18 | # Quick-start development settings - unsuitable for production 19 | # See https://docs.djangoproject.com/en/1.10/howto/deployment/checklist/ 20 | 21 | # SECURITY WARNING: keep the secret key used in production secret! 22 | SECRET_KEY = os.environ.get('DJANGO_SECRET_KEY', 'VERY_SECRET_KEY_THAT_YOU_SHOULD_CHANGE') 23 | 24 | # SECURITY WARNING: don't run with debug turned on in production! 25 | DEBUG = False 26 | 27 | ALLOWED_HOSTS = [] 28 | 29 | # Application definition 30 | 31 | INSTALLED_APPS = [ 32 | 'django.contrib.admin', 33 | 'django.contrib.auth', 34 | 'django.contrib.contenttypes', 35 | 'django.contrib.sessions', 36 | 'django.contrib.messages', 37 | 'django.contrib.staticfiles', 38 | 'webpack_loader', 39 | 'backend', 40 | ] 41 | 42 | MIDDLEWARE = [ 43 | 'django.middleware.security.SecurityMiddleware', 44 | 'django.contrib.sessions.middleware.SessionMiddleware', 45 | 'django.middleware.common.CommonMiddleware', 46 | 'django.middleware.csrf.CsrfViewMiddleware', 47 | 'django.contrib.auth.middleware.AuthenticationMiddleware', 48 | 'django.contrib.messages.middleware.MessageMiddleware', 49 | 'django.middleware.clickjacking.XFrameOptionsMiddleware', 50 | ] 51 | 52 | ROOT_URLCONF = 'backend.urls' 53 | 54 | TEMPLATES = [ 55 | { 56 | 'BACKEND': 'django.template.backends.django.DjangoTemplates', 57 | 'DIRS': [], 58 | 'APP_DIRS': True, 59 | 'OPTIONS': { 60 | 'context_processors': [ 61 | 'django.template.context_processors.debug', 62 | 'django.template.context_processors.request', 63 | 'django.contrib.auth.context_processors.auth', 64 | 'django.contrib.messages.context_processors.messages', 65 | ], 66 | }, 67 | }, 68 | ] 69 | 70 | WSGI_APPLICATION = 'backend.wsgi.application' 71 | 72 | # Database 73 | # https://docs.djangoproject.com/en/1.10/ref/settings/#databases 74 | 75 | DATABASES = { 76 | 'default': { 77 | 'ENGINE': 'django.db.backends.sqlite3', 78 | 'NAME': os.path.join(BASE_DIR, 'db.sqlite3'), 79 | } 80 | } 81 | 82 | # Password validation 83 | # https://docs.djangoproject.com/en/1.10/ref/settings/#auth-password-validators 84 | 85 | AUTH_PASSWORD_VALIDATORS = [ 86 | { 87 | 'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator', 88 | }, 89 | { 90 | 'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator', 91 | }, 92 | { 93 | 'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator', 94 | }, 95 | { 96 | 'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator', 97 | }, 98 | ] 99 | 100 | # Internationalization 101 | # https://docs.djangoproject.com/en/1.10/topics/i18n/ 102 | 103 | LANGUAGE_CODE = 'en-us' 104 | TIME_ZONE = 'UTC' 105 | USE_I18N = True 106 | USE_L10N = True 107 | USE_TZ = True 108 | 109 | # Static files (CSS, JavaScript, Images) 110 | # https://docs.djangoproject.com/en/1.10/howto/static-files/ 111 | 112 | STATIC_URL = '/static/' 113 | STATICFILES_DIRS = [ 114 | os.path.join(BASE_DIR, 'static'), 115 | ] 116 | STATIC_ROOT = os.path.join(BASE_DIR, 'public') 117 | 118 | WEBPACK_LOADER = { 119 | 'DEFAULT': { 120 | 'BUNDLE_DIR_NAME': '', 121 | 'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json'), 122 | }, 123 | 'DEFAULT': { 124 | 'CACHE': not DEBUG 125 | } 126 | } 127 | -------------------------------------------------------------------------------- /template/backend/settingsdev.py: -------------------------------------------------------------------------------- 1 | from .settings import * 2 | 3 | DEBUG = True 4 | INTERNAL_IPS = ['127.0.0.1'] 5 | ALLOWED_HOSTS += INTERNAL_IPS 6 | ALLOWED_HOSTS.append('localhost') 7 | INSTALLED_APPS.append('debug_toolbar') 8 | MIDDLEWARE.append('debug_toolbar.middleware.DebugToolbarMiddleware') 9 | -------------------------------------------------------------------------------- /template/backend/templates/index.html: -------------------------------------------------------------------------------- 1 | 2 | {% load render_bundle from webpack_loader %} 3 | 4 | 5 | 6 | webpack-vue-django 7 | 8 | 9 |
10 | {% if not debug %} 11 | {% render_bundle 'manifest' 'js' %} 12 | {% render_bundle 'vendor' 'js' %} 13 | {% endif %} 14 | {% render_bundle 'app' %} 15 | 16 | 17 | -------------------------------------------------------------------------------- /template/backend/urls.py: -------------------------------------------------------------------------------- 1 | """backend URL Configuration 2 | 3 | The `urlpatterns` list routes URLs to views. For more information please see: 4 | https://docs.djangoproject.com/en/1.10/topics/http/urls/ 5 | Examples: 6 | Function views 7 | 1. Add an import: from my_app import views 8 | 2. Add a URL to urlpatterns: url(r'^$', views.home, name='home') 9 | Class-based views 10 | 1. Add an import: from other_app.views import Home 11 | 2. Add a URL to urlpatterns: url(r'^$', Home.as_view(), name='home') 12 | Including another URLconf 13 | 1. Import the include() function: from django.conf.urls import url, include 14 | 2. Add a URL to urlpatterns: url(r'^blog/', include('blog.urls')) 15 | """ 16 | from django.conf import settings 17 | from django.conf.urls import url, include 18 | from django.contrib import admin 19 | 20 | import backend.views 21 | 22 | urlpatterns = [ 23 | url(r'^admin/', admin.site.urls), 24 | url(r'^$', backend.views.index) 25 | ] 26 | 27 | if settings.DEBUG: 28 | import debug_toolbar 29 | urlpatterns.append(url(r'^__debug__/', include(debug_toolbar.urls))) 30 | -------------------------------------------------------------------------------- /template/backend/views.py: -------------------------------------------------------------------------------- 1 | from django.shortcuts import render 2 | 3 | 4 | def index(request): 5 | return render(request, 'index.html') 6 | -------------------------------------------------------------------------------- /template/backend/wsgi.py: -------------------------------------------------------------------------------- 1 | """ 2 | WSGI config for backend project. 3 | 4 | It exposes the WSGI callable as a module-level variable named ``application``. 5 | 6 | For more information on this file, see 7 | https://docs.djangoproject.com/en/1.10/howto/deployment/wsgi/ 8 | """ 9 | 10 | import os 11 | 12 | from django.core.wsgi import get_wsgi_application 13 | 14 | os.environ.setdefault("DJANGO_SETTINGS_MODULE", "backend.settings") 15 | 16 | application = get_wsgi_application() 17 | -------------------------------------------------------------------------------- /template/frontend/build/build.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | require('./check-versions')() 3 | 4 | process.env.NODE_ENV = 'production' 5 | 6 | const ora = require('ora') 7 | const rm = require('rimraf') 8 | const path = require('path') 9 | const chalk = require('chalk') 10 | const webpack = require('webpack') 11 | const config = require('../config') 12 | const webpackConfig = require('./webpack.prod.conf') 13 | 14 | const spinner = ora('building for production...') 15 | spinner.start() 16 | 17 | rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => { 18 | if (err) throw err 19 | webpack(webpackConfig, function (err, stats) { 20 | spinner.stop() 21 | if (err) throw err 22 | process.stdout.write(stats.toString({ 23 | colors: true, 24 | modules: false, 25 | children: false, 26 | chunks: false, 27 | chunkModules: false 28 | }) + '\n\n') 29 | 30 | if (stats.hasErrors()) { 31 | console.log(chalk.red(' Build failed with errors.\n')) 32 | process.exit(1) 33 | } 34 | 35 | console.log(chalk.cyan(' Build complete.\n')) 36 | console.log(chalk.yellow( 37 | ' Tip: built files are meant to be served over an HTTP server.\n' + 38 | ' Opening index.html over file:// won\'t work.\n' 39 | )) 40 | }) 41 | }) 42 | -------------------------------------------------------------------------------- /template/frontend/build/check-versions.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const chalk = require('chalk') 3 | const semver = require('semver') 4 | const packageConfig = require('../../package.json') 5 | const shell = require('shelljs') 6 | function exec (cmd) { 7 | return require('child_process').execSync(cmd).toString().trim() 8 | } 9 | 10 | const versionRequirements = [ 11 | { 12 | name: 'node', 13 | currentVersion: semver.clean(process.version), 14 | versionRequirement: packageConfig.engines.node 15 | } 16 | ] 17 | 18 | if (shell.which('npm')) { 19 | versionRequirements.push({ 20 | name: 'npm', 21 | currentVersion: exec('npm --version'), 22 | versionRequirement: packageConfig.engines.npm 23 | }) 24 | } 25 | 26 | module.exports = function () { 27 | const warnings = [] 28 | for (let i = 0; i < versionRequirements.length; i++) { 29 | const mod = versionRequirements[i] 30 | if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) { 31 | warnings.push(mod.name + ': ' + 32 | chalk.red(mod.currentVersion) + ' should be ' + 33 | chalk.green(mod.versionRequirement) 34 | ) 35 | } 36 | } 37 | 38 | if (warnings.length) { 39 | console.log('') 40 | console.log(chalk.yellow('To use this template, you must update following to modules:')) 41 | console.log() 42 | for (let i = 0; i < warnings.length; i++) { 43 | const warning = warnings[i] 44 | console.log(' ' + warning) 45 | } 46 | console.log() 47 | process.exit(1) 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /template/frontend/build/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CharlesAracil/webpack-vue-django/0787422019f980482b3ea62288c63c3abf3043f0/template/frontend/build/logo.png -------------------------------------------------------------------------------- /template/frontend/build/utils.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const path = require('path') 3 | const config = require('../config') 4 | const ExtractTextPlugin = require('extract-text-webpack-plugin') 5 | const pkg = require('../../package.json') 6 | 7 | exports.assetsPath = function (_path) { 8 | const assetsSubDirectory = process.env.NODE_ENV === 'production' 9 | ? config.build.assetsSubDirectory 10 | : config.dev.assetsSubDirectory 11 | return path.posix.join(assetsSubDirectory, _path) 12 | } 13 | 14 | exports.cssLoaders = function (options) { 15 | options = options || {} 16 | 17 | const cssLoader = { 18 | loader: 'css-loader', 19 | options: { 20 | sourceMap: options.sourceMap 21 | } 22 | } 23 | 24 | var postcssLoader = { 25 | loader: 'postcss-loader', 26 | options: { 27 | sourceMap: options.sourceMap 28 | } 29 | } 30 | 31 | // generate loader string to be used with extract text plugin 32 | function generateLoaders (loader, loaderOptions) { 33 | const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader] 34 | if (loader) { 35 | loaders.push({ 36 | loader: loader + '-loader', 37 | options: Object.assign({}, loaderOptions, { 38 | sourceMap: options.sourceMap 39 | }) 40 | }) 41 | } 42 | 43 | // Extract CSS when that option is specified 44 | // (which is the case during production build) 45 | if (options.extract) { 46 | return ExtractTextPlugin.extract({ 47 | use: loaders, 48 | fallback: 'vue-style-loader' 49 | }) 50 | } else { 51 | return ['vue-style-loader'].concat(loaders) 52 | } 53 | } 54 | 55 | // https://vue-loader.vuejs.org/en/configurations/extract-css.html 56 | return { 57 | css: generateLoaders(), 58 | postcss: generateLoaders(), 59 | less: generateLoaders('less'), 60 | sass: generateLoaders('sass', { indentedSyntax: true }), 61 | scss: generateLoaders('sass'), 62 | stylus: generateLoaders('stylus'), 63 | styl: generateLoaders('stylus') 64 | } 65 | } 66 | 67 | // Generate loaders for standalone style files (outside of .vue) 68 | exports.styleLoaders = function (options) { 69 | const output = [] 70 | const loaders = exports.cssLoaders(options) 71 | for (const extension in loaders) { 72 | const loader = loaders[extension] 73 | output.push({ 74 | test: new RegExp('\\.' + extension + '$'), 75 | use: loader 76 | }) 77 | } 78 | return output 79 | } 80 | 81 | exports.createNotifierCallback = function () { 82 | const notifier = require('node-notifier') 83 | 84 | return (severity, errors) => { 85 | if (severity !== 'error') { 86 | return 87 | } 88 | const error = errors[0] 89 | 90 | const filename = error.file.split('!').pop() 91 | notifier.notify({ 92 | title: pkg.name, 93 | message: severity + ': ' + error.name, 94 | subtitle: filename || '', 95 | icon: path.join(__dirname, 'logo.png') 96 | }) 97 | } 98 | } 99 | -------------------------------------------------------------------------------- /template/frontend/build/vue-loader.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const utils = require('./utils') 3 | const config = require('../config') 4 | const isProduction = process.env.NODE_ENV === 'production' 5 | const sourceMapEnabled = isProduction 6 | ? config.build.productionSourceMap 7 | : config.dev.cssSourceMap 8 | 9 | 10 | module.exports = { 11 | loaders: utils.cssLoaders({ 12 | sourceMap: sourceMapEnabled, 13 | extract: isProduction 14 | }), 15 | cssSourceMap: sourceMapEnabled, 16 | transformToRequire: { 17 | video: 'src', 18 | source: 'src', 19 | img: 'src', 20 | image: 'xlink:href' 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /template/frontend/build/webpack.base.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const path = require('path') 3 | const utils = require('./utils') 4 | const config = require('../config') 5 | const vueLoaderConfig = require('./vue-loader.conf') 6 | const BundleTracker = require('webpack-bundle-tracker'); 7 | 8 | function resolve (dir) { 9 | return path.join(__dirname, '..', dir) 10 | } 11 | 12 | module.exports = { 13 | context: path.resolve(__dirname, '../'), 14 | entry: { 15 | app: './src/main.js' 16 | }, 17 | output: { 18 | path: config.build.assetsRoot, 19 | filename: '[name].js', 20 | publicPath: process.env.NODE_ENV === 'production' 21 | ? config.build.assetsPublicPath 22 | : config.dev.assetsPublicPath 23 | }, 24 | plugins: [ 25 | new BundleTracker({filename: './webpack-stats.json'}), 26 | ], 27 | resolve: { 28 | extensions: ['.js', '.vue', '.json'], 29 | alias: { 30 | {{#if_eq build "standalone"}} 31 | 'vue$': 'vue/dist/vue.esm.js', 32 | {{/if_eq}} 33 | '@': resolve('src'), 34 | 'static': resolve('../static') 35 | } 36 | }, 37 | module: { 38 | rules: [ 39 | {{#lint}} 40 | ...(config.dev.useEslint? [{ 41 | test: /\.(js|vue)$/, 42 | loader: 'eslint-loader', 43 | enforce: 'pre', 44 | include: [resolve('src'), resolve('test')], 45 | options: { 46 | formatter: require('eslint-friendly-formatter'), 47 | emitWarning: !config.dev.showEslintErrorsInOverlay 48 | } 49 | }] : []), 50 | {{/lint}} 51 | { 52 | test: /\.vue$/, 53 | loader: 'vue-loader', 54 | options: vueLoaderConfig 55 | }, 56 | { 57 | test: /\.js$/, 58 | loader: 'babel-loader', 59 | include: [resolve('src'), resolve('test')] 60 | }, 61 | { 62 | test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 63 | loader: 'url-loader', 64 | options: { 65 | limit: 10000, 66 | name: utils.assetsPath('img/[name].[hash:7].[ext]') 67 | } 68 | }, 69 | { 70 | test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, 71 | loader: 'url-loader', 72 | options: { 73 | limit: 10000, 74 | name: utils.assetsPath('media/[name].[hash:7].[ext]') 75 | } 76 | }, 77 | { 78 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 79 | loader: 'url-loader', 80 | options: { 81 | limit: 10000, 82 | name: utils.assetsPath('fonts/[name].[hash:7].[ext]') 83 | } 84 | } 85 | ] 86 | } 87 | } 88 | -------------------------------------------------------------------------------- /template/frontend/build/webpack.dev.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const utils = require('./utils') 3 | const webpack = require('webpack') 4 | const config = require('../config') 5 | const merge = require('webpack-merge') 6 | const baseWebpackConfig = require('./webpack.base.conf') 7 | const HtmlWebpackPlugin = require('html-webpack-plugin') 8 | const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin') 9 | const portfinder = require('portfinder') 10 | 11 | const devWebpackConfig = merge(baseWebpackConfig, { 12 | module: { 13 | rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true }) 14 | }, 15 | // cheap-module-eval-source-map is faster for development 16 | devtool: config.dev.devtool, 17 | 18 | // these devServer options should be customized in /config/index.js 19 | devServer: { 20 | clientLogLevel: 'warning', 21 | historyApiFallback: true, 22 | hot: true, 23 | headers: { "Access-Control-Allow-Origin": "*" }, 24 | host: process.env.HOST || config.dev.host, 25 | port: process.env.PORT || config.dev.port, 26 | open: config.dev.autoOpenBrowser, 27 | overlay: config.dev.errorOverlay ? { 28 | warnings: false, 29 | errors: true, 30 | } : false, 31 | publicPath: config.dev.assetsPublicPath, 32 | proxy: config.dev.proxyTable, 33 | quiet: true, // necessary for FriendlyErrorsPlugin 34 | watchOptions: { 35 | poll: config.dev.poll, 36 | } 37 | }, 38 | plugins: [ 39 | new webpack.DefinePlugin({ 40 | 'process.env': require('../config/dev.env') 41 | }), 42 | new webpack.HotModuleReplacementPlugin(), 43 | new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update. 44 | new webpack.NoEmitOnErrorsPlugin(), 45 | // https://github.com/ampedandwired/html-webpack-plugin 46 | new HtmlWebpackPlugin({ 47 | filename: 'index.html', 48 | template: 'index.html', 49 | inject: true 50 | }), 51 | ] 52 | }) 53 | 54 | module.exports = new Promise((resolve, reject) => { 55 | portfinder.basePort = process.env.PORT || config.dev.port 56 | portfinder.getPort((err, port) => { 57 | if (err) { 58 | reject(err) 59 | } else { 60 | // publish the new Port, necessary for e2e tests 61 | process.env.PORT = port 62 | // add port to devServer config 63 | devWebpackConfig.devServer.port = port 64 | 65 | // Add FriendlyErrorsPlugin 66 | devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({ 67 | compilationSuccessInfo: { 68 | messages: [`Your application is running here: http://${config.dev.host}:${port}`], 69 | }, 70 | onErrors: config.dev.notifyOnErrors 71 | ? utils.createNotifierCallback() 72 | : undefined 73 | })) 74 | 75 | resolve(devWebpackConfig) 76 | } 77 | }) 78 | }) 79 | -------------------------------------------------------------------------------- /template/frontend/build/webpack.prod.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const path = require('path') 3 | const utils = require('./utils') 4 | const webpack = require('webpack') 5 | const config = require('../config') 6 | const merge = require('webpack-merge') 7 | const baseWebpackConfig = require('./webpack.base.conf') 8 | const CopyWebpackPlugin = require('copy-webpack-plugin') 9 | const HtmlWebpackPlugin = require('html-webpack-plugin') 10 | const ExtractTextPlugin = require('extract-text-webpack-plugin') 11 | const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin') 12 | 13 | const env = {{#if_or unit e2e}}process.env.NODE_ENV === 'testing' 14 | ? require('../config/test.env') 15 | : {{/if_or}}require('../config/prod.env') 16 | 17 | const webpackConfig = merge(baseWebpackConfig, { 18 | module: { 19 | rules: utils.styleLoaders({ 20 | sourceMap: config.build.productionSourceMap, 21 | extract: true, 22 | usePostCSS: true 23 | }) 24 | }, 25 | devtool: config.build.productionSourceMap ? config.build.devtool : false, 26 | output: { 27 | path: config.build.assetsRoot, 28 | filename: utils.assetsPath('js/[name].[chunkhash].js'), 29 | chunkFilename: utils.assetsPath('js/[name].[chunkhash].js') 30 | }, 31 | plugins: [ 32 | // http://vuejs.github.io/vue-loader/en/workflow/production.html 33 | new webpack.DefinePlugin({ 34 | 'process.env': env 35 | }), 36 | // UglifyJs do not support ES6+, you can also use babel-minify for better treeshaking: https://github.com/babel/minify 37 | new webpack.optimize.UglifyJsPlugin({ 38 | compress: { 39 | warnings: false 40 | }, 41 | sourceMap: config.build.productionSourceMap, 42 | parallel: true 43 | }), 44 | // extract css into its own file 45 | new ExtractTextPlugin({ 46 | filename: utils.assetsPath('css/[name].[contenthash].css'), 47 | // set the following option to `true` if you want to extract CSS from 48 | // codesplit chunks into this main css file as well. 49 | // This will result in *all* of your app's CSS being loaded upfront. 50 | allChunks: false, 51 | }), 52 | // Compress extracted CSS. We are using this plugin so that possible 53 | // duplicated CSS from different components can be deduped. 54 | new OptimizeCSSPlugin({ 55 | cssProcessorOptions: config.build.productionSourceMap 56 | ? { safe: true, map: { inline: false } } 57 | : { safe: true } 58 | }), 59 | // generate dist index.html with correct asset hash for caching. 60 | // you can customize output by editing /index.html 61 | // see https://github.com/ampedandwired/html-webpack-plugin 62 | new HtmlWebpackPlugin({ 63 | filename: {{#if_or unit e2e}}process.env.NODE_ENV === 'testing' 64 | ? 'index.html' 65 | : {{/if_or}}config.build.index, 66 | template: 'index.html', 67 | inject: true, 68 | minify: { 69 | removeComments: true, 70 | collapseWhitespace: true, 71 | removeAttributeQuotes: true 72 | // more options: 73 | // https://github.com/kangax/html-minifier#options-quick-reference 74 | }, 75 | // necessary to consistently work with multiple chunks via CommonsChunkPlugin 76 | chunksSortMode: 'dependency' 77 | }), 78 | // keep module.id stable when vender modules does not change 79 | new webpack.HashedModuleIdsPlugin(), 80 | // enable scope hoisting 81 | new webpack.optimize.ModuleConcatenationPlugin(), 82 | // split vendor js into its own file 83 | new webpack.optimize.CommonsChunkPlugin({ 84 | name: 'vendor', 85 | minChunks: function (module) { 86 | // any required modules inside node_modules are extracted to vendor 87 | return ( 88 | module.resource && 89 | /\.js$/.test(module.resource) && 90 | module.resource.indexOf( 91 | path.join(__dirname, '../../node_modules') 92 | ) === 0 93 | ) 94 | } 95 | }), 96 | // extract webpack runtime and module manifest to its own file in order to 97 | // prevent vendor hash from being updated whenever app bundle is updated 98 | new webpack.optimize.CommonsChunkPlugin({ 99 | name: 'manifest', 100 | minChunks: Infinity 101 | }), 102 | // This instance extracts shared chunks from code splitted chunks and bundles them 103 | // in a separate chunk, similar to the vendor chunk 104 | // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk 105 | new webpack.optimize.CommonsChunkPlugin({ 106 | name: 'app', 107 | async: 'vendor-async', 108 | children: true, 109 | minChunks: 3 110 | }), 111 | 112 | // copy custom static assets 113 | new CopyWebpackPlugin([ 114 | { 115 | from: path.resolve(__dirname, '../../static'), 116 | to: config.build.assetsSubDirectory, 117 | ignore: ['.*'] 118 | } 119 | ]) 120 | ] 121 | }) 122 | 123 | if (config.build.productionGzip) { 124 | const CompressionWebpackPlugin = require('compression-webpack-plugin') 125 | 126 | webpackConfig.plugins.push( 127 | new CompressionWebpackPlugin({ 128 | asset: '[path].gz[query]', 129 | algorithm: 'gzip', 130 | test: new RegExp( 131 | '\\.(' + 132 | config.build.productionGzipExtensions.join('|') + 133 | ')$' 134 | ), 135 | threshold: 10240, 136 | minRatio: 0.8 137 | }) 138 | ) 139 | } 140 | 141 | if (config.build.bundleAnalyzerReport) { 142 | const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin 143 | webpackConfig.plugins.push(new BundleAnalyzerPlugin()) 144 | } 145 | 146 | module.exports = webpackConfig 147 | -------------------------------------------------------------------------------- /template/frontend/build/webpack.test.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | // This is the webpack config used for unit tests. 3 | 4 | const utils = require('./utils') 5 | const webpack = require('webpack') 6 | const merge = require('webpack-merge') 7 | const baseWebpackConfig = require('./webpack.base.conf') 8 | 9 | const webpackConfig = merge(baseWebpackConfig, { 10 | // use inline sourcemap for karma-sourcemap-loader 11 | module: { 12 | rules: utils.styleLoaders() 13 | }, 14 | devtool: '#inline-source-map', 15 | resolveLoader: { 16 | alias: { 17 | // necessary to to make lang="scss" work in test when using vue-loader's ?inject option 18 | // see discussion at https://github.com/vuejs/vue-loader/issues/724 19 | 'scss-loader': 'sass-loader' 20 | } 21 | }, 22 | plugins: [ 23 | new webpack.DefinePlugin({ 24 | 'process.env': require('../config/test.env') 25 | }) 26 | ] 27 | }) 28 | 29 | // no need for app entry during tests 30 | delete webpackConfig.entry 31 | 32 | module.exports = webpackConfig 33 | -------------------------------------------------------------------------------- /template/frontend/config/dev.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const merge = require('webpack-merge') 3 | const prodEnv = require('./prod.env') 4 | 5 | module.exports = merge(prodEnv, { 6 | NODE_ENV: '"development"' 7 | }) 8 | -------------------------------------------------------------------------------- /template/frontend/config/index.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | // Template version: 1.2.3 3 | // see http://vuejs-templates.github.io/webpack for documentation. 4 | 5 | const path = require('path') 6 | 7 | const devhost = 'localhost' 8 | const devport = 8001 9 | 10 | module.exports = { 11 | dev: { 12 | 13 | // Paths 14 | assetsSubDirectory: 'static', 15 | assetsPublicPath: 'http://' + devhost + ':' + devport + '/', 16 | proxyTable: {}, 17 | 18 | // Various Dev Server settings 19 | host: devhost, // can be overwritten by process.env.HOST 20 | port: devport, // can be overwritten by process.env.HOST, if port is in use, a free one will be determined 21 | autoOpenBrowser: false, 22 | errorOverlay: true, 23 | notifyOnErrors: true, 24 | poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions- 25 | 26 | // Use Eslint Loader? 27 | // If true, your code will be linted during bundling and 28 | // linting errors and warnings will be shown in the console. 29 | useEslint: true, 30 | // If true, eslint errors and warnings will also be shown in the error overlay 31 | // in the browser. 32 | showEslintErrorsInOverlay: false, 33 | 34 | /** 35 | * Source Maps 36 | */ 37 | 38 | // https://webpack.js.org/configuration/devtool/#development 39 | devtool: 'eval-source-map', 40 | 41 | // If you have problems debugging vue-files in devtools, 42 | // set this to false - it *may* help 43 | // https://vue-loader.vuejs.org/en/options.html#cachebusting 44 | cacheBusting: true, 45 | 46 | // CSS Sourcemaps off by default because relative paths are "buggy" 47 | // with this option, according to the CSS-Loader README 48 | // (https://github.com/webpack/css-loader#sourcemaps) 49 | // In our experience, they generally work as expected, 50 | // just be aware of this issue when enabling this option. 51 | cssSourceMap: false, 52 | }, 53 | 54 | build: { 55 | // Template for index.html 56 | index: path.resolve(__dirname, '../../static/dist/index.html'), 57 | 58 | // Paths 59 | assetsRoot: path.resolve(__dirname, '../../static/dist'), 60 | assetsSubDirectory: '', 61 | assetsPublicPath: '/', 62 | 63 | /** 64 | * Source Maps 65 | */ 66 | 67 | productionSourceMap: true, 68 | // https://webpack.js.org/configuration/devtool/#production 69 | devtool: '#source-map', 70 | 71 | // Gzip off by default as many popular static hosts such as 72 | // Surge or Netlify already gzip all static assets for you. 73 | // Before setting to `true`, make sure to: 74 | // npm install --save-dev compression-webpack-plugin 75 | productionGzip: false, 76 | productionGzipExtensions: ['js', 'css'], 77 | 78 | // Run the build command with an extra argument to 79 | // View the bundle analyzer report after build finishes: 80 | // `npm run build --report` 81 | // Set to `true` or `false` to always turn it on or off 82 | bundleAnalyzerReport: process.env.npm_config_report 83 | } 84 | } 85 | -------------------------------------------------------------------------------- /template/frontend/config/prod.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | module.exports = { 3 | NODE_ENV: '"production"' 4 | } 5 | -------------------------------------------------------------------------------- /template/frontend/config/test.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const merge = require('webpack-merge') 3 | const devEnv = require('./dev.env') 4 | 5 | module.exports = merge(devEnv, { 6 | NODE_ENV: '"testing"' 7 | }) 8 | -------------------------------------------------------------------------------- /template/frontend/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | {{ name }} 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /template/frontend/src/App.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 24 | 25 | 35 | -------------------------------------------------------------------------------- /template/frontend/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CharlesAracil/webpack-vue-django/0787422019f980482b3ea62288c63c3abf3043f0/template/frontend/src/assets/logo.png -------------------------------------------------------------------------------- /template/frontend/src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 33 | 34 | 35 | 51 | -------------------------------------------------------------------------------- /template/frontend/src/main.js: -------------------------------------------------------------------------------- 1 | {{#if_eq build "standalone"}} 2 | // The Vue build version to load with the `import` command 3 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias. 4 | {{/if_eq}} 5 | import Vue from 'vue'{{#if_eq lintConfig "airbnb"}};{{/if_eq}} 6 | import App from './App'{{#if_eq lintConfig "airbnb"}};{{/if_eq}} 7 | {{#router}} 8 | import router from './router'{{#if_eq lintConfig "airbnb"}};{{/if_eq}} 9 | {{/router}} 10 | 11 | Vue.config.productionTip = false{{#if_eq lintConfig "airbnb"}};{{/if_eq}} 12 | 13 | /* eslint-disable no-new */ 14 | new Vue({ 15 | el: '#app', 16 | {{#router}} 17 | router, 18 | {{/router}} 19 | {{#if_eq build "runtime"}} 20 | render: h => h(App){{#if_eq lintConfig "airbnb"}},{{/if_eq}} 21 | {{/if_eq}} 22 | {{#if_eq build "standalone"}} 23 | template: '', 24 | components: { App }{{#if_eq lintConfig "airbnb"}},{{/if_eq}} 25 | {{/if_eq}} 26 | }){{#if_eq lintConfig "airbnb"}};{{/if_eq}} 27 | -------------------------------------------------------------------------------- /template/frontend/src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'{{#if_eq lintConfig "airbnb"}};{{/if_eq}} 2 | import Router from 'vue-router'{{#if_eq lintConfig "airbnb"}};{{/if_eq}} 3 | import HelloWorld from '@/components/HelloWorld'{{#if_eq lintConfig "airbnb"}};{{/if_eq}} 4 | 5 | Vue.use(Router){{#if_eq lintConfig "airbnb"}};{{/if_eq}} 6 | 7 | export default new Router({ 8 | routes: [ 9 | { 10 | path: '/', 11 | name: 'HelloWorld', 12 | component: HelloWorld{{#if_eq lintConfig "airbnb"}},{{/if_eq}} 13 | }{{#if_eq lintConfig "airbnb"}},{{/if_eq}} 14 | ]{{#if_eq lintConfig "airbnb"}},{{/if_eq}} 15 | }){{#if_eq lintConfig "airbnb"}};{{/if_eq}} 16 | -------------------------------------------------------------------------------- /template/frontend/test/e2e/custom-assertions/elementCount.js: -------------------------------------------------------------------------------- 1 | // A custom Nightwatch assertion. 2 | // the name of the method is the filename. 3 | // can be used in tests like this: 4 | // 5 | // browser.assert.elementCount(selector, count) 6 | // 7 | // for how to write custom assertions see 8 | // http://nightwatchjs.org/guide#writing-custom-assertions 9 | exports.assertion = function (selector, count) { 10 | this.message = 'Testing if element <' + selector + '> has count: ' + count{{#if_eq lintConfig "airbnb"}};{{/if_eq}} 11 | this.expected = count{{#if_eq lintConfig "airbnb"}};{{/if_eq}} 12 | this.pass = function (val) { 13 | return val === this.expected{{#if_eq lintConfig "airbnb"}};{{/if_eq}} 14 | } 15 | this.value = function (res) { 16 | return res.value{{#if_eq lintConfig "airbnb"}};{{/if_eq}} 17 | } 18 | this.command = function (cb) { 19 | var self = this{{#if_eq lintConfig "airbnb"}};{{/if_eq}} 20 | return this.api.execute(function (selector) { 21 | return document.querySelectorAll(selector).length{{#if_eq lintConfig "airbnb"}};{{/if_eq}} 22 | }, [selector], function (res) { 23 | cb.call(self, res){{#if_eq lintConfig "airbnb"}};{{/if_eq}} 24 | }){{#if_eq lintConfig "airbnb"}};{{/if_eq}} 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /template/frontend/test/e2e/nightwatch.conf.js: -------------------------------------------------------------------------------- 1 | require('babel-register') 2 | var config = require('../../config') 3 | 4 | // http://nightwatchjs.org/gettingstarted#settings-file 5 | module.exports = { 6 | src_folders: ['frontend/test/e2e/specs'], 7 | output_folder: 'frontend/test/e2e/reports', 8 | custom_assertions_path: ['frontend/test/e2e/custom-assertions'], 9 | 10 | selenium: { 11 | start_process: true, 12 | server_path: require('selenium-server').path, 13 | host: '127.0.0.1', 14 | port: 4444, 15 | cli_args: { 16 | 'webdriver.chrome.driver': require('chromedriver').path 17 | } 18 | }, 19 | 20 | test_settings: { 21 | default: { 22 | selenium_port: 4444, 23 | selenium_host: 'localhost', 24 | silent: true, 25 | globals: { 26 | devServerURL: 'http://localhost:' + (process.env.PORT || config.dev.port) 27 | } 28 | }, 29 | 30 | chrome: { 31 | desiredCapabilities: { 32 | browserName: 'chrome', 33 | javascriptEnabled: true, 34 | acceptSslCerts: true 35 | } 36 | }, 37 | 38 | firefox: { 39 | desiredCapabilities: { 40 | browserName: 'firefox', 41 | javascriptEnabled: true, 42 | acceptSslCerts: true 43 | } 44 | } 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /template/frontend/test/e2e/runner.js: -------------------------------------------------------------------------------- 1 | // 1. start the dev server using production config 2 | process.env.NODE_ENV = 'testing'{{#if_eq lintConfig "airbnb"}};{{/if_eq}} 3 | 4 | const webpack = require('webpack'){{#if_eq lintConfig "airbnb"}};{{/if_eq}} 5 | const DevServer = require('webpack-dev-server'){{#if_eq lintConfig "airbnb"}};{{/if_eq}} 6 | 7 | const webpackConfig = require('../../build/webpack.prod.conf'){{#if_eq lintConfig "airbnb"}};{{/if_eq}} 8 | const devConfigPromise = require('../../build/webpack.dev.conf'){{#if_eq lintConfig "airbnb"}};{{/if_eq}} 9 | 10 | let server{{#if_eq lintConfig "airbnb"}};{{/if_eq}} 11 | 12 | devConfigPromise.then(devConfig => { 13 | const devServerOptions = devConfig.devServer{{#if_eq lintConfig "airbnb"}};{{/if_eq}} 14 | const compiler = webpack(webpackConfig){{#if_eq lintConfig "airbnb"}};{{/if_eq}} 15 | server = new DevServer(compiler, devServerOptions){{#if_eq lintConfig "airbnb"}};{{/if_eq}} 16 | const port = devServerOptions.port{{#if_eq lintConfig "airbnb"}};{{/if_eq}} 17 | const host = devServerOptions.host{{#if_eq lintConfig "airbnb"}};{{/if_eq}} 18 | return server.listen(port, host){{#if_eq lintConfig "airbnb"}};{{/if_eq}} 19 | }) 20 | .then(() => { 21 | // 2. run the nightwatch test suite against it 22 | // to run in additional browsers: 23 | // 1. add an entry in test/e2e/nightwatch.conf.json under "test_settings" 24 | // 2. add it to the --env flag below 25 | // or override the environment flag, for example: `npm run e2e -- --env chrome,firefox` 26 | // For more information on Nightwatch's config file, see 27 | // http://nightwatchjs.org/guide#settings-file 28 | let opts = process.argv.slice(2){{#if_eq lintConfig "airbnb"}};{{/if_eq}} 29 | if (opts.indexOf('--config') === -1) { 30 | opts = opts.concat(['--config', 'frontend/test/e2e/nightwatch.conf.js']){{#if_eq lintConfig "airbnb"}};{{/if_eq}} 31 | } 32 | if (opts.indexOf('--env') === -1) { 33 | opts = opts.concat(['--env', 'chrome']){{#if_eq lintConfig "airbnb"}};{{/if_eq}} 34 | } 35 | 36 | const spawn = require('cross-spawn'){{#if_eq lintConfig "airbnb"}};{{/if_eq}} 37 | const runner = spawn('./node_modules/.bin/nightwatch', opts, { stdio: 'inherit' }){{#if_eq lintConfig "airbnb"}};{{/if_eq}} 38 | 39 | runner.on('exit', function (code) { 40 | server.close(){{#if_eq lintConfig "airbnb"}};{{/if_eq}} 41 | process.exit(code){{#if_eq lintConfig "airbnb"}};{{/if_eq}} 42 | }){{#if_eq lintConfig "airbnb"}};{{/if_eq}} 43 | 44 | runner.on('error', function (err) { 45 | server.close(){{#if_eq lintConfig "airbnb"}};{{/if_eq}} 46 | throw err{{#if_eq lintConfig "airbnb"}};{{/if_eq}} 47 | }){{#if_eq lintConfig "airbnb"}};{{/if_eq}} 48 | }){{#if_eq lintConfig "airbnb"}};{{/if_eq}} 49 | -------------------------------------------------------------------------------- /template/frontend/test/e2e/specs/test.js: -------------------------------------------------------------------------------- 1 | // For authoring Nightwatch tests, see 2 | // http://nightwatchjs.org/guide#usage 3 | 4 | module.exports = { 5 | 'default e2e tests': function {{#if_eq lintConfig "airbnb"}}test{{/if_eq}}(browser) { 6 | // automatically uses dev Server port from /config.index.js 7 | // default: http://localhost:8001 8 | // see nightwatch.conf.js 9 | const devServer = browser.globals.devServerURL{{#if_eq lintConfig "airbnb"}};{{/if_eq}} 10 | 11 | browser 12 | .url(devServer) 13 | .waitForElementVisible('#app', 5000) 14 | .assert.elementPresent('.hello') 15 | .assert.containsText('h1', 'Welcome to Your Vue.js App') 16 | .assert.elementCount('img', 1) 17 | .end(){{#if_eq lintConfig "airbnb"}};{{/if_eq}} 18 | }{{#if_eq lintConfig "airbnb"}},{{/if_eq}} 19 | }{{#if_eq lintConfig "airbnb"}};{{/if_eq}} 20 | -------------------------------------------------------------------------------- /template/frontend/test/unit/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { {{#if_eq runner "karma"}} 3 | "mocha": true{{/if_eq}}{{#if_eq runner "jest"}} 4 | "jest": true{{/if_eq}} 5 | }, 6 | "globals": { {{#if_eq runner "karma"}} 7 | "expect": true, 8 | "sinon": true{{/if_eq}} 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /template/frontend/test/unit/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'{{#if_eq lintConfig "airbnb"}};{{/if_eq}} 2 | 3 | Vue.config.productionTip = false{{#if_eq lintConfig "airbnb"}};{{/if_eq}} 4 | 5 | // require all test files (files that ends with .spec.js) 6 | const testsContext = require.context('./specs', true, /\.spec$/){{#if_eq lintConfig "airbnb"}};{{/if_eq}} 7 | testsContext.keys().forEach(testsContext){{#if_eq lintConfig "airbnb"}};{{/if_eq}} 8 | 9 | // require all src files except main.js for coverage. 10 | // you can also change this to match only the subset of files that 11 | // you want coverage for. 12 | const srcContext = require.context('../../src', true, /^\.\/(?!main(\.js)?$)/){{#if_eq lintConfig "airbnb"}};{{/if_eq}} 13 | srcContext.keys().forEach(srcContext){{#if_eq lintConfig "airbnb"}};{{/if_eq}} 14 | -------------------------------------------------------------------------------- /template/frontend/test/unit/karma.conf.js: -------------------------------------------------------------------------------- 1 | // This is a karma config file. For more details see 2 | // http://karma-runner.github.io/0.13/config/configuration-file.html 3 | // we are also using it with karma-webpack 4 | // https://github.com/webpack/karma-webpack 5 | 6 | var webpackConfig = require('../../build/webpack.test.conf'){{#if_eq lintConfig "airbnb"}};{{/if_eq}} 7 | 8 | module.exports = function (config) { 9 | config.set({ 10 | // to run in additional browsers: 11 | // 1. install corresponding karma launcher 12 | // http://karma-runner.github.io/0.13/config/browsers.html 13 | // 2. add it to the `browsers` array below. 14 | browsers: ['PhantomJS'], 15 | frameworks: ['mocha', 'sinon-chai', 'phantomjs-shim'], 16 | reporters: ['spec', 'coverage'], 17 | files: ['./index.js'], 18 | preprocessors: { 19 | './index.js': ['webpack', 'sourcemap'] 20 | }, 21 | webpack: webpackConfig, 22 | webpackMiddleware: { 23 | noInfo: true{{#if_eq lintConfig "airbnb"}},{{/if_eq}} 24 | }, 25 | coverageReporter: { 26 | dir: './coverage', 27 | reporters: [ 28 | { type: 'lcov', subdir: '.' }, 29 | { type: 'text-summary' }{{#if_eq lintConfig "airbnb"}},{{/if_eq}} 30 | ] 31 | }{{#if_eq lintConfig "airbnb"}},{{/if_eq}} 32 | }){{#if_eq lintConfig "airbnb"}};{{/if_eq}} 33 | }{{#if_eq lintConfig "airbnb"}};{{/if_eq}} 34 | -------------------------------------------------------------------------------- /template/frontend/test/unit/setup.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | 3 | Vue.config.productionTip = false 4 | -------------------------------------------------------------------------------- /template/frontend/test/unit/specs/HelloWorld.spec.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'{{#if_eq lintConfig "airbnb"}};{{/if_eq}} 2 | import HelloWorld from '@/components/HelloWorld'{{#if_eq lintConfig "airbnb"}};{{/if_eq}} 3 | 4 | describe('HelloWorld.vue', () => { 5 | it('should render correct contents', () => { 6 | const Constructor = Vue.extend(HelloWorld){{#if_eq lintConfig "airbnb"}};{{/if_eq}} 7 | const vm = new Constructor().$mount(){{#if_eq lintConfig "airbnb"}};{{/if_eq}} 8 | expect(vm.$el.querySelector('.hello h1').textContent) 9 | {{#if_eq runner "karma"}}.to.equal('Welcome to Your Vue.js App'){{#if_eq lintConfig "airbnb"}};{{/if_eq}}{{/if_eq}}{{#if_eq runner "jest"}}.toEqual('Welcome to Your Vue.js App'){{#if_eq lintConfig "airbnb"}};{{/if_eq}}{{/if_eq}} 10 | }){{#if_eq lintConfig "airbnb"}};{{/if_eq}} 11 | }){{#if_eq lintConfig "airbnb"}};{{/if_eq}} 12 | -------------------------------------------------------------------------------- /template/manage.py: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env python 2 | import os 3 | import sys 4 | 5 | if __name__ == "__main__": 6 | os.environ.setdefault("DJANGO_SETTINGS_MODULE", "backend.settings") 7 | try: 8 | from django.core.management import execute_from_command_line 9 | except ImportError: 10 | # The above import may fail for some other reason. Ensure that the 11 | # issue is really that Django is missing to avoid masking other 12 | # exceptions on Python 2. 13 | try: 14 | import django 15 | except ImportError: 16 | raise ImportError( 17 | "Couldn't import Django. Are you sure it's installed and " 18 | "available on your PYTHONPATH environment variable? Did you " 19 | "forget to activate a virtual environment?" 20 | ) 21 | raise 22 | execute_from_command_line(sys.argv) 23 | -------------------------------------------------------------------------------- /template/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "{{ name }}", 3 | "version": "1.0.0", 4 | "description": "{{ description }}", 5 | "author": "{{ author }}", 6 | "private": true, 7 | "scripts": { 8 | "dev": "webpack-dev-server --inline --progress --config frontend/build/webpack.dev.conf.js", 9 | "start": "npm run dev", 10 | {{#if_eq runner "jest"}} 11 | "unit": "jest frontend/test/unit/specs --coverage", 12 | {{/if_eq}} 13 | {{#if_eq runner "karma"}} 14 | "unit": "cross-env BABEL_ENV=test karma start frontend/test/unit/karma.conf.js --single-run", 15 | {{/if_eq}} 16 | {{#e2e}} 17 | "e2e": "node frontend/test/e2e/runner.js",{{/e2e}} 18 | {{#if_or unit e2e}} 19 | "test": "{{#unit}}npm run unit{{/unit}}{{#unit}}{{#e2e}} && {{/e2e}}{{/unit}}{{#e2e}}npm run e2e{{/e2e}}", 20 | {{/if_or}} 21 | {{#lint}} 22 | "lint": "eslint --ext .js,.vue src{{#unit}} frontend/test/unit/specs{{/unit}}{{#e2e}} frontend/test/e2e/specs{{/e2e}}", 23 | {{/lint}} 24 | "build": "node frontend/build/build.js" 25 | }, 26 | "dependencies": { 27 | "vue": "^2.5.2"{{#router}}, 28 | "vue-router": "^3.0.1"{{/router}} 29 | }, 30 | "devDependencies": { 31 | "autoprefixer": "^7.1.2", 32 | "babel-core": "^6.22.1", 33 | {{#lint}} 34 | "babel-eslint": "^7.1.1", 35 | {{/lint}} 36 | "babel-loader": "^7.1.1", 37 | "babel-plugin-transform-runtime": "^6.22.0", 38 | "babel-preset-env": "^1.3.2", 39 | "babel-preset-stage-2": "^6.22.0", 40 | "babel-register": "^6.22.0", 41 | "chalk": "^2.0.1", 42 | "copy-webpack-plugin": "^4.0.1", 43 | "css-loader": "^0.28.0", 44 | {{#lint}} 45 | "eslint": "^3.19.0", 46 | "eslint-friendly-formatter": "^3.0.0", 47 | "eslint-loader": "^1.7.1", 48 | "eslint-plugin-html": "^3.0.0", 49 | {{#if_eq lintConfig "standard"}} 50 | "eslint-config-standard": "^10.2.1", 51 | "eslint-plugin-promise": "^3.4.0", 52 | "eslint-plugin-standard": "^3.0.1", 53 | "eslint-plugin-import": "^2.7.0", 54 | "eslint-plugin-node": "^5.2.0", 55 | {{/if_eq}} 56 | {{#if_eq lintConfig "airbnb"}} 57 | "eslint-config-airbnb-base": "^11.3.0", 58 | "eslint-import-resolver-webpack": "^0.8.3", 59 | "eslint-plugin-import": "^2.7.0", 60 | {{/if_eq}} 61 | {{/lint}} 62 | "eventsource-polyfill": "^0.9.6", 63 | "extract-text-webpack-plugin": "^3.0.0", 64 | "file-loader": "^1.1.4", 65 | "friendly-errors-webpack-plugin": "^1.6.1", 66 | "html-webpack-plugin": "^2.30.1", 67 | "webpack-bundle-analyzer": "^2.9.0", 68 | {{#if_eq runner "jest"}} 69 | "babel-jest": "^21.0.2", 70 | "jest": "^21.2.0", 71 | "vue-jest": "^1.0.2", 72 | {{/if_eq}} 73 | {{#if_eq runner "karma"}} 74 | "cross-env": "^5.0.1", 75 | "karma": "^1.4.1", 76 | "karma-coverage": "^1.1.1", 77 | "karma-mocha": "^1.3.0", 78 | "karma-phantomjs-launcher": "^1.0.2", 79 | "karma-phantomjs-shim": "^1.4.0", 80 | "karma-sinon-chai": "^1.3.1", 81 | "karma-sourcemap-loader": "^0.3.7", 82 | "karma-spec-reporter": "0.0.31", 83 | "karma-webpack": "^2.0.2", 84 | "mocha": "^3.2.0", 85 | "chai": "^4.1.2", 86 | "sinon": "^4.0.0", 87 | "sinon-chai": "^2.8.0", 88 | "inject-loader": "^3.0.0", 89 | "babel-plugin-istanbul": "^4.1.1", 90 | "phantomjs-prebuilt": "^2.1.14", 91 | {{/if_eq}} 92 | "node-notifier": "^5.1.2", 93 | {{#e2e}} 94 | "chromedriver": "^2.27.2", 95 | "cross-spawn": "^5.0.1", 96 | "nightwatch": "^0.9.12", 97 | "selenium-server": "^3.0.1", 98 | {{/e2e}} 99 | {{#sass}} 100 | "node-sass": "^4.7.2", 101 | "sass-loader": "^6.0.6", 102 | {{/sass}} 103 | "postcss-import": "^11.0.0", 104 | "postcss-loader": "^2.0.8", 105 | "semver": "^5.3.0", 106 | "shelljs": "^0.7.6", 107 | "optimize-css-assets-webpack-plugin": "^3.2.0", 108 | "ora": "^1.2.0", 109 | "rimraf": "^2.6.0", 110 | "url-loader": "^0.5.8", 111 | "vue-loader": "^13.3.0", 112 | "vue-style-loader": "^3.0.1", 113 | "vue-template-compiler": "^2.5.2", 114 | "portfinder": "^1.0.13", 115 | "webpack": "^3.6.0", 116 | "webpack-bundle-tracker": "^0.2.0", 117 | "webpack-dev-server": "^2.9.1", 118 | "webpack-merge": "^4.1.0" 119 | }, 120 | {{#if_eq runner "jest"}} 121 | "jest": { 122 | "moduleFileExtensions": [ 123 | "js", 124 | "json", 125 | "vue" 126 | ], 127 | "moduleNameMapper": { 128 | "^@/(.*)$": "/src/$1" 129 | }, 130 | "transform": { 131 | "^.+\\.js$": "/node_modules/babel-jest", 132 | ".*\\.(vue)$": "/node_modules/vue-jest" 133 | }, 134 | "setupFiles": ["/test/unit/setup"], 135 | "mapCoverage": true, 136 | "coverageDirectory": "/test/unit/coverage", 137 | "collectCoverageFrom" : [ 138 | "src/**/*.{js,vue}", 139 | "!src/main.js", 140 | {{#router}} 141 | "!src/router/index.js", 142 | {{/router}} 143 | "!**/node_modules/**" 144 | ] 145 | }, 146 | {{/if_eq}} 147 | "engines": { 148 | "node": ">= 4.0.0", 149 | "npm": ">= 3.0.0" 150 | }, 151 | "browserslist": [ 152 | "> 1%", 153 | "last 2 versions", 154 | "not ie <= 8" 155 | ] 156 | } 157 | -------------------------------------------------------------------------------- /template/public/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CharlesAracil/webpack-vue-django/0787422019f980482b3ea62288c63c3abf3043f0/template/public/.gitkeep -------------------------------------------------------------------------------- /template/requirements-dev.txt: -------------------------------------------------------------------------------- 1 | django-debug-toolbar>=1.8 2 | -------------------------------------------------------------------------------- /template/requirements.txt: -------------------------------------------------------------------------------- 1 | Django>=1.11.4 2 | django-webpack-loader>=0.5.0 3 | -------------------------------------------------------------------------------- /template/static/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CharlesAracil/webpack-vue-django/0787422019f980482b3ea62288c63c3abf3043f0/template/static/.gitkeep -------------------------------------------------------------------------------- /test.sh: -------------------------------------------------------------------------------- 1 | set -e 2 | 3 | yes "" | ./node_modules/.bin/vue init . test 4 | 5 | cd test 6 | npm install 7 | npm run lint 8 | npm test 9 | npm run build 10 | --------------------------------------------------------------------------------