I'm trying to attach another command to yarn start. I'm not sure if it is possible but when I run command yarn start I want my react app to start and I also want to fire up my server at the same time.
What I do know is use 2 terminals one with react app directory and call on yarn start
C:\Users\ivanr\Documents\GitHub\bees\business-scheduler>
and one with server directory (which is inside react app directory) and call on node src/index.js
C:\Users\ivanr\Documents\GitHub\bees\business-scheduler\server>
"scripts": {
"start": "react-scripts start", // is it possible that I can say in server directory run node src/index.js here?
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
You can use concurrently
First install it
$ npm install concurrently
Then use it in your command
"scripts": {
"start": "concurrently \"yarn start-client\" \"yarn start-server\"",
"start-client": "react-scripts start",
"start-server": "cd .\server && node src/index.js"
}
You can use npm-run-all
"scripts": {
"clean": "rimraf dist",
"lint": "eslint src",
"build": "babel src -o lib"
}
npm-run-all clean lint build
Related
I'd like my Nestjs/swagger application to start up as soon as bootstrap is finished
Initially I thought of using the callback of
async function bootstrap(): Promise<void> {
console.clear();
console.log("Starting and validating");
const app = await NestFactory.create<NestExpressApplication>(AppModule, {
cors: true,
});
await app.listen(PORT, () => someOpenBrowserFuncion("/docs")`));
}
bootstrap();
But I didn't find anything like that, so I thought
When we start a REACT app, as soon as it is compiled, it opens the default browser automatically.
and
This option can be disabled with the following command:
"scripts": {
"start": "env BROWSER=none react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
Is there a similar function in the Nestjs/swagger framework?
"scripts": {
"build": "nest build",
"dev": "nest start --watch",
"start": "env BROWSER=true nest start",
"production": "node dist/main",
},
Or some configuration to launch browser on certain endpoint?
You can install a npm package cross-env : npm install cross-env
And update this command in the package.json file under 'scripts';
"start": "cross-env BROWSER='chrome' nest start"
BROWSER is an environment variable, and you can use the cross-env package to properly handle it.
Linux:
BROWSER='google-chrome-stable'
Windows:
BROWSER='chrome'
OS X:
BROWSER='google chrome'
If these don't work, you can update the script:
Windows:
"start": "start http://localhost:3000 & nest start"
Mac:
"start": "open http://localhost:3000 && nest start"
Linux:
"start": "xdg-open http://localhost:3000 && nest start"
You can change your own port number.
I've a problem when I generate a website in Node.js
I've a WebApp On Linux, the Pipeline success, the release success, but when I go to the site, returns
:( Application Error
Looking in the logs, returns "Nuxt not found".
What's the problem?
"scripts": {
"dev": "nuxt -o",
"dev:e2e": "cypress open",
"build": "nuxt build --modern",
"start": "nuxt start",
"generate": "nuxt generate --modern",
"generate:dev": "cross-env ENV_DEV=true nuxt generate --modern",
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs",
"lint:eslint": "eslint --fix",
"lint:stylelint": "stylelint --fix",
"lint:markdownlint": "markdownlint",
"lint:prettier": "prettier --write --loglevel warn",
"lint:all:eslint": "yarn lint:eslint --ext .js,.vue .",
"lint:all:stylelint": "yarn lint:stylelint \"**/*.{vue,scss}\"",
"lint:all:markdownlint": "yarn lint:markdownlint \"docs/*.md\" \"*.md\"",
"lint:all:prettier": "yarn lint:prettier \"**/*.{js,json,css,scss,vue,html,md}\"",
"lint": "run-s lint:all:*",
"new": "hygen new"
},
If I try with a blobstorage it's ok, but I can't make the root domain go to the Blobstorage (example.com) because need a CNAME.
Method 1.
Try to add startup command. If it doesn't work, try method 2.
pm2 serve /home/site/wwwroot --no-daemon --spa
or
Usually use it in Angular Project.
npx serve -s
Method 2.
Use copy below code and paste it to package.json. Then tell me the result.
"scripts": {
"dev": "nuxt",
"build": "nuxt build --modern",
"start": "nuxt start",
"generate": "nuxt generate --modern",
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs",
"lint:eslint": "eslint --fix",
"lint:stylelint": "stylelint --fix",
"lint:markdownlint": "markdownlint",
"lint:prettier": "prettier --write --loglevel warn",
"lint:all:eslint": "yarn lint:eslint --ext .js,.vue .",
"lint:all:stylelint": "yarn lint:stylelint \"**/*.{vue,scss}\"",
"lint:all:markdownlint": "yarn lint:markdownlint \"docs/*.md\" \"*.md\"",
"lint:all:prettier": "yarn lint:prettier \"**/*.{js,json,css,scss,vue,html,md}\"",
"lint": "run-s lint:all:*",
"new": "hygen new"
},
In nuxt.config.js.
server: {
port: process.env.PORT, // default: 3000
host: '0.0.0.0' // default: localhost
},
How to deploy nuxt(nuxt.js) in azure(web app)? (not found module)
It's solved
The problem was in the release.
WebApp Service is in PHP 7.4, so, the release (Job Azure Service Deploy) in the dropdown "Runtime Stack" needs to be in PHP 7.4
I'm building a project that has a backend, and a frontend.
I had the idea that'd be cool to have both folders in the same directory with another npm script that runs them.
The problem is that I'm unable to set the port in one of the two packages, that being the frontend.
In my main package.json I have this:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start-app": "cross-env SERVER_PORT=8080 npm start --prefix ./frontend",
"start-server": "cross-env SERVER_PORT=8080 npm start --prefix ./backend"
},
And it works for the backend, but doesn't for the frontend.
The frontend has the base configuration.
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
The project runs, but when I look for the process.env, there's no trace of the SERVER_PORT in the FrontEnd but it exists in the BackEnd.
(Backend scripts are the default for a new npm package).
"scripts": {
"start": "node main.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
CRA uses PORT to define the port variable. Run it like:
"start": “PORT=8000 react-scripts start"
Additionally since CRA is essentially a static site it doesn't have in itself a concept of env variables - these are NodeJS specific. A few such as PORT and NDOE_ENV are defined for you and used in the dev server. If you wanted to use custom env vars within your React components you can make them available by defining the with the prefix: REACT_APP_ such as REACT_APP_SITENAME for example.
Check out the docs here: https://create-react-app.dev/docs/adding-custom-environment-variables/
Not really any code for this, essentially used this blog as reference: https://vincenttunru.com/migrate-create-react-app-typescript-to-create-react-app/
basically, the scripts look like this
"scripts": {
"watch": "npm-watch",
"build-css": "lessc src/main.less src/index.css",
"start-js": "react-scripts start",
"start": "npm-run-all -p watch start-js",
"build": "npm run build-css && react-scripts build",
"test": "react-scripts test --env=jsdom",
"test:staged": "echo 'write some tests'",
"eject": "react-scripts eject"
}
it runs fine up until "npm start" where everything is fine up until this moment:
[nodemon] clean exit - waiting for changes before restart
? We're unable to detect target browsers.
Would you like to add the defaults to your package.json? (Y/n) n
Unrecognized input: n
Unrecognized input:
where it's this weird loop because input isn't parsing input properly or something, as in I can't even exit because it's detected as an input, so the only way to stop is to shut down the terminal
In the package.json
"browserslist": [
"defaults"
]
My react folder structure is as below
I've not used the create-react-app version. I tried using GENERATE_SOURCEMAP=false. But It didn't work.
Where can I find the .map files. How can I delete those files?
I cannot find a build folder.
I've tried using the below script But It cannot work in removing source maps
"scripts": {
"start": "react-scripts start",
"build": "GENERATE_SOURCEMAP=false && npm run build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
just remove &&
"scripts": {
"start": "react-scripts start",
"build": "GENERATE_SOURCEMAP=false react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
You have to create a .env file in your root directory (same folder as package.json) and set GENERATE_SOURCEMAP=false on a single line.
for additional configurations, you may refer to the documentation here:
https://facebook.github.io/create-react-app/docs/advanced-configuration
What I have tested and which is working is to add this code in your .env.production file or .env file
GENERATE_SOURCEMAP=false
Solution 1
Edit your package.json like below:
Windows:
"scripts": {
"start": "react-scripts start",
"build": "set \"GENERATE_SOURCEMAP=false\" && react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
Linux:
"scripts": {
"start": "react-scripts start",
"build": "GENERATE_SOURCEMAP=false react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
Solution 2 (Recommended)
This solution is not operating system dependent and works on both Linux and Windows. Just create a file called .env in the root path of your project and add the following line to it:
GENERATE_SOURCEMAP=false
For windows cmd and create-react-app + react-scripts,
You should use set and close with \" YOUR_TMP_ENV_VAR \"
See example:
"deploy:prod:hosting": "set \"GENERATE_SOURCEMAP=false\" && npm run build
this answer helped me:
How to set environment variable in React JS..?
This works for me. Hope it helps anyone.
// package.json
"build": "react-scripts build",
"postbuild": "rimraf build/**/*.map"
This way, it will auto delete map files during build generation.
Solution for ejected create-react-app v2.1.3.
Go to /config/webpack.config.js directory and change the following line:
const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
To:
const shouldUseSourceMap = false;
And Bob is your uncle.
just add GENERATE_SOURCEMAP=false in .env
Put this one in your package.json
"build": "cross-env GENERATE_SOURCEMAP=false react-scripts build",
It works on Windows and Linux...
After long struggle nothing worked. Finally what worked for me is
changing sourcemap: false in webpack.config.prod.js inside nodemodules/react-script/config
hopefully it will work for you too.