ReactJS - ec2 server configuration issue - reactjs

I am facing some issues while run the reacj js in ec2 server.
I am using this command to run the server : npm start
Getting this warning and stop the server
WARNING in bundle.js from UglifyJs
"scripts": {
"start": "npm run build:prod",
"build": "webpack -d && cp src/index.html dist/index.html && webpack-dev-server --port 8080 --hot --host xx.xx.xx",
"build:prod": "NODE_ENV=production webpack -p --config webpack.config.js --progress"
},
Webpack details:

Related

I use npm run build-css to update my tailwind css. Is there a way to make this done automatically?

Every time I add a new class in the className of a react component, i need to go to the terminal and type npm run build-css in order for the classes to take effect.
What npm run build-css does is "build-css": "npx tailwindcss build -o src/styles/main.css",.
Is there a way to not have to run the above command on every UI change I do? I have used tailwind css in nextjs by following the official guide and it updates on its own whenever I do a change in the UI.
My scripts:
"scripts": {
"prod": "cross-env NODE_ENV=production webpack --mode production --config webpack.build.config.js && electron --noDevServer . ",
"start": "cross-env NODE_ENV=development webpack serve --hot --host 0.0.0.0 --config=./webpack.dev.config.js --mode development && craco start",
"build": "cross-env NODE_ENV=production webpack --config webpack.build.config.js --mode production && craco build",
"watch-css": "npx tailwindcss build -i src/styles/index.css -o src/styles/main.css --watch",
"build-css": "npx tailwindcss build -o src/styles/main.css",
"package-m1": "electron-forge package --arch=arm64 --platform=darwin",
"package-intel": "electron-forge package --arch=x64 --platform=darwin",
"package": "npm run package-m1 && npm run package-intel",
"postpackage": "electron-packager ./ --out=./builds"
},
You should be able to combine this command into your normal run command, I'm not sure if you're using a framework or not but if you go into you package.json and look at your normal run/start command you can edit that to include the tailwind build. Depending on if you are using a unix or windows environment it will be slightly different. For react it would look like this(I don't remember syntax for nextjs)
"start": "npx tailwindcss build -o src/styles/main.css && node scripts/start.js"
The above would be for windows and the below for unix
"start": "npx tailwindcss build -o src/styles/main.css & node scripts/start.js"

Cannot find module: '#sunilshrestha/ckeditor5-build-classic' while deploying MERN project to Heroku

In my project, I have custom built CKEditor 5. My project folder structure looks like this
When I run application locally, it works fine. But after I have deployed npm run build application to Heroku, build log in heroku websites shows error that:
./src/screens/PostEditScreen.js
Cannot find module: '#sunilshrestha/ckeditor5-build-classic
I couldn't figure out how to deploy this custom built ckeditor5 to heroku where my frontend react app can use. The scripts in package.json file looks like this:
"scripts": {
"start": "node backend/server",
"build": "cd frontend && react-scripts build",
"server": "nodemon backend/server",
"client": "npm start --prefix frontend",
"heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix frontend && npm run build --prefix frontend",
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
Package.json of frontend have dependencies for custom build ckeditor5 looks like this:
"#sunilshrestha/ckeditor5-build-classic": "file:../ckeditor5/packages/ckeditor5-build-classic",

I have downloaded the ethereum blockchain project build in react,solidity,truffle

Now It doesn't run on my ubuntu machine. When I run the npm start command it says missing script start. Is there any method to run the downloaded project?
In your package.json file, check scripts property:
"scripts": {
"clean": "rimraf build/*",
"copy-assets": "ts-node src/tools/copyAssets",
"tsc": " tsc",
"build": "npm-run-all clean tsc copy-assets",
"dev": "nodemon --watch src -e ts,ejs,css --exec npm run dev:start",
"dev:start": "npm-run-all build start",
},
Looks like start script does not exist. Instead run the appropriate one from the scripts section.

Jhipster Angular App in docker container, not running in production mode

Jhipster created angular app have following files in webpack folder
webpack.dev.js
webpack.prod.js
After creation of docker file using following code snippet
....
COPY . .
RUN npm install
EXPOSE 9000
CMD ["sh", "-c", "npm run-script serve"]
It always pick up development mode and webpack.dev.js.
Is any other change required for angular app to run in production mode.
Script file is as below
"scripts": {
"prettier:format": "prettier --write \"{,src/**/}*.{md,json,ts,css,scss,yml}\"",
"lint": "eslint . --ext .js,.ts",
"lint:fix": "npm run lint -- --fix",
"ngc": "ngc -p tsconfig-aot.json",
"cleanup": "rimraf target/classes/static/ target/classes/aot",
"clean-www": "rimraf target/classes/static/app/{src,target/}",
"start": "npm run webpack:dev",
"start-tls": "npm run webpack:dev -- --env.tls",
"serve": "npm run start",
"build": "npm run webpack:prod",
"test": "npm run lint && jest --coverage --logHeapUsage -w=2 --config src/test/javascript/jest.conf.js",
"test:watch": "npm run test -- --watch",
"webpack:dev": "npm run webpack-dev-server -- --config webpack/webpack.dev.js --inline --hot --port=9060 --watch-content-base --env.stats=minimal",
"webpack:dev-verbose": "npm run webpack-dev-server -- --config webpack/webpack.dev.js --inline --hot --port=9060 --watch-content-base --profile --progress --env.stats=normal",
"webpack:build:main": "npm run webpack -- --config webpack/webpack.dev.js --env.stats=minimal",
"webpack:build": "npm run cleanup && npm run webpack:build:main",
"webpack:prod:main": "npm run webpack -- --config webpack/webpack.prod.js --profile",
"webpack:prod": "npm run cleanup && npm run webpack:prod:main && npm run clean-www",
"webpack:test": "npm run test",
"webpack-dev-server": "node --max_old_space_size=4096 node_modules/webpack-dev-server/bin/webpack-dev-server.js",
"webpack": "node --max_old_space_size=4096 node_modules/webpack/bin/webpack.js"
},

call npm script in package.json through bamboo build to trigger build

I have my package.json as below. I would like to trigger a bamboo build through npm scripts which should trigger npm install and then it should trigger npm run bamboo.
I am trying to make the build fail if my testcases fail.kindly help in how to configure in bamboo to achieve the same
"scripts": {
"dev": "webpack",
"prod": "webpack -p",
"start": "webpack-dev-server --open",
"build": "npm run clean-dist && npm run dev && npm run start",
"pbuild": "npm run clean-dist && npm run prod && npm run start",
"clean-dist": "rimraf ./dist && mkdir dist",
"lint": "esw webpack.config.js app",
"lint:watch": "npm run lint -- --watch",
"test": "karma start --reporters html",
"pro": "protractor protractor.config.js",
"bamboo": "npm run clean-dist && npm run dev && npm run test"
}
In bamboo plan configuration:
1. Add new task
2. Select 'npm' type
3. Select Node.js executable - version of your nodeJs, installed on the server
4. Command: run test
This will run your 'test' script from package json

Resources