Vue Cli 3 Hot Module Reloading (HMR) Development Server on External Server (e.g. nginx)

August 24, 2018

Allow vue cli 3 development mode (npm run serve) to work on external server (e.g. nginx).

This is an guide for vue cli 3. You can also refer to the vue cli 2.x guide.

Setup vue cli 3 project

vue create <PROJECT_NAME>
cd <PROJECT_NAME>
npm run serve

Enable HMR on external server

Edit vue.config.js.

const path = require('path')
const webpack = require('webpack')

module.exports = {
  devServer: {
    headers: {
      "Access-Control-Allow-Origin":"\*"
    },
  },
  assetsDir: process.env.NODE_ENV === 'production'
    ? 'static'
    : 'http://localhost:8080/',
  baseUrl: process.env.NODE_ENV === 'production'
    ? '/' // mess up assetsDir if this is blank
    : 'http://localhost:8080/',
}

Stop and run development server again.

npm run serve

Embed JavaScript in HTML

Edit the html hosted on external server (e.g. nginx).

<!doctype html>
<html lang="en">
  ...
  <body>
    <h1>I am External Server</h1>
    <div id="app" />
    <script type="text/javascript" src="http://localhost:8080/app.js"></script></body>
  </body>
</html>

Browse you page (e.g. http://localhost/).

You could see [HMR] Waiting for update signal from WDS... in console log if HMR is successful. Try edit your files in Vue.js project and the page should auto update (just like npm run serve at http://localhost:8080/).

You might want to load different set of JavaScript for development and production environment, something like the following using Jinja2.

<!doctype html>
<html lang="en">
  ...
  <body>
  {% if DEVELOPMENT_SERVER %}
  <script src="http://localhost:8080/app.js" type="text/javascript"></script>
  {% else %}
  <link href="/static/css/chunk-vendors.37ae32f6.css" rel="stylesheet">
  <link href="/static/css/app.9b617004.css" rel="stylesheet">
  <script src="/static/js/chunk-vendors.e012d10f.js" type="text/javascript"></script>
  <script src="/static/js/app.8cbd68ec.js" type="text/javascript"></script>
  {% endif %}
  </body>
</html>
This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.