Develop Reference

How vue.js cli command "npm run serve" work

After running npm run serve it gives an address like http://localhost:8080 and it works, this address is targeted the root folder of local server but my project exists another folder like http://localhost/vue
And my question is how the address http://localhost:8080 works and where is the actual index.html? Since my actual project placed in localhost/vue folder! and the address should be http://localhost/vue

I think you are a bit confused on what is going on in the background when you use serve.
When you are running the command npm run serve, your project is getting built by Webpack and then "served" via a local http-server. This server is using your project's build folder as it's root.
It seems like you have created a folder named localhost as out of your comments here. http://localhost is not a folder called "localhost" in your computer. In fact, it is just a name for your internal ip: 127.0.0.1. You can test this by going to 127.0.0.1:8080 and seeing this is the same as http://localhost:8080
in programmatic terms, one could say the following:
localhost == 127.0.0.1
That out of the way, you seemt to also expect there to be a sub-folder named vue, since that's what you have in your localhost folder. Knowing the above; http://localhost is not a folder localhost on your pc. It is however the folder the http-server has chosen, in this case, vue chooses the folder /dist inside your project folder.
Example: Your project folder has the following path: C:\Users\Admin\Documents\myProject
When you then run npm run serve in that folder, the vue http-server will serve (host) the folder C:\Users\Admin\Documents\myProject\dist
This means http://localhost == C:\Users\Admin\Documents\myProject\dist\index.html
However, if your goal here is to have your project served as: http://localhost/my-custom-sub-folder
You will have to edit the vue.config.js for your vue project by adding: publicPath
vue.config.js example:
module.exports = {
publicPath: '/my-custom-sub-folder',
};

the index.html file should be by default placed at the root of your project in the "public" folder

Not running at local when "npm run serve" command in vue project

I was trying to make some app with vue and installed npm command.
when I run "npm run serve" command, I get the following messages.
It seems that I was supposed to run app at "http://localhost:8080/" and was able to access sample pages, not like "x86_64-apple-darwin13.4.0:" stuff.
is it possible to solve this with changing config file or something ?
App running at:
- Local: http://x86_64-apple-darwin13.4.0:8080/
- Network: http://x86_64-apple-darwin13.4.0:8080/
Note that the development build is not optimized.
To create a production build, run npm run build.
I am supposed to access to http://localhost:8080/ and would get some sample pages.

It seems like your host environment was set to x86_64-apple-darwin13.4.0, you should be able to set the variable in your bash_profile like this
HOST="localhost"
after that reload the environment with source ~/.bash_profile

Looks like you can find an answer to your question here - https://forum.vuejs.org/t/npm-run-serve-is-not-defaulting-to-localhost/88007/13.
In a short:
Add vue.config.js file in a root (same level as package.json file) if you don't have one
Add the following settings to vue.config.js
module.exports = {
devServer: {
host: '127.0.0.1',
port: 8080,
public: 'localhost:8080',
}
}

Next JS npm start app load 404 page not found error for physical pages

My project works well with run dev command but when I try to npm start I got 404 page not found error for other pages (pages/...) except Index.js.
I tried several ways which I found from forms(gthub issues, and blogs), but nothing worked.
Any Idea? Actually why there should be difference between run dev and start? I think we should see whats wrong in our app during the dev process
the scripts from package.json
"scripts": {
"dev": "next",
"start": "next start",
"build": "next build"
},
and next.config.js
const withCSS = require("#zeit/next-css");
module.exports = withCSS({
cssModules: true,
cssLoaderOptions: {
importLoaders: 1,
localIdentName: "[local]___[hash:base64:5]"
}});
As you see I didn't change anything after installing nextJS.

I found out that if the filenames have uppercase letters on Windows, you get a 404 error.
I changed all filenames to lowercase characters and the 404 errors went away.

First, you need to understand what kind of app do you want to build.
Is it serverless? or kind of with server and what web server do u want to use (there are so many options).
For serverless app:
All you need to do for production build is next export, this function will generate static files to be served as your website. Read more here...
For app with server:
If you want to run npm run start, you need to do npm run build first.
npm run build compiles and optimizes your build for production mode.
npm run start run your web server to serve your html files.
If you have done those two steps, it means something wrong with your server files, your web server's API didn't listen to the request, therefore it doesn't redirect you to the correct page.

Before starting your application you need to build using npm run build command and then start your application.

nodejs bootstrap project works local only

Ive been trying out different things, and looking up various ways to solve it, but I'm in need of some extra hints to make this work.
I have a working NodeJS Bootstrap project with Gulp. My website functions locally.
So in my project I have the fiollowing files (among other folders) :
gulpfile.js
index.html
package.json
When I locally run my project via 'gulp dev' everything seems perfect. On Heroku after deploying it gives me the error: npm ERR! missing script: start
This makes sense, because indeed my package.json doesn't have a start script. How can this work on local?
any leads?
thanks

node.js file
name it index.js
first before you start move all the current files into a new folder called public in the parent folder above public create the file index.js
once you are in the parent folder above public run this in the command line for the directory where you created the index.js file
npm i express --save
this will install a mini framework for node.js and save it to the project.json config
for the index.js file this is the content
/// START
var express = require('express');
var path = require('path')
var app = express();
var port = process.env.PORT || 80;
// this allows the files to be visible without having to type in the
// index.html for the url simply do / and you'll get the url
app.use(express.static(path.join(__dirname, 'public'),{
extensions: ['html']}
));
app.listen(port);
///END
you need to make sure that the index.js (node file) is in 1 folder above the rest of the project. The project should be in a folder called public in this case
before you upload this to the heroku get it working on your local machine
you need to run node index.js if you get any errors we can work through them but this is a really generic static serving node.js server.
last thing you need to do is go into the project.json file and add the following you can add it right above "title" in this case so it's easy to find later
"scripts": {
"start": "node index.js"
}

If the code is client-side, you should serve up the bundled HTML/CSS/JS in a static server. Doesn't make sense to run node just to serve up your static assets.

Ive never used heroku but for my node application that is hosted in AWS i had to add a start script to my package.json
"scripts": {
"start": "set NODE_ENV=production nodemon app.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
You can use similar node start commands if youre not using nodemon.

Reload Express.js routes changes without manually restarting server

I tried express-livereload, but it just reloaded view files.
Should I use another tool, or this one can be configured to watch for my index.js file which runs the server?
I read that options are the same as node-livereload, and default for watched files include .js files.
Any URL you know with a simple configuration?
My main problem is how to setup good development environment for Express.js, and I would like to inspect the variables when I am making a request, is painful to restart each time I make a change in a route.
PS I tried node-inspector to inspect variables when server handles a request, but it seems node-inspector is not intended for that, right?

I think Nodemon has what you're looking for.
Nodemon is a utility that will monitor for any changes in your source and automatically restart your server. Perfect for development.
Example invocation:
nodemon index.js

I use express.js, normally start server by
npm start
with Nodemon installed, I use
nodemon --exec npm start
Note: nodemon app.js will NOT work here,
because express.js use start script
To install nodemon
npm install -g nodemon

You can livereload both front and backend changes to the browser using 'livereload', 'connect-livereload', and 'nodemon'. Also, this way you don't need Gulp or Grunt. Here's how they work together:
livereload opens a high port and notifies the browser of any changed file
connect-livereload monkey patches every served HTML page with a JavaScript snippet that connects to this high port
nodemon restarts the server on any changed backend file
Set up livereload in Express
Set up Express to both start livereload server watching the public directory and ping the browser during nodemon-induced restart:
const livereload = require("livereload");
const connectLivereload = require("connect-livereload");
// open livereload high port and start to watch public directory for changes
const liveReloadServer = livereload.createServer();
liveReloadServer.watch(path.join(__dirname, 'public'));
// ping browser on Express boot, once browser has reconnected and handshaken
liveReloadServer.server.once("connection", () => {
setTimeout(() => {
liveReloadServer.refresh("/");
}, 100);
});
const app = express();
// monkey patch every served HTML so they know of changes
app.use(connectLivereload());
Start Express with Nodemon
Start the server with nodemon, for example, with a dedicated watch script by running npm run watch.
The key point here is to ignore the public directory that's already being watched by livereload. You can also configure files with non-default extensions, like pug and mustache, to be watched.
"scripts": {
"start": "node ./bin/www",
"watch": "nodemon --ext js,pug --ignore public"
},
You can read a longer explanation in "Refresh front and backend changes to browser with Express, LiveReload and Nodemon."

It might interest you to know that since the release of Node.js V18, Node.js can automatically restart a server upon making a change to the index.js file.
To use the feature, run the server with the following command:
node --watch index.js
Note: At the time of writing, the feature is still experimental.