For the life of me I can't get Browser Sync and Nodemon to run nicely alongside my Express server. I have tried every combination I can imagine.
My Express server runs at port 5000 which I can open and view, nodemon runs when changes are made, great but the browser still doesn't 'hot refresh' so to speak. I would like for the browser window to either refresh or open a new tab after nodemon has restarted the server.
package.json scripts
"scripts": {
"start": "node app.js",
"dev": "set NODE_ENV=DEV&& nodemon app.js 5000 browser-sync start --proxy localhost:5000 -e * --ignore=node_modules --reload-delay 10 --no-ui --no-notify",
"ui": "node app.js browser-sync start nodemon app.js --port=5001 --proxy=localhost:5000 -e * --ignore=node_modules --reload-delay 10 --no-ui --no-notify",
"ui2": "nodemon start & browser-sync start --proxy 'localhost:5000' -e * --ignore=node_modules"
},
I just want to start my express server, listen for changes with nodemon then restart, then either reload browser window or launch a new one to see the changes. Please help me understand what I am missing?
In case someone has the same problem, the aha moment was when I realized I needed to open a 2nd terminal window to run browser-sync. And using the below scripts in package.json now works beautifully!
So first run npm run start/dev depending if you want server restarts on changes or not then open a 2nd terminal window and run npm run ui`. In my case my app.js is launching on port 8000.
package.json
"scripts": {
"start": "node app.js",
"dev": "nodemon -e * app.js",
"ui": "browser-sync start --proxy localhost:8000 --files=**/* --ignore=node_modules --reload-delay 10000 --no-ui --no-inject-changes"
},
app.js - const port = process.env.PORT || '8000';
This can be run (npm start) in parallel with modules "npm-run-all" or with "concurrently" (replace start: string with start_b string).
"scripts": {
"browsersync": "browser-sync start --proxy localhost:5000 --files 'public,views'",
"nodemon": "nodemon server.js",
"start_b": "concurrently --kill-others \"npm run nodemon\" \"npm run browsersync\" ",
"start": "npm-run-all -p nodemon browsersync"
},
In my system, I had problems tracking .njk files, because the browser reloaded after changing them but without actually updating changes. I had to use a nodemon.json file to add the folder (views/) and extension .njk:
{
"watch": ["server.js", "views/"],
"ext": "js, css, njk"
}
Related
I am having an interesting problem building my typescript server using nodemon. I have a script for building out the ts files, and then starting the server. However, when I run these two concurrently, it starts at first fine, then after it is done building, it restarts, but gives me an error that the port is already in use. Is there a way to somehow kill the port each time before it starts?
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start:dev": "nodemon dist/index.js",
"build:dev": "tsc --watch --preserveWatchOutput",
"dev": "concurrently \"npm:build:dev\" \"npm:start:dev\""
},
I have tried adding "npx kill-port 8080 && nodemon dist/index.js" to the start:dev, but I am still getting that error. I have also tried "npx kill-port 8080; nodemon dist/index.js" Is there a solution to this issue? Thanks.
Edit: It seems that this is actually working as I expected it too however, for some reason the terminal is still showing an error message and therefore, anything my server logs to the console is hidden. Is there any way to fix this? Thanks.
I am not sure why exactly you get a port error, but you can improve your setup. Nodemon can run typescript with ts-node help.
Just install ts-node and run nodemon with --exec 'ts-node' property.
Example from my package.json:
{
"dev": "nodemon --watch 'src/**/*' -e 'ts' --exec 'ts-node' src/index.ts"
}
I'm rather new to this area, so please excuse if this question is completely basic. I've seen some tutorials use nodemon to watch files, and restart servers on Nodejs backend. I've seen others use webpack to watch files such as create react app on frontend. Can you actually use nodemon to watch files and refresh pages on the front end?
Yes I believe you can set it up with your package.json scripts!
For instance with a node server with a create-react-app within a client folder you could declare a start script along the lines of:
"start": "concurrently \"nodemon server.js\" \"cd client && nodemon start\""
Then when you run npm start this will run nodemon on both the server file and the client folder
Just be aware this assumes your server file is named server.js and your client files are in a folder named client and will require you to have the concurrently dependency installed.
You could use something like this one if you already have create react app within a client folder.
"server": "nodemon server.js",
"client": "cd client && yarn start",
"dev": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\""
Concurrently allows us to run both on one terminal as well as it allows us to pass --kill-others-on-fail which means that if one breaks (control + c on mac), the other one will also break
Trying to streamline my package.json and local development with a custom script to run Nodemon. I'm currently building an app with a front and back end I need to call mongod before start and before my custom in two tabs however I'm running into an issue.
mongod will only run in the terminal if the terminal path is set to local from testing and I've read:
Correct way of starting mongodb and express?
npm starts to execute many prestart scripts
How to npm start at a different directory
How do I add a custom script to my package.json file that runs a javascript file?
I can use prestart as:
"scripts": {
"prestart": "cd && mongod",
"start": "node app",
"nodemon": "./node_modules/.bin/nodemon app"
}
but I'm not seeing how I should chain a prestart with a custom scripts. When I try to chain it with nodemon as:
"scripts": {
"prestart": "cd && mongod",
"start": "node app",
"nodemon": "cd && mongod && ./node_modules/.bin/nodemon app"
},
Nodemon is fired first than mongodb crashes in my package.json when I call Nodemon as:
npm run nodemon
How can I start mongod before starting nodemon in my development process through one command in the package.json?
I want to setup nodemon to run the "prestart" script when server restarts, the reason, I'm using webpack and I want to build bundle.js every time a file changes, I'm not using webpack-dev-server cause I don't know how to set it up with an existing node app running, I got my backend on node.js, help on that will be appreciated.
The way I've been working is: run npm start every time I make a change on the code, but that too much effort.
Here's the scripts object at package.json so that you have an idea of what's going on:
"scripts": {
"bundle": "webpack --config webpack.config.js",
"prestart": "npm run bundle",
"start": "node server.js"
}
The way I've accomplished to do that is by creating a nodemon.json file with the exec property:
{
// ... Other conf (see an example in https://github.com/remy/nodemon/blob/master/doc/sample-nodemon.md)
"watch": [
"app" // Set your directories/files to watch
],
"exec": "npm run prestart && node server/index.js"
}
I have this start params in package.json
"scripts": {
"start": "node bin/www"
},
It is running my express app when I am typing npm start.
But I want browser opened http://localhost:8081 at the same time. How can I say to start to open my local url as well?
like: "start": "node bin/www, http://localhost:8081"
So when I am typing npm satrt it runs my express app and opens the url at the same time.
As far as I know it's like writing a bash command:
// Windows
"start":"start http://localhost:8081 & node bin/www"
// Mac
"start":"open http://localhost:8081 && node bin/www"
// Linux
"start":"xdg-open http://localhost:8081 && node bin/www"
For cross-platform support use open-cli.
Install it:
npm install --save-dev open-cli
Add it to your scripts:
"start": "open-cli http://localhost:8081 && node bin/www"
You just need to use start in the right order!
"start": "npm run dev & start http://localhost:8000",
Bad
"start": "start http://localhost:8000 & npm run dev",
Good