reactjsnode.jsfirebasereact-nativenpm-scripts

Setup Configuration: Node.js / "npm start" doesn't work

npm command running in project path

Hello Developers,

I am trying to run the node.js commands - npm start and setting up a project with firebase the help of this article.

I have installed node.js package and added the path into my environment variable path however when i run it shows me the error [attatched photo]. I think the package installed properly i might be doing something wrong cause when i run npm version it does show me all the info.

Sidenote: This is my first stackoverflow question and into dev environment as well, your help is appreciated.

Thank you fellow Devs.

Solution

  • Question - npm start doesn't work.

    Solution - npx create-react-app app-name

    I believe I have figured out the error where I was doing. And able to resolve my query. npm success message

    Explanation - first you need to create project through npx command which i mention above in solution and it will create necessary files in order to run the following commands, in which npm start is also there.

    I made a sample project - flags and here is the detailed steps.

    C:\Users\Chandray Murmu>npx create-react-app flags
Need to install the following packages:
create-react-app@5.0.1
Ok to proceed? (y)

npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm warn deprecated fstream-ignore@1.0.5: This package is no longer supported.
npm warn deprecated uid-number@0.0.6: This package is no longer supported.
npm warn deprecated rimraf@2.7.1: Rimraf versions prior to v4 are no longer supported
npm warn deprecated fstream@1.0.12: This package is no longer supported.
npm warn deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.

Creating a new React app in C:\Users\Chandray Murmu\flags.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...


added 1480 packages in 3m

261 packages are looking for funding
  run `npm fund` for details

Installing template dependencies using npm...

added 63 packages, and changed 1 package in 18s

261 packages are looking for funding
  run `npm fund` for details
Removing template package using npm...


removed 1 package, and audited 1543 packages in 9s

261 packages are looking for funding
  run `npm fund` for details

8 vulnerabilities (2 moderate, 6 high)

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

Success! Created flags at C:\Users\Chandray Murmu\flags
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd flags
  npm start

Happy hacking!

C:\Users\Chandray Murmu>cd flags

C:\Users\Chandray Murmu\flags>npm start

> flags@0.1.0 start
> react-scripts start

(node:14620) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:14620) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
Starting the development server...

One of your dependencies, babel-preset-react-app, is importing the
"@babel/plugin-proposal-private-property-in-object" package without
declaring it in its dependencies. This is currently working because
"@babel/plugin-proposal-private-property-in-object" is already in your
node_modules folder for unrelated reasons, but it may break at any time.

babel-preset-react-app is part of the create-react-app project, which
is not maintianed anymore. It is thus unlikely that this bug will
ever be fixed. Add "@babel/plugin-proposal-private-property-in-object" to
your devDependencies to work around this error. This will make this message
go away.
Compiled successfully!

You can now view flags in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.1.2:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully
Terminate batch job (Y/N)? y

C:\Users\Chandray Murmu\flags>dir
 Volume in drive C has no label.
 Volume Serial Number is 8AFB-E2C9

 Directory of C:\Users\Chandray Murmu\flags

06-08-2024  09:09    <DIR>          .
06-08-2024  09:05    <DIR>          ..
06-08-2024  09:08               310 .gitignore
06-08-2024  09:09    <DIR>          node_modules
06-08-2024  09:09           749,696 package-lock.json
06-08-2024  09:09               808 package.json
06-08-2024  09:09    <DIR>          public
06-08-2024  09:08             3,359 README.md
06-08-2024  09:09    <DIR>          src
               4 File(s)        754,173 bytes
               5 Dir(s)  93,343,084,544 bytes free