I have a package.json file at the root of my project folder which contains client and server folders.
in the root package.json I have the following scripts:
"scripts": {
"server": "npm run watch --prefix server",
"client": "npm start --prefix client",
"watch": "npm run server & npm run client"
}
but when i try to run npm run watch only the server script runs, what I don't understand is if I paste the contents of the watch script into the terminal it works just fine.
npm run <script> uses cmd.exe by default if you are on windows, and cmd does not support & to run commands in parallel, so it is better to use a package like npm-run-all.
Related
I'm using json-server as my local server for a nuxt project and i want to automatically launch the server and then run the project on another shell instance using "npm run dev"
in the scripts tag in package.json this is what i came up with :
"dev": "json-server --watch db.json --port 3004 & nuxt"
but this script only starts the server
try concurrently
npm install -g concurrently
"dev": "concurrently \"json-server --watch db.json --port 3004\" \"nuxt""
I have a React app in views folder. There is Root Folder contains model and controller and views. In that views folder. I have a React app. so, How can start both ??? Only I can run either root folder or react. Please help me. how to folder structure
No problem with folder structure, you can stay with this structure.
You can use an npm package called concurrently.
This package will help you run your backend and frontend simultaneously.
Install this package on your root directory.
Like> npm install concurrently --save
then inside your root package.json file(i am assuming you using Nodejs as backend and have nodemon package installed)
use this commmand on scripts > "scripts": { "start": "node index", "server": "nodemon index", "client": "npm run start --prefix client", "dev": "concurrently \"npm run server\" \"cd views && npm start\"" },
then from your root terminal type npm run dev .
Hope it will work.
If it didn't, then please stay with documentation of that npm package
I'm using typescript on my project and I can successfully watch + compile .ts files and output them to dist folder.
here is the scripts part of my package.json
"start": "npm run build && npm run watch",
"build": "npm run build-ts && npm run tslint",
"test": "cross-env NODE_ENV=test jest --watch",
"watch": "concurrently -k -p \"[{name}]\" -n \"Typescript,Node\" -c \"cyan.bold,green.bold\" \"npm run watch-ts\" \"npm run serve\"",
"serve": "nodemon dist/server.js",
"build-ts": "tsc",
"watch-ts": "tsc -w",
"tslint": "tslint -c tslint.json -p tsconfig.json"
The problem is I want to use js templating engine (nunjucks) and I need to watch the view files inside the views folder and move them to the dist folder.
Is there a way by just using npm scripts or nodejs?
Or do I need to use other tools like gulp or webpack?
I have the "same" request to for a CRUD graphql back-end server, but don't want to use gulp or webpack just to keep it simple.
I see that you use nodemon like me. Then, according the docs at https://github.com/remy/nodemon, it can be used it to monitor changes of any kind of file other than the default js. More over, nodemon can monitor the status of other transactional server other than node.
The first task is detecting the changes of wanted files: in my case I want copy the *.gql files in my src/schema folder to build/schema folder. For that, you can use the ext for the kind of files, and watch option for the source folder to explore.
The second one task is matter of copying the files. Naturally, you can use the copy command of your host OS. In my case I use the DOS xcopy command of the Windows shell (or cp in Unix like OS). nodemon has an "event-hook" with the event option, that can execute a command line when an event occurs. Just we need the restart event of the node server when the changes are detected for nodemon.
You can use the command line options, or a global config file, or in you local package.json project config file. I show up the last one using nodemonConfig section of package.json:
"nodemonConfig": {
"watch": [
"./src/schema",
"./build"
],
"ext": "js,gql",
"events": {
"restart": "xcopy .\\src\\schema\\*.gql .\\build\\schema /Y /O /R /F /I /V /E"
}
}
Ozkr's answer is great, I just want to add what worked for me, I had to change it a bit as nodemon was running into an infinite restart otherwise:
"nodemonConfig": {
"watch": [
"./views",
"./public"
],
"ext": "hjs,js",
"events": {
"restart": "cp -r views dist \n cp -r public dist"
}
}
copy-and-watch does just that:
I use this code to copy html files during development:
"copy_html": "yarn copy-and-watch src/mail_templates/* prod/mail_templates --watch --clean",
The package.json example at this link includes the following start commands:
"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
What explicitly does the above command do?
I think that the "concurrently \"npm run tsc:w\" \"npm run lite\" " means to start both tsc and lite-server simultaneously, and to also place a watch on the tsc so that changes are reloaded into lite-server immediately. Is this correct? And also, why call tsc twice? What is an explicit explanation of the entire line of code including all of its constituent parts put together?
You can break it down the command into parts (with quotes removed):
tsc
concurrently
npm run tsc:w
npm run lite
The first part calls the TypeScript compiler CLI and compiles your TypeScript files.
Next, there is an && which means "cmd1 then/and cmd2". The next section:
concurrently npm run tsc:w npm run lite
Uses the concurrently package CLI to run the given commands, which are npm run tsc:w and npm run lite. The part:
npm run tsc:w
This runs the script in your package.json:
"tsc:w": "tsc -w"
Then npm run lite runs the corresponding script in package.json:
"lite": "lite-server"
So you're technically calling tsc twice but tsc:w starts watching your TypeScript files. Using -w does not do an initial build, so the first tsc is needed to build your files initially, then -w watches your files and rebuilds subsequent changed files. The concurrent script then runs the watch script and the server.
I'm experimenting with setting up a dev environment to use NPM only, without the use of grunt.js or bower.js.
I followed this tutorial: http://beletsky.net/2015/04/npm-for-everything.html
I'm using nodemon to watch my .js and .scss files for changes which restarts the node server. So in my package.json file, under scripts I have
scripts:
"watch-js": "nodemon -e js --watch public/js -x \"npm run build-js\"",
"watch-sass": "nodemon -e scss --watch public/sass -x \"npm run build-sass\"",
"watch": "npm run watch-js & npm run watch-sass"
But when I run npm run watch it only watches for the public/js files to change. And it triggers a build accordingly.
But it won't watch for the sass files.
Versions:
node v0.10.36 nodemon v1.4.1
I also include a build script which if I run compiles the sass to css, so my build-sass script should be ok
"build": "npm run build-js & npm run build-sass",
"watch": "npm run watch-js & npm run watch-sass"
If you are using windows, you might be encountering the windows problem
Because npm is reliant on the operating systems shell to run scripts commands, they can quickly become unportable. While Linux, Solaris, BSD and Mac OSX come preinstalled with Bash as the default shell, Windows does not. On Windows, npm will resort to using Windows command prompt for these things
If so, you can try using parallelshell or npm-run-all for better cross platform support.
This works for me in Mac OS
Install nodemon
npm install --save-dev nodemon
Install npm-run-all:
npm install --save-dev npm-run-all
In package.json add two scripts:
"startn": "nodemon ./app.js",
"watch-jscss": "gulp watch"
Where 'app.js' is your server file
"gulp watch" can be replace by whatever task is doing a sass watch
In the console:
npm-run-all --parallel watch-jscss startn