Failed to start a project with react - reactjs

Starting a project with react.js, I create the project to write npm start a project I get the error, fuy to the address that says there, but I do not know how to fix it because what I ask help you the error is this: npm Err! Missing script: start. Npm Err! A complete log of this run can be found in npm Err! C:-Users-Sanvicente-Appdata-Roaming-npm-cache-_logs-2020-08-27t20_09_40_583z-debug.log. (I'm starting with react)enter image description here

If you have created react app using npx create-react-app <app_name> command then you should find a package.json file inside the <app_name> folder. Ensure that that file has the following:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}

Related

serve package from npm didn't work with React

I want to try the serve package with a React App by doing the following step:
npm install serve --s
then replace the npm start command in package.json like this:
scripts": {
"start": "serve -s build",
"build": "react-scripts build",
"test": "react-scripts test",
...
},
and then I run npm start i got the error in the console "Uncaught SyntaxError: Unexpected token '<'" etc
however if I uninstall serve --s and put back the package.json like this :
scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
...
},
and then run npm start again it work fine on my local machine, so i think i am doing something wrong in the process and i would like to know why I have issue with the serve package.
Looks like you haven't built your /build folder with app bundle. It must be like this:
npm start - to run and edit code
npm run build - to build a bundle(creates/rebuild a /build folder)
serve -s build - serve/start the /build folder

why do I get this error when building my react app?

I keep getting this error and I'm out of ideas of what causes it:
+ npm run build:app
npm ERR! Missing script: "build:app"
npm ERR!
npm ERR! To see a list of scripts, run:
npm ERR! npm run
Here's my package.json if it helps:
{
"name": "environment-monitoring-app",
"version": "1.0.0-SNAPSHOT",
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
}

Setting up React environment variables for dev and local

I am new to react and setting up environment variables for my project. Here is what I did..
added .env-cmdrc.json as follows
{
"development":{
"REACT_APP_BASE_URL": "https://servername:port/"
},
"staging":{
"REACT_APP_BASE_URL": "http://servername:port/"
},
"local":{
"REACT_APP_BASE_URL": "http://localhost:port/"
}
}
installed npm
npm install env-cmd or npm install -g env-cmd
edited package.json as follows:
"start:development": "env-cmd -e development react-scripts start",
"start:staging": "env-cmd -e staging react-scripts start",
"start:local": "env-cmd -e local react-scripts start",
"build:development": "env-cmd -e development react-scripts build",
"build:staging": "env-cmd -e staging react-scripts build",
tried - npm run start:development
was giving me env-cmd error
again ran
npm install env-cmd
Now tried - npm run start:development
Failed to find .rc file at default paths: [./.env-cmdrc,./.env-cmdrc.js,./.env-cmdrc.json] at getRCFile
I am doing it first time and would appreciate any help..what am I missing here..
I tried your code, but it works well.
Check your code, ensure the location of your config file .env-cmdrc.json, it should be placed under root dict of your project (the same level with package.json)
I would suggest using dotenv package instead of env-cmd.
install the package - npm i dotenv
Create a environment file in your root directory - .env
Declare a variable - REACT_APP_URL=http://localhost/....
Use the variable - process.env.REACT_APP_URL
In order to start the React application you need to check your package.json file and make sure it contains something like this:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
If that's in place you can run the following command: npm start
Now you can start coding :)

Port doesn't recognized while running multiple app of react on windows

I have multiple react apps example one parent app and in the parent app I have two more apps which are running on different port parent app is running on 3000 port and first child is running on 3005 and second child is running on 4000 port. I did some configurations in the package.json file in scripts section given below
parent app has
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"odmit": "npm start odmit_view",
"moderator": "npm start --prefix moderator",
"monitor": "npm start --prefix monitor",
"dev": "concurrently \"npm run odmit\" \"npm run moderator\" \"npm run monitor\""
},
first child have package.json is
"scripts": {
"start": "PORT=4000 react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
Second child have package.json
"scripts": {
"start": "PORT=3005 react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
This will fine when I'm running this on ubuntu with command npm run dev. When I run same command in windows then it will give me the bellow error that this port is not recognized.
'PORT' is not recognized as an internal or external command,
[2] operable program or batch file.
[2] npm ERR! code ELIFECYCLE
[2] npm ERR! errno 1
[2] npm ERR! monitor#0.1.0 start: `PORT=4000 react-scripts start`
[2] npm ERR! Exit status 1
[2] npm ERR!
[2] npm ERR! Failed at the monitor#0.1.0 start script.
[2] npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
[1]
[1] > moderator#0.1.0 start D:\odmit_view\moderator
What is the issue in this can anyone please help me.
On Windows you need to set up the environment variable first:
"scripts": {
"start": "set PORT=4000 && react-scripts start"
}
Alternatively, you can also use cross-env to work on different environments (Windows and Ubuntu) like so:
"scripts": {
"start": "cross-env PORT=4000 react-scripts start"
}

Run npm build with specific .env file

I have a react application that connect to micro services. I have different micro services urls per environment. I therefore have multiple env files: .env, .env-develoment-local, env-development,...
When I start the app locally, the app pick up the setting in the .env.development-local which is expecetd.
When I do npm run build I noticed that since it creating a production build, it picks up the .env file.
My question is how can configure the build such a way that it picks other .env files like .env.development or .env.qa, etc... ?
I was able to get this working using https://github.com/toddbluhm/env-cmd
I did the following:
npm install --save-dev env-cmd
Then updated package.json accordingly:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"build:stage": "env-cmd -f ./.env.stage npm run-script build"
}
Then run the following command:
npm run build:stage

Resources