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

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.

Heroku config vars not accessible in node.js?

I have a couple of config vars set up in Heroku: baseURL, NODE_ENV and PROD_MONGODB.
However, trying to access the config var baseURL in my app, it comes up undefined.
Doing console.log(process.env); to see what vars are available gives me this:
{NODE_ENV: "development", PUBLIC_URL: ""}
Why don't some of the vars I set up for Heroku show up or are accessible? Am I missing something obvious?

the problem is that you have set Heroku config vars and it's all good for your production but your local app doesn't have access to those config vars. you need to create another .env file for your local environment vars.
On the root of your project create a folder and call it config
under config folder create a file and name it dev.env
you can set your environment variables here with key=value structure.
add config to your .gitignore file
for example, by setting up PORT=3000 in the dev.env file, you can have access to port 3000 when running your app locally and also have Heroku set its port to whatever it likes to be. Within your app, you only need to use process.env.YOUR_KEY which in this example will be process.env.PORT.
setting up environment vars can be a huge pain as every operating system has it's on way. you can use a npm node module env-cmd to overcome this problem.
first, install it as a development dependency by:
npm i env-cmd --save-dev
now open your package.json file and the blow script to use it on your development:
"scripts": {
"start": "node src/app.js",
"dev": "env-cmd ./config/dev.env nodemon src/index.js"
}
I have assumed that you're using nodemon and you have an index.js file in your src directory.
you can take a look at this answer for Heroku config vars if you need.
https://stackoverflow.com/a/55233621/7274342

Without seeing any of your code, assuming you set the config vars properly, and assuming you are trying to access them via the web and not through your localhost, I would guess that you are attempting to access the config vars client-side. You must bring them in server-side, then distribute them accordingly on the client end.

How to create my own scripts in node.js

I am building an nodeapplication, it has 3 environments names are development,testing and production. Each environment has their own hostnames and port numbers. like in the following way
{
"development":{
"host":"develop.com",
"port":"2000"
},
"testing":{
"host":"testing.com",
"port":"2001"
},
"production":{
"host":"production.com",
"port":"2002"
}
}
While running my node application, I used to pass environment name as a command argument. like
node server.js development
(or)
node server.js production
Instead of running application manually along with environment name, I want to implement with node scripts, so I have tried in the following way.
package.json
{
"developemnt":"node server.js development",
"production":"node server.js production",
"testing":"node server.js testing"
}
What I thought, Instead of node server.js development, I can run npm development. This way I have made it, but it's not working. Regarding this, I have read npm script documentaion, as per documentation It's not possible,so is there any way to implement this.
Thanks

For scripts that are not "default scripts" (the ones listed here), you need to use the run parameter with npm:
npm run development
npm run testing
npm run production
More details here.

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.