Run node server and webpack together using package.json

Question

I have completed todo app by learning from this video:

Super MEAN Stack Tutorial: Angular, Node/Express, Webpack, MongoDB, SASS, Babel/ES6, Bootstrap

In that video at time 19:18 at this url it is taught that I should use the below two commands in seperate git-bash instances if I want to run it in windows using npm run dev:

node server
webpack-dev-server --progress --colors

But in Linux (or any other OS than windows) you can use this script:

"Scripts": {
    "start": "NODE_PATH=$NODE_PATH:./src node server",
    "dev": "npm start & webpack-dev-server --progress --colors"
}

So, Is there any way I can do the same in windows?

Also, In that tutorial I can see that port no. 3000 is assigned to node server, but due to using dev dependencies he runs the localhost:8080 in browser. You can see that here. After the tutorial finishes, I followed along and created that app. Now I would like to deploy it. So, I would first like to learn to run test my site in non-dev dependencies mode. i.e. when I type localhost:3000 in browser, my app should run successfully. So, can anybody explain the steps for that?

Update:

I am a newbie in node.js. I watched many videos on node and tried to learn something from that. In all the videos I see that I run node server on port no. 3000 and then I type localhost:3000 in my browser. Now lastly I watched video about mean stack in which he uses webpack. Now, I am confused. I think there are two servers running. first server is webpack's server and second server is node's server. Upto today I typed localhost:3000 in my browser because I mentioned that port 3000 will be used by node in my code. But now in the video he is running localhost:8080 in browser. It means webpack's server is used. Then what happened to node server. Why can't I just run localhost:3000? Also in the video it is explained that webpack is a dev dependency. So, I think after the app is completed and ready to be deployed, my project can be run on the node server (by making some changes to the code, I am not sure). Let's take an example. Now I don't want to deploy the app to a real server. I want the same app to run on my friend's pc. He is not a developer. So, he should not depend on webpack as webpack is a dev dependency. So, he should be able to run the app on node server instead of webpack's server. So, he should type localhost:3000 instead of localhost:8080. That's what I don't understand.

Answer 1

Let's break this down:

1. If you've defined this script:

   "Scripts": {
       "start": "NODE_PATH=$NODE_PATH:./src node server",
       "dev": "npm start & webpack-dev-server --progress --colors"
   }
   

2. ... then this npm command: npm run dev

3. ... actually invokes these two actions:

   a) npm start & # Runs NPM in the background

   b) webpack-dev-server --progress --colors # Concurrently runs webpack in the foreground

You can accomplish the same thing in many ways using Windows, starting with a simple .bat file like this:

4. EXAMPLE: RunDev.bat:

   start npm start
   webpack-dev-server --progress --colors
   

=======================================================================

STRONG SUGGESTION:

1. Please forget about watching videos for a few moments. Try a couple of "hello world" tutorials. More importantly, play with the actual code. Try changing things in the code, and see what happens.

2. Forget about webpack, at least for the moment.

3. Think of npm as a "build tool"; not as a way to run your application. At least for a moment.

4. Focus on "node". Write a "node application".

5. Part of your "node application" will require "ExpressJS" and "Jade" (now renamed "pug" - I'm still using "Jade"). Use npm to get your ExpressJS and Jade dependencies, but stay focussed on Node.

SUGGESTED TUTORIAL:

A Simple Website in Node.js, Ben Gourley

6. Be sure to:

a. Download the code

b. Work through the tutorial, using the downloaded code

Please post back (a new post) with any specific questions you might have as you work through the tutorial.