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/
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.
This is the portion from package.json :
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node index.js",
"dev": "nodemon --watch app index.js"
},
All my code except the index.js, package.json and node_modules resides in a sub folder called app.
When I run using npm run dev , nodemon watches the changes in app folder and restarts if there's any changes. But won't restart if I make any changes in index.js (entry point)
My folder structure:
|-- app/
|-- node_modules/
|index.js <--- nodemon not watching this file
|package.json
|package-lock.json
Why is it so?
EDIT:
Here's the solution (from #Pedro Filipe):
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node index.js",
"dev": "nodemon index.js"
},
If you're importing files into index.js, I think you just need to do nodemon index.js in order to have the files that interest you watched. I suspect that when you pass the flag --watch [folder_name] it basically just ignores the filename you pass afterwards.
Nodemon detects changes into the files and restarts it automatically.
Currently, you are saying node to run the index.js file which requires restart whenever you want to reflect your changes.
All you need to do is change the "start" command.
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node index.js",
"dev": "nodemon index.js"
}
(Previously commented this answer)
Nodemon watches the entry-point to your project.
Which, In almost all the cases of node project is a single file which eventually imports other files and so on and so forth.
(Assuming that your entry-point is index.js i.e. you're importing your other files in there.) You can simply use the nodemon index.js as the script for your dev
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node index.js",
"dev": "nodemon index.js"
},
Nodemon detects changes into the files and restarts it automatically.
Currently, you are saying node to run the index.js file which requires restart whenever you want to reflect your changes.
All you need to do is change the "start" command.
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node index.js",
"dev": "nodemon index.js"
},
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
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"
]
I'm trying to deploy my Express server to my Heroku app, but every time I do, I get an error and it crashes.
I setup my Procfile with the following code: web: node /src/server.js
Where server.js is not in the root of the directory. However, when I try to start the server, I get an error in the logs: Error: Cannot find module '/src/server.js'
When I run the app locally, I have to run npm start in order for it to run the server correctly. Here is the relevant "scripts" portion of my package.json file:
"scripts": {
"start": "NODE_ENV=dev nodemon ./src/server.js --exec babel-node",
"prebuild": "rimraf dist",
"build": "babel ./src -d dist --presets es2015,stage-2 --ignore spec.js,node_modules",
"serve": "NODE_ENV=production node dist/server.js",
"start_babel": "babel-node ./server.js --preset=babel-preset-es2015",
"test": "echo \"Error: no test specified\" && exit 1",
"lint": "eslint ."
}
Since the Procfile overrides the package.json script commands, why is it having trouble finding my file when I've explicitly set it?
I'm not sure about the leading slash. Does using ./src/server.js help at all?