How do I get SASS with auto-refresh? - web

When entering the command
npm install sass --watch ...
I get back,
npm ERR! enoent This is realated to npm not being able to find a file.
Though, the file is there and everything is spelled correctly.
Can anyone help?

Hey John take a look at this reply. Basically there are different solutions:
Single Ampersand solution
Adding to your package.json the following:
"dev:watch" : "npm run sass:watch & npm run livereload"
Parallelshell solution
Using Parallelshell and adding to your package.json the following:
"serve": "live-server",
"start": "parallelshell \"npm run scss && npm run scss -- -w\" \"npm run serve\""
Concurrently solution
Using Concurrently. Install it npm install concurrently --save-dev and add the script:
"dev:watch": "concurrently \" npm run sass:watch \" \" npm run livereload \" "

Related

NPM run build with React + Node + concurrently How to?

I have spend hours trying to figure this out any advice is welcome. The objective here is to assemble a postbuild script that will work on a nodeJS app running a react client.
React is on post 3000 and node is on 5000. So it requires the concurrently library. Below are two attempts do-postbuild and heroku-postbuild (both fail).
"scripts": {
"server": "nodemon server.js --ignore client",
"client": "npm start --prefix ../client",
"dev": "concurrently \"npm run server\" \"npm run client\" ",
"do-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix && npm run build --prefix client",
"heroku-postbuild": "cd ../client && npm install && npm install --only=dev --no-shrinkwrap && npm run build"
},
folder structure
client
server
|_package.json (above)
|_server.js
npm run dev - WORKS perfectly
When I attempt npm run heroku-postbuild it yields the following:
npm ERR! errno 1
npm ERR! ver1.02#1.0.0 heroku-postbuild: `cd client && npm install && npm install --only=dev --no-shrinkwrap && npm run build`
npm ERR! Exit status 1
When attempting to write npm run do-postbuild it throws an error like it is searching for client in the server folder
npm ERR! errno -2
npm ERR! enoent ENOENT: no such file or directory, open '/Users/sites/server/client/package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent
This is not a HEROKU solution it is for general UBUNTU server with root access.
Solution here is you don't have to dockerize the app as a bundle (client and server together).
What worked for me was to treat the client and server as two different apps.
Client side:
npm run build locally from the same folder as contains your package.json file
then post the app build folder as very straight forward client side app with HTML CSS Javascript
Server side:
upload the server files (not including node_modules folder)
run npm i(from the folder with the package.json file)
I set up reverse proxy to map the port to a specific location on the server for the react to reach it
set up cron job to start server side (and check periodically to ensure it is running)
Thats it - works perfect.
Please add below Scripts and try, it will work 100%.
"scripts": {
"client-install": "npm install --prefix client",
"start": "node server.js",
"server": "nodemon server.js",
"client": "npm start --prefix client",
"dev": "concurrently \"npm run server\" \"npm run client\"",
"heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"
}
Add this in your scripts
"client-install": "npm install --prefix client",

How do you correctly use parallelshell with npm scripts?

I am trying to use parallelshell with my node project on Windows to run two processes at the same time.
Here is the scripts section of my package.json file:
"scripts": {
"start": "npm run watch:all",
"test": "echo \"Error: no test specified\" && exit 1",
"lite": "lite-server",
"scss": "node-sass -o css/ css/",
"watch:scss": "onchange \"css/*.scss\" -- npm run scss",
"watch:all": "parallelshell \"npm run watch:scss\" \"npm run lite\""
}
When I run the command npm start I get this error log:
TypeError [ERR_INVALID_ARG_TYPE]: The "options.cwd" property must be of type string. Received type function
at normalizeSpawnArguments (child_process.js:420:11)
at spawn (child_process.js:522:38)
at C:\Users\Daniel\Documents\development\online_classes\coursera_uhk_web_dev\Bootstrap4\conFusion\node_modules\parallelshell\index.js:104:17
at Array.forEach (<anonymous>)
at Object.<anonymous> (C:\Users\Daniel\Documents\development\online_classes\coursera_uhk_web_dev\Bootstrap4\conFusion\node_modules\parallelshell\index.js:100:6)
at Module._compile (internal/modules/cjs/loader.js:702:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:713:10)
at Module.load (internal/modules/cjs/loader.js:612:32)
at tryModuleLoad (internal/modules/cjs/loader.js:551:12)
at Function.Module._load (internal/modules/cjs/loader.js:543:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! confusion#1.0.0 watch:all: `parallelshell "npm run watch:scss" "npm run lite"`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the confusion#1.0.0 watch:all script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
Is there something wrong with my syntax? I can run the commands npm run watch:scss and npm run lite individually and they work fine, but I am not able to run the parallelshell command.
Thank you!
Try downgrading the parallelshell version from 3.0.2 to 3.0.1
According to the statement, it is just a temporary fix.
https://github.com/darkguy2008/parallelshell/issues/57
Below is the command line syntax to for downgrading parallelshell:
sudo npm uninstall --save-dev parallelshell#3.0.2
sudo npm install --save-dev parallelshell#3.0.1
It worked for me.
Hope this helps and let us know.
parallelshell is giving active errors at every use. Instead of parallelshell the alternative here is to use npm-run-all dev-dependency.
install npm-run-all
npm install --save-dev npm-run-all
then make active changes in scripts of package.json shown below.
"scripts": {
"start": "npm run dev",
"test": "echo \"Error: no test specified\" && exit 1",
"lite": "lite-server",
"scss": "node-sass -o css/ css/",
"watch:scss": "onchange \"css/*.scss\" -- npm run scss",
"dev": "npm-run-all -p watch:scss lite"
}
All correct to be run on Windows OS. Just simply try to install parallelshell#3.0.1:
npm install --save-dev parallelshell#3.0.1
and then call npm start again.
change a line in your node_modules/parallelshell/index.js:105 file
from: cwd: process.versions.node < '8.0.0' ? process.cwd : process.cwd(),
to: cwd: parseInt(process.versions.node) < 8 ? process.cwd : process.cwd(),
reference: Problem running parallelshell Nodejs script
This is due to incompatibility of the npm with the version of parallelshell.
Try downgrading it to 3.0.1 by using:
npm i --save-dev parallelshell#3.0.1
Worked for me 100%.
It looks correct to me, instead of escaping your double quotes you could use single quotes inside the double quotes.
Not sure if it will make a difference.
"watch:all": "parallelshell 'npm run watch:scss' 'npm run lite'"
Is different for MAC and Windows machines.
User single quotes on MAC and "\ "\ on windows.
Also downgrade to parallelshell to 3.0.1 to work with \"
I changed to use concurrently package, and it works well for me on win64, the method mentioned is in the post.
I just simply use "watch:all": "concurrently \"npm run watch:scss\" \"npm run lite\"" to replace "watch:all": "parallelshell \"npm run watch:scss\" \"npm run lite\""
This is a common issue can not be fixed using npm audit fix. All you can do is to copy the actual index.js file of parallelshell into your node_modules directory.
So to do it below are the instructions:
1. Go to https://raw.githubusercontent.com/darkguy2008/parallelshell/master/index.js
2. Copy the content here.
3. Now go to the directory of your project, it may be something like /project/node_modules/parallelshell/index.js
4. Inside the index.js replace the contents with the one you copied from the link in Step 1.
5. Save the file and exit.
Hope this fix will work for you.
If someone is still running into errors after altering the index.js or after demoting to 3.0.1 version, a better alternative would be using npm-run-all

npm install not working with --prefix

It seems that npm install --prefix ./server (with no args) is not working with --prefix flag. I just want to install all packages from package.json.
All I get after that command is:
npm WARN enoent ENOENT: no such file or directory, open
'/home/.../ProjectName/server/package.json'
All is fine when I put npm install package_name -S --prefix ./server for example. Then NPM will create node_modules in server and will add package_name package.
My files structure is:
ProjectName
|
+-- client
| +-- node_modules
| +-- package.json
+-- server
| +-- node_modules
+-- package.json
"Main" package.json contains all scripts (for Heroku and for me) and dependiencies for server.
client is Angular2 app that's why it has own node_modules and package.json.
I use NPM 4.2.0. With version 5.0.3 (newest?) it seems that --prefix flag is not working at all.
EDIT #1
I've just discovered that I can solve my problem with npm install (which will install node_modules in my project folder) and then copy node_modules to server/node_modules. Without that copy jasmine throws errors during tsc build.
Now I have to have node_modules in main catalog and copy of them in server. That's so odd..
EDIT #2
According to #Damian Lattenero answer:
npm --prefix ./server install ./ProjectName/package.json
or
npm --prefix ProjectName/server install ./ProjectName/package.json
IS NOT WORKING and generates:
npm ERR! code ENOLOCAL npm ERR! Could not install
"RecursiveNotebook3/package.json" as it is not a directory and is not
a file with a name ending in .tgz, .tar.gz or .tar
THIS WORKS:
npm --prefix ProjectName/server install ./ProjectName
but generates:
npm WARN saveError ENOENT: no such file or directory, open
'/home/tb/Projects/RecursiveNotebook3/server/package.json' npm notice
created a lockfile as package-lock.json. You should commit this file.
npm WARN enoent ENOENT: no such file or directory, open '/home/
tb/Projects/RecursiveNotebook3/server/package.json'
and
package-lock.json next to node_modules
and
empty etc catalog next to node_modules
and
There are some problems with build (tsc -p server) with mongodb package.
Try:
npm --prefix ./server install ./ProjectName/package.json
or
npm install --prefix ./server ./ProjectName/package.json
Also, to understand better what the --prefix do, you can check this two answers:
How to npm install to a specified directory?
npm - install dependencies for a package in a different folder?
Works for me
npm install --prefix ./server ./server
Running the newest version of Ubuntu (Ubuntu 16.04.2 LTS), I encountered the same problem with npm install. I also got an ENOENT error, indicating that npm cannot find the necessary files.
When I installed nodejs-legacy, as shown here under:
sudo apt-get install nodejs-legacy
npm subsequently compiled fine, and my Angular application deployed as it should.
SOLUTION
Those lines in package.json solves all my problems:
"scripts": {
"init": "npm i && mv ./node_modules ./server && sudo npm i typescript -g",
Strange but works...
This part of my server package.json and all working fine:
"scripts": {
"start": "node dist/app.js",
"server": "nodemon --exec ts-node src/app.ts",
"build": "tsc -p .",
"client": "npm start --prefix ../client",
"client:install": "npm install --prefix ../client",
"client:build": "npm run build --prefix ../client",
"dev": "concurrently \"npm run server\" \"npm run client\""
},
Try this one it will definitely work, I'm assuming your project root directory package.json also has dependencies.
npm install && npm install --prefix ./server && npm install --prefix ./client
or user this script
"scripts": {
"client-install": "npm install --prefix ./client",
"install-all": "npm install && npm run client-install && npm run server-install",
"server-install": "npm install --prefix ./server",
},

How to run start scripts from package.json?

I've two scripts in package.json
"start:dev": "nodemon ./src/index.js",
"start": "npm run build && node ./build/index.js",
npm start works well.
I need to run "start:dev": "nodemon ./src/index.js"
For most custom npm scripts you need to add run before script name
npm run start:dev
npm - The main scripts such as start, stop, restart, install, version or test do not require run command. These scripts and some other are described in npm documentation.
npm start
The others need run command before the script name as was pointed by David.
npm run start:dev
Yarn - You can also use yarn and in that case you do not have to specify run.
yarn start
yarn start:dev

Script for initial build of Angular 2 project?

How can I write a script for npm that installs the node_modules in an angular 2 project and compiles the ts files. This doesn't work:
"scripts": {
"firstBuild": "npm install && tsc",
....
I get the error:
> npm firstBuild
Usage: npm <command>
where <command> is one of:
PS:
I can run "start" : "tsc && concurrently \"tsc -w\" \"lite-server\" just like npm start , why can't I do npm firstBuild ?
I think you just forgot to use run.
Try npm run firstBuild.

Resources