How to run Vue.js node app after production build by WebPack


#1

How to run the following via node in production? Only have index.html. I can view the site if I run under a web server (e.g., nginx) (as the output from WebPack says to do), but I want to run my final app using pm2, or running node process.

Using the Vuetify WebPack template, when I run the npm run build for production ( in package.json: “build”: “node build/build.js”) the output is as follows:

$ ls
index.html static/

&

$ ls static/js/
app.f7301c212bc5fefd6563.js manifest.2ae2e69a05c33dfc65f8.js vendor.1aae36aa0dc798d4d36d.js
app.f7301c212bc5fefd6563.js.map manifest.2ae2e69a05c33dfc65f8.js.map vendor.1aae36aa0dc798d4d36d.js.map

How do I run this via node and/or pm2?


#2

What do you mean by “run this via node”? These are static files meant to be served by any web-server - like apache, nginx, whatever.

Node is not a web server, it’s just a javascript runtime, but there are web servers written with node (e.g. http-server). So you could do this.

npm install -g http-server

# in the folder where index.html is:
http-server ./

#3

Thanks much for the reply. I appreciate you taking the time.

This is my first deploy of Vue.js into production (and, using JS and node for back-end). When I ran the webpack build I was expecting a .js output (for example ‘build.js’) to run via node or pm2 (npm start that runs ‘node build.js’ or pm2 start build.js). I suppose this will work for serverless, but was looking to run via pm2 (with nginx as proxy) as the app will have other factors (e.g., MongoDB) that won’t allow running in serverless (e.g., AWS Lambda).

Would this be a matter of just re-configuring WebPack to output to a .js file (build.js), or will the static files (served via a webserver, nginx/Apache/http-server) allow for the same functionality? That is, will there be any factors that would limit my app by running as static verses via ‘node build.js’ or ‘pm2 start build.js’, (for example, will my API connects to the back-end still work (back-end being node/JS))?


#4

You misunderstand what vue-cli is meant to do. It does not create a node program that you can run on the server.

It creates stastic assets meant to be srved from a web server. Just like you would serve any other .js .html file that you wrote by hand.

There’s no special deployment requirement for a project bundled with vue-cli compared to, let’s say, a project written in jquery and processed with gulp, for example.


#5

Thanks much LinusBorg. I believe I understand more now based on your reply. I took the index.html and static directory and put up on AWS S3 and had no issues viewing the site. I suppose I’ll need to create an EC2 instance (a Linux server) for the MongoDB and run API calls from code on S3. Thanks. (p.s. I know my question may be outside of the Vue.js discussion for this forum, so I appreciate you taking the time to answer).


#6

I’ve used http-server to run my vue.js built project to run on 127.0.0.1:8080, then used nginx proxy to access it and serve it on internet. But I think it is twisted. Can you help me run vue.js dist folder spa application just using nginx?
Thanks in advance.