Can anyone help me understand how to use BrowserSync with an already running node server?
I know that I have to proxy the server localhost:3000 but where and how would I do that?
Since I'm not using Gulp/Grunt my best guess is proxying a running BrowserSync with express.js but what would that look like?
EDIT:
#RunnyYolk's answer is correct, The best way is to create a script in the package.json file that has BrowserSync proxy your node server. However the issue is more specifically how to use BrowserSync when you need to wait for a process to finish first, such as Angular compilation, then reload your browser.
My build process looks like this:
"build": "del-cli public/js/app && webpack --config webpack.config.dev.js --progress --profile --watch",
How do I call browser-sync reload after that webpack compilation?
I've had browser sync running with a few Node projects. I remember it being a little bit of a fiddle the first couple of times, but definitely worth the effort.
I can't remember exactly what I got caught on, but try these things and let me know if it's still not playing:
Assuming browser-sync is installed, make sure your app.js file (or whatever you've called it) has the server listening on port 3000.
Start the app with a command similar to this:
browser-sync start --proxy localhost:3000 --files="public/stylesheets/*.css", "public/scripts/*.js" "public/views/*.ejs" --no-notify
That works for me. "--files" is a list of files for browser sync to watch, and --no-notify gets rid of some notifications that get fired on each file change - possibly useful in some situations, but I found them annoying.
Looking at this command I notice that there is no reference to node app.js to start up the app. I assume (although I'm not certain) that bowser-sync looks inside package.json for the "start" script. So if my assumption is correct, and if the above command isn't working for you, check that your package.json file has the script included.
Related
When I save changes to my client-side code, the browser hot-reloads as expected. But when I make changes to my server code, no hot-reloading occurs. This is a problem because we want to just run 1 command (i.e. npm start) to launch our React webpack-dev-server AND our API server, and rerunning the entire npm start to manually relaunch the server after changes is slow (because it unnecessarily relaunches the React dev-server as well). Also sometimes we forget to relaunch the server code, so in reality it should just hot-reload anyway.
I've looked across the internet and surprisingly can't find any straightforward solutions. I feel like I shouldn't have to eject the entire project and go deep into the webpack configurations to get this to work.
This is what the npm start portion of my package.json looks like now:
"scripts": {
46 "start": "concurrently --kill-others \"react-scripts start\" \"node server.js\"",
...
}
Is there perhaps a way I can do "react-scripts start" with a different target or something?
I've looked around and had a lot of trouble figuring this out. I'm hoping someone might be able to point me to a post or have information on how to do this.
My problem is that I have 2 projects I've made using WebStorm:
I have 1 application that is my server-side code running on port 3000. It's a simple Node Express app.
The second application is an Angular 4 / Ionic 3 application running the client side on port 8100.
I want to run my server application in debug mode, so that it hits the breakpoints for all the data being sent from the client side app.
For example: Angular / Ionic app sends a get request for all clients for a given customer. The customer is sent via url parameter. I want the server code to pause when it receives this request and so I can see this URL parameter. Fairly simple.
The server is also using grunt to build the project, and nodemon to watch it. I'm using some npm scripts to make life easy. Here are the scripts:
"scripts": {
"dev": "SET NODE_ENV=development && nodemon ./bin/www",
"grunt": "grunt",
"start": "node ./bin/www"
},
Nothing fancy.
I have WebStorm configured to run my scripts from hitting play. So the play button will first run the following sequence:
npm run grunt
npm run dev
Again ... nothing fancy.
Now how do I get this thing to setup a debugger so I can listen in WebStorm? I have a both projects open in separate windows, and I am initiating the calls to the server from the client. How do I make the break points grab hold and show me the data coming into the server?
I feel like this is incredibly easy and I'm missing something really stupid. Any help would be much appreciated.
You need starting you server in debugger to get breakpoints in your server code hit. If you prefer to start your app via npm script, you have to add $NODE_DEBUG_OPTION (or %NODE_DEBUG_OPTION% on Windows) to make sure that Node.js is started with appropriate debug options (--debug-brk, --inspect-brk, etc)
So:
in package.json, modify your dev script as follows:
"dev": "SET NODE_ENV=development && nodemon %NODE_DEBUG_OPTION% ./bin/www"
right-click your package.json, choose Show npm scripts
right-click dev script in npm tool window that opens, choose edit 'dev' settings to create a run configuration.
open your source files in editor, add breakpoints
press Debug to start debugging
run your client app, initiate the calls to the server
I am running the webpack / webpack-dev-server portion of the base Vue.js Webpack template (https://github.com/vuejs-templates/webpack/) inside of a docker container I created. The container also contains the vue CLI in order to create new projects (you can get my container here if you want: https://hub.docker.com/r/ncevl/webpack-vue/).
Hot-reload does not work after moving from the webpack-simple template to this one.
Everything was working using the Webpack-Simple template which you can clone / see over here: https://github.com/vuejs-templates/webpack-simple
I was able to get the simple template running (with hot-reload working as intended) with the following webpack-development-server launch command:
webpack-dev-server --hot --inline --progress --host 0.0.0.0 --watch-poll
That said the full (not simple) version of the webpack template does not appear to use a webpack-dev-server launch command and instead appears to use additional middleware as referenced in build/dev-server.js (https://github.com/vuejs-templates/webpack/blob/master/template/build/dev-server.js) and the webpack dev config.
Since the --watch-poll was the key to getting the WDS hot-reload functionality to work within a docker container in the last project, my thinking is that I need to do something similar with the webpack-hot-middleware but I dont see anything in their docs (over here: https://github.com/glenjamin/webpack-hot-middleware) that talks about changing to a polling based approach.
I am not 100% sure the polling flag will do the trick since I can see the container recompile my source when I make a change. I can also see the change in my browser if I refresh it manually.
Whats stranger still is if I inspect my page in browser within chrome dev tools, and then head over to network / XHR I can see that the browser actually does receive information from the webpack-dev-server, but visually it does not update.
Give the above I assume websockets (or socket.io which I think is used) are working and communicating between the browser and the WDS so maybe this is a browser caching issue of some sort?
I checked in my console and found this so it is looking like a header issue:
For reference the text error from that image (to make it easier for anyone having the same issue to find this post) is:
EventSource cannot load http://__webpack_hmr/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://0.0.0.0:8080' is therefore not allowed access.
Again the Hot-Reload / Hot Module Reload was working with this identical container setup when using the webpack-simple Vue.js template.
I am wondering if anyone has run into anything similar or has any ideas on how to add the polling option . I guess my alternative would be roll back to a more basic webpack config and rebuild that portion of things to use the traditional webpack-dev-server / webpack config but give the above I am not sure that is going to fix it.
I am adding this as a separate answer since it more specifically answers the question in the title, while my other answer more specifically explains what solved my actual problem.
The vue.js webpack template project (which can either be init'd from the Vue CLI or pulled from its repo over here: https://github.com/vuejs-templates/webpack) separates its config files into several different directories.
I am posting this answer so that anyone who runs into the need to add polling to their project will be able to understand how / where to do that.
The base project structure for a Vue.js webpack template project looks like this:
The files that you care about if you are messing with trying to get hot module reload working are related to creating your server primarily with webpack-dev-middleware. The most important files related to that are highlighted here:
Basically if you want to add the polling code to the webpack-dev-middleware server you need to be in the /build/dev-server.js file on lines 20 to 24 that look like this:
var devMiddleware = require('webpack-dev-middleware')(compiler, {
publicPath: webpackConfig.output.publicPath,
quiet: true
})
To add polling you would add it just before or after quiet: true. As a side note, if you are having trouble with HMR I would change "quiet:true" to queit false to get a more verbose read out of whats going on from webpack-dev-middleware. I have included verbose and polling modifications to the above code here:
var devMiddleware = require('webpack-dev-middleware')(compiler, {
publicPath: webpackConfig.output.publicPath,
quiet: false, //Changed to for additional verbosity
watchOptions: { //Add Polling
aggregateTimeout: 300,
poll: 1000
}
})
My other answer is in regards to what ended up solving my problem, not necessarily how to actually add polling (which might be necessary for someone else but did not end up being needed to make my dockerized setup work).
It should also be noted that sometimes when HMR (webpack hot module reload) is not detecting changes it is due to the fact that webpack-hot-middleware or webpack-dev-middleware is running into an issue whereby some invisible characters are / were added to the name of the base project directory (probably by someone building the base Vue project) and therefore webpack on certain OSes is not able to see the changes.
If that happens to you and you are on OSx or running webpack inside of a docker container and you can't get HMR to detect changes, try to rename your vue-webpack project directory and it should work.
Ok. So I can't really take credit for this one since it was actually answered by Discuss user Cristian Pallarés over here: http://webpack.github.io/docs/webpack-dev-server.html#combining-with-an-existing-server
Christian says:
I was just trying the same. I just use "php artisan serve" on localhost:8000, and Webpack Dev Server on localhost:3000. You should make this:
set your webpack config "output.publicPath" as "http://localhost:3000/static/" instead of "/static/"
make your php application load this:
The key is the output.publicPath being absolute. Now, you should run "php artisan serve" and launch your webpack dev server too (in my case I use gulp).
Basically I took that and dug through the Vue.js Webpack Template files to locate the config file where webpack was looking for the public path. the public path setting ended up being in the index.js file located in the /config directory of the template.
I changed my code to look like this:
assetsSubDirectory: 'http://localhost:8080/static/', //!!Changed from /static/
assetsPublicPath: 'http://localhost:8080/', //!!Changed from /
As opposed to the previous setting which DID NOT WORK and looked like this:
assetsSubDirectory: '/static/',
assetsPublicPath: '/',
After that I was able to see my changes hot reload while running the vue.js Webpack template from within my docker container.
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.
Let's break this down:
If you've defined this script:
"Scripts": {
"start": "NODE_PATH=$NODE_PATH:./src node server",
"dev": "npm start & webpack-dev-server --progress --colors"
}
... then this npm command: npm run dev
... 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:
EXAMPLE: RunDev.bat:
start npm start
webpack-dev-server --progress --colors
=======================================================================
STRONG SUGGESTION:
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.
Forget about webpack, at least for the moment.
Think of npm as a "build tool"; not as a way to run your application. At least for a moment.
Focus on "node". Write a "node application".
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
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.
I been searching alot and no result with same problem as me.
I have a Node.js application and I want to start it with forever start app.js, the process starts but no website found when i try in browser. The process is in the list when I write forever list.
Npm start works fine but I cant use nodejs/node app.js or my_file.js.. It gives no error or something just new command line with no output in terminal.
So anyone know why I cant start the app with nodejs app.js or forever start app.js .. No files works.
Thanks!
In express 4 you should write :
forever ./bin/www
And if you check your package.json file you can see :
"scripts": {
"start": "node ./bin/www"
}
It's the npm start script
Alternatively, you can try using PM2.
It does a great job at keeping your app alive, and has some really useful features such as load balancing, no downtime, and a web interface to monitor your processes.
In addition, I find it dead simple to use.