Why do I have blank page when serving VueJS 3 build with ExpressJS? - express

I have a web application, coded with VueJS 3, that runs well with npm run serve and npm run build; npx serve -s dist.
My problem is that, when serving the build files with ExpressJS and my NodeJS application, I can see in my browser that I successfuly downloaded all the required elements, but the only thing I get is a blank page, with no error.
I expect to see my application working, as it does with serve, or npm run serve. I launch my NodeJS application with npm run dev. Is it a problem?

Related

Why am I getting 'Cannot GET' in localhost for Vue npm run serve

I installed Vite build tool for Vue and when I ran it (npm run serve), I got an error that generated the following message
"Missing script: "serve"".
After a little research, I learned that my package.json was missing the serve key.
After I added it ("serve": "vite preview") and ran it, I received the following error in the browser
"Cannot GET /"
preview is for when your app is already built (with npm run build), it's to check the static result. At the end, serve is the name that was used with Vue2's CLI for preview.
If you want to work locally with it, simply run npm run dev.
More info available on Vite's documentation.

Vue CLI 3 - npm run serve vs serve -s dist

I've a simple vue app created with vue cli 3. When I use npm run serve command over VS Code I can display application over http://localhost:8080 with no problem. I'm using following commands to serve dist folder over localhost.
npm run build
serve -s dist
After above commands, I supposed to display application over http://localhost:5000 but I'm getting following error on IE11 and application works fine on chrome.
SCRIPT1002: Syntax error
paginator.js (11,1)
Here is the paginator.js codes which IE11 gives error.
11 class Paginator {
12 constructor(screen) {
13 this.pointer = 0;
14 this.lastIndex = 0;
15 this.screen = screen;
16 }
What is npm run build doing and why does application run with no error after npm run serve command but does not run after npm run build command in IE11?
I have polyfills installed so that I can use application on IE11 after npm run serve and here is my script tag from PolyFill.io
<script crossorigin=anonymous src="https://polyfill.io/v3/polyfill.min.js?features=Symbol%2Ces2015%2CArray.from"></script>
npm run build minifies/compacts your source, and creates a dist subfolder. Your issue is likely that IE11 isn't able to handle the minified JS.
Minified JS looks like this:
(function(t){function e(e){for(var n,r,l=e[0],i=e[1],c=e[2],p=0,u=[];p<l.length;p++)r=l[p],Object.prototype.hasOwnProperty.call(o,r)&&o[r]&&u.push(o[r][0]),o[r]=0;for(n in i)Object.prototype.hasOwnProperty.call(i,n)&&(t[n]=i[n]);d&&d(e);while(u.length)u.shift()();

npm run serve errors with completing task manager. Won't complete and run on local browser

I am having difficulty with npm run serve for a tutorial I'm doing through Udacity. For some reason, the npm task manager keeps breaking when trying to run the BABEL and Browserify tasks and will not complete serving on any port. Would love to get this resolved.

Run a Vue.js project in server without " npm run dev " command?

After installing vue cli globally by running npm install -g vue-cli, I have installed all the modules in the project folder "myBlog" by running npm install and can run the project in my local environment by using npm run dev. But when I am going to move this project in the live server is this is the right way to run the batch program (npm run dev) continuously or there are other ways to run the project without running npm run dev continuously?
It's not Vue specific but you also should be able to run npm run build which generates production bundles in /dist subfolder of your project. You are supposed to copy this folder to the production server and configure the server so that it serves dist/index.html for every URL.
If you are using the "webpack", "webpack-simple" or "pwa" template there is a dedicated command for creating the production build, which allows a static hosting (with no need to run any npm process in the server):
npm run build
It will create a dist folder which content you can upload to the root of your server.
Some more info about:
"webpack" template:
https://vuejs-templates.github.io/webpack/commands.html#npm-run-build
"webpack-simple":
https://github.com/vuejs-templates/webpack-simple#webpack-simple
"pwa": https://github.com/vuejs-templates/pwa#whats-included
Very simple. To launch a VueJs project, you must type "npm run serve".

webpack-simple routing not working in production mode

I am using webpack-simple template for development with vue-js 2. I am using routing throug vue-router. It works fine in the development mode
npm run dev
After building, I got build.js in the dist folder using the below command
npm run build
With index.html and dist folder, I try to run the project but fail. No error found in the console also