19

I have a dist folder containing CSS, fonts, JS folder and an index.html file minimized for Vue.js, ready to deploy and use. I want to use Node.js to run this application. How can I set this up to just run npm run server and have it deployed on a specific port requested? Not sure how to structure this or if I need to build it in a specific way to run this Vue app. Any help would be greatly appreciated.

2
  • in the development mode you are using npm run serve and you search another command to deploy? Commented Sep 7, 2018 at 22:21
  • I'm curious how to set this (dist folder/Vue App) up to run on a specific port. Doesn't matter if it is dev or production at this point. Just want to be able to view it, while it set up to run on Node using npm run (server or server-dev) script Commented Sep 7, 2018 at 22:44

1 Answer 1

38

Since Vue is only a frontend library, the easiest way to host it and do things like serve up assets is to create a simple Express friendly script that you can use to start a mini-web server. Read up quickly on Express if you haven’t already. After that, add express:

npm install express --save

Now add a server.js file to your project’s root directory :

// server.js
var express = require('express');
var path = require('path');
var serveStatic = require('serve-static');
app = express();
app.use(serveStatic(__dirname + "/dist"));
var port = process.env.PORT || 5000;
var hostname = '127.0.0.1';

app.listen(port, hostname, () => {
   console.log(`Server running at http://${hostname}:${port}/`);
 });

after that you could run :

 node server

and your project will be served at the given host and port

Assuming that you have already the dist directory, if you don't have it run :

npm run build

in order to generate it

Sign up to request clarification or add additional context in comments.

1 Comment

Perfect explanation. Exactly what I needed to get it going. I do use express for the back end, so this made a lot of sense. Thank you

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.