We Keep Coding

How to use Nodejs build in production mode using babel for my DockerImage

i Have a nodejs application and its working fine but in my structure i dont have a src folder i just have all other files and am using MVC but am having the error
here is my script
"scripts": {
"start": "babel-node server.js",
"dev": "nodemon --exec npm start",
"build-babel": "babel -d ./build ./server.js -s",
"build": "babel ./Myfolder --out-dir dist --copy-files",
"serve": "node dist/index.js",
"sequelize": "sequelize"

npm ERR! Invalid Version:

Please I got the below error while setting up an angular project
npm WARN config global --global, --local are deprecated. Use --loca tion=global instead.
npm ERR! Invalid Version:
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\user\AppData\Local\npm-cache_logs\2022-08-02T17_5
8_35_503Z-debug-0.log
The version in the package.json is
{
"name": "angular-front-end",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test"
},

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 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",
},

Deploy React-(Create-React-App),Express.js and MySQL

How to deploy react (Create-React-App), Express.js and MySQL ?
I tried deploying on cPanel. do I have to change it to Production mode?
how do I access the API on Express.js? do I have to create a sub domain on Express.js?
because so far I only use the library which is concurrently and nodemon. and on React.js I added a proxy like this:
"proxy": "http: // localhost: 5000", where localhost: 5000 has a port from Express.js
Package.json script in server.js
"scripts": {
"client-install": "npm install --prefix client",
"start": "node server.js",
"server": "nodemon server.js",
"client": "npm start --prefix client",
"dev": "concurrently --kill-others \" npm run server\" \"npm run client\""
},
Package.json script in React
"proxy": "http://localhost:5000",
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
My App :
Client > folder react app > Package.json,Src
Node modules > npm from server
Server > Express config,Routes,Controller
.babelrc
server.js
package.json

Do you have terminal access on the cPanel? If yes, then
Start your node server (Using PS or Nodemon)
If your cPanel is using any kind of a server (nginx or Apache webserver for example), then configure the server file to redirect to localhost:5050 on *:80 and *:443
Configure your Express.js to serve on port 5050
And that's it.