How can I make the cross-env and nodemon work together? - npm

This is my package.json fragment.
"scripts": {
"build": "react-scripts build",
"dev": "cross-env NODE_ENV=development run-p server start",
"eject": "react-scripts eject",
"prod": "cross-env NODE_ENV=production node server",
"server":"nodemon -r dotenv/config ./server/index.js",
"start": "react-scripts start",
"test": "react-scripts test"
},
When I execute the following command:
npm run dev
The nodemon working properly.
However, when I execute the following command:
npm run prod
The nodemon seems to be not working. When I change the content of ./server/index.js, the file is not reloaded.
It works when changing the following statement:
"prod": "cross-env NODE_ENV=production node server",
to
"prod": "cross-env NODE_ENV=production nodemon -r dotenv/config ./server/index.js",
However, I don't want to duplicate the following phase:
"nodemon -r dotenv/config ./server/index.js".
So, would you tell me how I can make it work as expected?

You should use the nodemon.json config file.
For example:
nodemon.json
{
"watch": ["src"],
"ext": "ts, js, json",
"execMap": {
"ts": "cross-env NODE_ENV=development ts-node -T"
}
}
and into the package.json you call nodemon normally. For example:
{
...
"scripts": {
"start:dev": "nodemon ./src/server.ts",
}
}
This is an usage example with typescript but you can readjust to nodejs

Finally, I found the solution.
"scripts": {
..........
"dev": "cross-env NODE_ENV=development run-p server start",
"eject": "react-scripts eject",
"prod": "cross-env NODE_ENV=production npm run server",
"server":"nodemon -r dotenv/config ./server/index.js",
..........
},

Related

npm build failure in Azure deveops pipline

I am facing this issue while building dist file in azure devops pipeline:
enter image description here
peice of code in package.json file is:
"name": "aimportal",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build --prod --aot --vendor-chunk --common-chunk --delete-output-path --buildOptimizer --output-hashing none --watch",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
angular version : 9.0.1
I tride by deleting package.json file and added the same node js version but still facing the issue.

"Module not found" when trying to add Tailwind CSS to a Wordpress project with Lararavel Mix

I am trying explore Tailwindcss and want to add it to a new Wordpress project. I am using Laravel Mix for compiling assets.
After setting up everything and running "npm run dev", i get the following error:
ERROR in ./assets/src/main.css Module build failed (from
./node_modules/css-loader/index.js): ModuleNotFoundError: Module not
found: Error: Can't resolve './node_modules/tailwindcss/base.css' in
...
My current settings are based on this article:
https://paulund.co.uk/using-tailwind-css-in-your-wordpress-theme
Here's code for my package.json
{
"name": "tailwind-wordpress",
"version": "1.0.0",
"description": "WP Theme with Tailwind CSS",
"dependencies": {
"cross-env": "^6.0.3",
"laravel-mix": "^5.0.0",
"postcss-import": "^12.0.1",
"tailwindcss": "^1.1.2"
},
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
}
}
And this is contents of webpack.mix.js
const mix = require('laravel-mix');
mix.postCss('./assets/src/main.css', './assets/dist/main.css', [
require('tailwindcss'),
])
And main.css:
#import 'node_modules/tailwindcss/base.css';
#import 'node_modules/tailwindcss/components.css';
#import 'node_modules/tailwindcss/utilities.css';
Any ideas how to solve this issue? All help is highly appreciated.
if you're using webpack and all that jazz you should use
#import "tailwindcss/base";
#import "tailwindcss/components";
#import "tailwindcss/utilities";

I have trouble with npm run dev & cross-env. Laravel 8

Error after run npm run dev :
enter image description here
package.json config:
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.19",
"cross-env": "^7.0",
"laravel-mix": "^5.0.1",
"lodash": "^4.17.19",
"resolve-url-loader": "^3.1.0"
}
}
I have node version 14.13.1 and npm version 6.14.8
How resolving it's? Thanks!

entry pattern "'./src/components/*.vue'" did not match any files / Building Web Components VUEJS

"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"wbuild": "vue-cli-service build --watch",
"lint": "vue-cli-service lint",
"build:target": "vue-cli-service build --target wc --name my-compo './src/components/*.vue'"
},
I have two questions:
First: When I follow the documentation of "documents Build Target Vue.js" and I use npm run build:target, it does not work like mentioned in the documentation, but when I try to remove the single quotes ' ' then it does work, can someone explain this behaviour?
Second: Can I replace --name my-compo with name in the .vue file?
I want to have for example:
alert.vue -> my-compo.js -> alert.js
Maybe it helps you to install https://www.npmjs.com/package/cross-env and prefix your script commands with cross-env like:
"scripts": {
"serve": "cross-env vue-cli-service serve",
"build": "cross-env vue-cli-service build",
"wbuild": "cross-env vue-cli-service build --watch",
"lint": "cross-env vue-cli-service lint",
"build:target": "cross-env vue-cli-service build --target wc --name my-compo './src/components/*.vue'"
},
The reason can be that your are also in windows, like me.

Npm command ignoring flags

I am using the following command,
npm run ng build --watch
Running
> json#0.0.0 ng C:\Users\json
> ng "build"
It ignoring the watch flag, can any one help me on this.
Please don't get into why I am using npm run ng build --watch that is a big story.
Found a workaround for this, in package.json added build:dev as new command and running npm run build:dev solves my issue
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"build:dev": "ng build --watch"
},