Deploying Vue App Locally and Out of Sandbox

Question

Is there any way to deploy a VueJS app locally without having it limited by the browser?

I want the user to be able to call the application from the command line, for example app_name --port 6000, and then be able to load up the app from http://127.0.0.1:6000 or any other port they selected. The important thing is, the Vue App must be able to import and use native NodeJS modules, such as fs and zeromq.

please check this [post](https://stackoverflow.com/questions/52229626/how-to-deploy-a-vue-js-application-on-node/52230661#52230661) — Boussadjra Brahim, Feb 01 '20 at 16:38
@BoussadjraBrahim Thank you for your comment, but the linked suggestion is using a secondary ExpressJS process. VueJS doesn't have access to the native modules, and an API interface needs to sit between the two. — Mohammed Farahmand, Feb 01 '20 at 16:43
Vuejs or any other front end framework, cannot have a direct access to the hardware as long as they are running inside a browser environment. You can use **Electron** though, to wrap your Vuejs app into a desktop application. It also gives you a separate process exclusively for accessing your hardware. — evolon, Feb 01 '20 at 20:44
@evolon I was using Electron, but it comes along with a ton of stuff that I don't need. — Mohammed Farahmand, Feb 02 '20 at 13:21
Then you should probably bring up a simple node server and make requests from browser via http. — evolon, Feb 02 '20 at 13:24

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

Vuejs code must run in a browser environment in which you don't have access to your hardware. So basically you have three options to achieve this:

1. Use Electron

Electron gives you a chromium instance in which your UI (Vuejs) code can run and a separate process in which you can have access to your hardware using nodejs.

2. Create a simple http server with node

In this case you need to create a server with nodejs. For example you can create a file named server.js like this:

const http = require('http');
const fs = require('fs')

http.createServer((req, res) => {

   // Do something with fs
   const data = fs.readFileSync('path/to/some/file');

   // return back the data with http
   http.writeHead(200, {ContentType: 'text/plain'})
   http.write(data);
}).listen(8000)

And fetch the data in your Vuejs app with http like this:

export default {
  data () {
    return {
      myData: null
    }
  },
  methods: {
    onSomeAction () {
      const {data} = await axios.get('localhost:8000')
      this.myData = data;
    }
  }
}

Now in your package.json you can put this to run both when npm serve is called:

...

"scripts": {

  ...

  "serve": "node server.js & vue-cli-service serve"
}

3. Use Nuxt

In case you need to do something with your hardware ONCE, and BEFORE the render you can use Nuxt to access the hardware before rendering the Vuejs app and handing it over to your browser.

Deploying Vue App Locally and Out of Sandbox

1 Answers1

1. Use Electron

2. Create a simple http server with node

3. Use Nuxt