We Keep Coding

How do I set webpack mode

I'm trying to configure my script (in package.json) in such a way that I can run webpack in production or development mode via cli.
package.json
"scripts": {
"start": "webpack serve",
"build": "webpack --mode=production"
in my webpack.config.js file, I was expecting process.env.NODE_ENV to equal to whatever I set the mode to be. Instead, I keep getting undefined please how can I make it work

For the Dev Server
First, install webpack-dev-server with following command:
npm install webpack-dev-server
Add following line to the package.json script:
"scripts": {
"start": "webpack-dev-server --mode development"
}
For Production build
Add the following line to the scripts section of package.json:
"build": "node_modules/.bin/webpack --mode production"
The scripts section in package.json with both the dev and production build will look like this:
"scripts": {
"build": "node_modules/.bin/webpack --mode production",
"start": "webpack-dev-server --mode development"
}

how to package the project after run the react-app-rewired eject

I am using the react-app-rewired to package the project, now I did not want to use react-app-rewired. I have run this command to eject the react-app-rewired:
yarn eject
this is the legacy package.json config:
"scripts": {
"start": "react-app-rewired start --host 0.0.0.0",
"build": "CI=false && react-app-rewired build",
"test": "react-app-rewired test"
},
after eject, I could not use the legacy command to package the project now. what should I do to package the eject project? config then webpack again? install the webpack-cli?

How to add TS files to launch vue3 application in prod

Current folder structure:
/appname/server.js
/appname/package.json
Current package.json
"scripts":
{
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"start": "node server.js",
},
I'd like to write serve.js using TS. I know how to do in a typical TS project, but i'm not able to do so when webpacks are involved. If I update tsconfig to include serve.ts the js file doesn't end up in the dist folder.
Wanted folder structure:
/appname/server.ts
/appname/package.json
Wanted package.json
"scripts":
{
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"start": "node dist/server.js",
},
To make this even more complicated, the dist folder is needed to drive the application, so I rather not mess with it, putting server.js in a different folder is probably a better approach.

You could use ts-node to run server.ts directly:
Install ts-node as a devDependency:
npm i -D ts-node
Update your NPM script to use ts-node instead of node:
{
"scripts": {
"start": "ts-node server.ts"
}
}
Or you can avoid a devDependency with npx ts-node:
{
"scripts": {
"start": "npx ts-node server.ts"
}
}

how to run gulp tasks from webpack

I have recently updated gulp to 4+ version and then gulp does not start the watch tasks anymore.
What am i doing wrong? below here is the updated version of code gulp 3+ to gulp 4, I am using gulp.series as per gulp4 docs.
npm run build command would have previously copied over the assets folder to 2 other places, its not anymore starting the gulp tasks and gulp watch.
Given myGulpFile.js
var gulp = require('gulp');
var path = require('path');
gulp.task('copytask', function() {
gulp.src(['assets/**/*']).pipe(gulp.dest('buildpath/assets'))
.pipe(gulp.dest(path.resolve(__dirname, '../somepath/assets')));
});
gulp.task('watchtask', gulp.series( function watchtask(){
gulp.watch('assets/**/*', gulp.series('copytask'));
}));
gulp.task('default',gulp.series('watchtask', function (done) {
console.log("Gulp started now from webpack!!");
done();
}));
Given my package.json for webpack
"main": "webpack.config.js",
"scripts": {
"build": "webpack --progress -c",
"watch": "webpack -w --progress -c",
"dev": "webpack-dev-server --devtool eval --progress --colors --content-base build",
"deploy": "NODE_ENV=production webpack --config webpack.production.config.js"
},
and my webpack.config.js
var webpack = require('webpack');
var something ...;
require('./myGulpFile');
var config = {
...
}
module.exports = config;
any help regarding this is much appreciated!
EDIT: To further clarify my question, I want to run gulp by running just one of the webpack commands and automatically start the gulp tasks (this was happening in gulp3+ version using above procedure) but broke after updating to gulp4 version.

I think now you need to use gulp to execute the default gulp and gulp <name-of-task> to execute the considered task gulp, for example gulp copytask.

Its working now, I ended up changing package.json commands and adding && gulp -f myGulpFile.js to the end of the build,dev,deploy commands as below. This will start the gulp tasks right after the webpack commands and you only have to run one initial webpack command npm run build
"scripts": {
"build": "webpack --progress -c && gulp -f myGulpFile.js",
"watch": "webpack -w --progress -c",
"dev": "webpack-dev-server --devtool eval --progress --colors --content-base build && gulp -f myGulpFile.js",
"deploy": "NODE_ENV=production webpack --config webpack.production.config.js && gulp -f myGulpFile.js"
}, ```

How to set NODE_ENV from package.json for react

I am trying to target multiple environments from local while executing React app.
1. Development
2. Staging
3. Production
I am also trying to test for offline mode in any of the environments. So, the scripts what I have configured is as follows:
"staging-server": "nodemon server.js --environment=staging",
"staging": "concurrently -k \"npm:staging-server\" \"NODE_ENV='staging' PORT=3003 react-scripts start\"",
"prod": "npm run build && forever server.js --environment=production"
I am able to fetch environment arg using args inside my Express, but my local ui app is still showing development only when I console for process.env.NODE_ENV. I am also trying to set NODE_ENV with same line for staging, but still no luck. PORT setting is working but, the app is running in 3000 and 3003 both ports.
How to get rid of this? I would like to understand the staging configuration as well.

As per the docs, we cannot override NODE_ENV, but there is a room to create our own custom variables starting with REACT_APP_. So i configured to look as below:
Reference: https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables
"staging": "concurrently -k \"npm:staging-server\" \"cross-env REACT_APP_ENVIRONMENT='staging' PORT=3003 react-scripts start\"",
And inside my UI application, I can fetch its value by consoling it like this:
console.log('REACT_APP_ENVIRONMENT => ', process.env.REACT_APP_ENVIRONMENT);

I build the build with REACT_APP_STAGE and use it in my application as process.env.REACT_APP_STAGE.
"scripts": {
"analyze": "source-map-explorer 'build/static/js/*.js'",
"build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
"watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive",
"start-js": "react-scripts start",
"start": "REACT_APP_STAGE=local npm-run-all -p watch-css start-js",
"build": "npm run build-css && react-scripts build",
"build-dev": "REACT_APP_STAGE=dev react-scripts build",
"build-prod": "REACT_APP_STAGE=prod react-scripts build",
"build-qa": "REACT_APP_STAGE=qa react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},

Use cross-env in front of NODE_ENV.
npm i -g cross-env
"staging": "concurrently -k \"npm:staging-server\" \"cross-env NODE_ENV='staging' PORT=3003 react-scripts start\"",

Easiest approach is to add it directly in your command:
"scripts": {
"start": "./node_modules/.bin/nodemon server.js",
"start:prod": "NODE_ENV=prod node server.js",
},