(HMR) Automatic IP detection to connect other LAN devices

Author: Guillaume Chau

README.md

@@ -1,8 +1,8 @@
 <p align="center"><img src="./vue%2Bmeteor.png"></p>
 
 <p align="center">
-<a href="https://meteor.com/"><img src="https://img.shields.io/badge/meteor-1.4.3.1-blue.svg"/></a>
-<a href="https://vuejs.org/"><img src="https://img.shields.io/badge/vue-1.x-green.svg"/> <img src="https://img.shields.io/badge/vue-2.2.4-brightgreen.svg"/></a>
+<a href="https://meteor.com/"><img src="https://img.shields.io/badge/meteor-1.4.4.1-blue.svg"/></a>
+<a href="https://vuejs.org/"><img src="https://img.shields.io/badge/vue-1.x-green.svg"/> <img src="https://img.shields.io/badge/vue-2.2.6-brightgreen.svg"/></a>
 </p>
 
 <br/>

packages/vue-component-dev-client/client/dev-client.js

@@ -83,15 +83,9 @@ if (!Response.prototype.setEncoding) {
 
 Meteor.startup(function () {
   // Dev client
-  let port = __meteor_runtime_config__.VUE_DEV_SERVER_PORT || 3003
-  let devUrl = __meteor_runtime_config__.VUE_DEV_SERVER_URL || null
+  let devUrl = __meteor_runtime_config__.VUE_DEV_SERVER_URL
 
-  if (devUrl) {
-    console.log('[HMR] Dev client URL', devUrl)
-  } else {
-    devUrl = `${Meteor.absoluteUrl().replace(new RegExp(':\\d+\\/', 'gi'), '')}:${port}`
-    console.log('[HMR] Dev client port', port)
-  }
+  console.log('[HMR] Dev client URL', devUrl)
 
   // NOTE: Socket lib don't allow mix HTTP and HTTPS servers URLs on client!
   let _socket = require('socket.io-client')(devUrl)

packages/vue-component-dev-client/package.js

@@ -1,6 +1,6 @@
 Package.describe({
   name: 'akryum:vue-component-dev-client',
-  version: '0.2.8',
+  version: '0.2.9',
   summary: 'Hot-reloading client for vue components',
   git: 'https://github.com/Akryum/meteor-vue-component',
   documentation: 'README.md',

packages/vue-component-dev-server/.npm/package/.gitignore

@@ -0,0 +1 @@
+node_modules

packages/vue-component-dev-server/.npm/package/README

@@ -0,0 +1,7 @@
+This directory and the files immediately inside it are automatically generated
+when you change this package's NPM dependencies. Commit the files in this
+directory (npm-shrinkwrap.json, .gitignore, and this README) to source control
+so that others run the same versions of sub-dependencies.
+
+You should NOT check in the node_modules directory that Meteor automatically
+creates; if you are using git, the .gitignore file tells git to ignore it.

packages/vue-component-dev-server/.npm/package/npm-shrinkwrap.json

@@ -1,6 +1,6 @@
 Package.describe({
   name: 'akryum:vue-component-dev-server',
-  version: '0.0.5',
+  version: '0.0.6',
   summary: 'Dev server for vue hot-reloading',
   git: 'https://github.com/Akryum/meteor-vue-component',
   documentation: 'README.md',
@@ -13,3 +13,7 @@ Package.onUse(function(api) {
   api.use('webapp');
   api.mainModule('server/main.js', 'server');
 });
+
+Npm.depends({
+  'local-ipv4-address': '0.0.1',
+})

packages/vue-component-dev-server/package.js

@@ -1,3 +1,5 @@
+import localIp from 'local-ipv4-address'
+
 function getMeteorPort() {
   const reg = /:\/\/.+:(\d+)/gi;
   const result = reg.exec(Meteor.absoluteUrl());
@@ -6,12 +8,19 @@ function getMeteorPort() {
   }
 }
 
+const localIpSync = Meteor.wrapAsync(cb => {
+  localIp().then(result => {
+    cb(null, result)
+  }).catch(error => {
+    cb(error)
+  })
+})
+
 // to define full url with port (example: https://dev.example.com:8443/)
-const DEVURL = process.env.HMR_URL || process.env.VUE_DEV_SERVER_URL || null;
+const DEVURL = process.env.HMR_URL || process.env.VUE_DEV_SERVER_URL || localIpSync();
 
 // to define only dev port with same url
 const PORT = parseInt(process.env.HMR_PORT) || parseInt(process.env.VUE_DEV_SERVER_PORT) || getMeteorPort() || 3003;
 
 // Client-side config
-__meteor_runtime_config__.VUE_DEV_SERVER_PORT = PORT;
-__meteor_runtime_config__.VUE_DEV_SERVER_URL = DEVURL;
+__meteor_runtime_config__.VUE_DEV_SERVER_URL = `${DEVURL}:${PORT}`;

packages/vue-component-dev-server/server/main.js

@@ -1,5 +1,10 @@
 # Changelog
 
+## 0.8.16 - 2017-04-14
+
+ - Vue 2.2.6 support
+ - Automatic IP detection for HMR to work on other devices in the local network.
+
 ## 0.8.6 - 2017-02-21
 
  - CSS Modules: New `<style>` attribute `module` & `$style` component property (see [PR](https://github.com/Akryum/meteor-vue-component/pull/117)). Thanks @nathantreid

packages/vue-component/CHANGELOG.md

@@ -1,6 +1,6 @@
 Package.describe({
   name: 'akryum:vue-component',
-  version: '0.8.15',
+  version: '0.8.16',
   summary: 'VueJS single-file components that hot-reloads',
   git: 'https://github.com/Akryum/meteor-vue-component',
   documentation: 'README.md'
@@ -43,6 +43,6 @@ Package.registerBuildPlugin({
 Package.onUse(function(api) {
   api.versionsFrom('1.4.2');
   api.use('isobuild:compiler-plugin@1.0.0');
-  api.use('akryum:vue-component-dev-server@0.0.5');
-  api.use('akryum:vue-component-dev-client@0.2.8');
+  api.use('akryum:vue-component-dev-server@0.0.6');
+  api.use('akryum:vue-component-dev-client@0.2.9');
 });