npx create-react-app dependencies not working - javascript

When creating a new react app via npx create-react-app client, the application is created however the react-scripts command is not found and cannot run the start script. Is there anyway to fix this? [
Question 2 Also when running application node <direct path to react-scripts start file> I cannot use the dotenv module as pollyfill is no longer supported for the fs and os modules? Any solutions?
I am using
npm version: 8.19.2
node version: v16.17.0

this problem's have multiple problems , maybe you have to create app at desktop or at C disk (if Windows) , try this
rm -rf node_modules
rm -rf package-lock.json
npm install
change node version vie NVM (optional)
Second question check this dotenv-webpack

Related

Can I install react native Cli through terminal globally?

I want to install react-native cli but I don't where to run this command: npm install -g react-native-cli. Do I need to run this command on my macOS terminal or when I will make a directory for my react native app then there I need to run this command in vscode?
Is there any issue if I run this command in my terminal or If I run this in VScode?
React Native is distributed as two npm packages, react-native-cli and react-native.
The first one is a lightweight package that should be installed globally (npm install -g react-native-cli), while the second one contains the actual React Native framework code and is installed locally into your project when you run react-native init.
Because react-native init calls npm install react-native, simply linking your local GitHub clone into npm is not enough to test local changes.
npm install –g react-native-cli
· This line installs the npm package react-native-cli along with its dependencies(from the npm repository host) inside the globally shared node_modules folder.
· Global install (with -g): puts stuff in /usr/local or wherever node is installed. This will also allow you to access the module from the command-line, as the bin is symlinked into a PATH folder (usually usr/local/bin).
Refer below link
https://rlogicaltech.medium.com/how-to-install-react-native-on-mac-step-by-step-guide-1ac822aedd4f
You can run the command anywhere in the terminal.
It will install the react-native-cli globally as we are specifying the "-g" option in the command.
Use this
npm install -g expo-cli
this how I solved it.
npm install -save react-native#latest

create-react-app Error: Cannot find module 'react-scripts/scripts/init.js'

Everytime I try to create a brand new project with create-react-app I get this error:
Error: Cannot find module 'react-scripts/scripts/init.js'
Screenshot
THE WAY I CREATE PROJECT:
npx create-react-app new-project
node -v v12.13.1
npm -v 6.12.1
OS Win10
already tried:
npm uninstall -g create-react-app
different project paths
by the way:
the problem disappears when I use --use-npm flag
Any ideas what the reason can be?
Open your command prompt and type "node -v" as well as "npm -v", What do you get there as a response?
Here i found an answer to the same issue, https://stackoverflow.com/a/63334241/7857368
have your tried creating the app with npx create-react-app myapp you don't need to install the create-react-app globally anymore with this command.
Try running the following commands:
npm install
npm install react-scripts
npx create-react-app App-name
React-scripts issue is issue with webpack and babel mostly. You should
create a brand new project using npx create-react-app projectName and this is the recommended approach. This way you don't have to globally install create-react-app in your machine which was previous approach.
Have a look at the documentation. https://reactjs.org/docs/create-a-new-react-app.html
NOTE:
For npx create-react-app projectNameto work. Your node and npm
should be: Node >= 8.10 and npm >= 5.6
And you will have to uninstall old create-react-app from the
machine. See the doc: https://create-react-app.dev/docs/getting-started

I am getting an error while trying to install new React App [duplicate]

When I type the create-react-app my-app command in my terminal, it appears to work - downloading all libraries successfully etc. At the end of that process however I get a message that a template was not provided.
Input
user#users-MacBook-Pro-2 Desktop% create-react-app my-app
Output
Creating a new React app in /Users/user/Desktop/my-app.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...
..... nothing out of the ordinary here .....
✨ Done in 27.28s.
A template was not provided. This is likely because you're using an outdated version of create-react-app.
Please note that global installs of create-react-app are no longer supported.
In package.json of my-app:
"dependencies": {
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-scripts": "3.3.0" <-- up-to-date
}
I checked out the CRA changelog and it looks like support was added for custom templates - however it doesn't look like the command create-react-app my-app would have changed.
Any idea what is going on here?
If you've previously installed create-react-app globally via npm install -g create-react-app, we recommend you uninstall the package using npm uninstall -g create-react-app to ensure that npx always uses the latest version.
Docs
Use either one of the below commands:
npx create-react-app my-app
npm init react-app my-app
yarn create react-app my-app
if npm uninstall -g create-react-app stated above does not work.
Type which create-react-app to know where it is installed. Mine was installed in /usr/bin folder. Then do sudo rm -rf /usr/bin/create-react-app. (Credit to #v42 comment below)
1)
npm uninstall -g create-react-app
or
yarn global remove create-react-app
2)
There seems to be a bug where create-react-app isn't properly uninstalled and using one of the new commands lead to:
A template was not provided. This is likely because you're using an
outdated version of create-react-app.
After uninstalling it with npm uninstall -g create-react-app, check whether you still have it "installed" with which create-react-app (Windows: where create-react-app) on your command line. If it returns something (e.g. /usr/local/bin/create-react-app), then do a rm -rf /usr/local/bin/create-react-app to delete manually.
3)
Then one of these ways:
npx create-react-app my-app
npm init react-app my-app
yarn create react-app my-app
Though already lots of answer is here.
I came up with 3 solutions which I applied step by step when I faced this situation.
First step: From Official manual,
If you've previously installed create-react-app globally via npm install -g create-react-app, we recommend you uninstall the package using npm uninstall -g create-react-app to ensure that npx always uses the latest version.
https://create-react-app.dev/docs/getting-started
You can use these commands below:
npx create-react-app my-app
npm init react-app my-app
yarn create react-app my-app
Second step (If first one doesn't work):
Sometimes it may keep caches.then you can use these commands given below.
npm uninstall -g create-react-app
npm cache clean --force
npm cache verify
yarn create react-app my-app
Third step:(If these 2 won't work)
first uninstall via npm uninstall -g create-react-app,then check if you still have it "installed" with which create-react-app command on your command line. If you got something like (/usr/local/bin/create-react-app) then run this rm -rf /usr/local/bin/create-react-app (folder may vary) to delete manually.
Then again install it via npx/npm/yarn.
NB: I succeed in the last step.
First uninstall create-react-app globally by this command:
npm uninstall -g create-react-app
then in your project directory:
npm install create-react-app#latest
finally:
npx create-react-app my-app
To add up more to the answers above:
With the new release of create-react-app, you can create a new app using custom templates.
Two templates available so far:
cra-template
cra-template-typescript
Usage:
npx create-react-app my-app [--template typescript]
More details of the latest changes in create-react-app:
https://github.com/facebook/create-react-app/releases/tag/v3.3.0
I too had the same problem. When I trid the npm init react-app my-app command returned the same message
A template was not provided. This is likely because you're using an
outdated version of create-react-app.
But
yarn create react-app my-app command works fine.
Clear your npm cache first then use yarn as follows:
npm cache clean --force
npm cache verify
yarn create react-app my-app
I hope this helps.
EDIT
...you might want to try the following after I have looked into this problem further:
npm uninstall -g create-react-app
yarn global remove create-react-app
which create-react-app - If it returns something (e.g. /usr/local/bin/create-react-app), then do a rm -rf /usr/local/bin/create-react-app to delete manually.
npm cache clean --force
npm cache verify
npx create-react-app#latest
These steps should remove globally installed create-react-app installs, you then manually remove the old directories linked to the old globally installed create-react-app scripts. It's then a good idea to clear your npm cache to ensure your not using any old cached versions of create-react-app. Lastly create a new reactjs app with the #latest option like so: npx create-react-app#latest. There has been much confusion on this issue where no template is created when using npx create-react-app, if you follow the steps I have stated above (1-6) then I hope you'll have success.
p.s.
If I wanted to then create a react app in a directory called client then I would type the following command into the terminal:
npx create-react-app#latest ./client
Good luck.
npm install -g create-react-app in your pc
create react project again with npx create-react-app my-app
This worked for me.
npm uninstall -g create-react-app
npx create-react-app my-app
So I've gone through all the steps here, but non helped.
TLDR; run npx --ignore-existing create-react-app
I am on a Mac with Mojave 10.15.2
CRA was not installed globally - didn't find it in /usr/local/lib/node_modules or /usr/local/bin either.
Then I came across this comment on CRA's github issues. Running the command with the --ignore-existing flag helped.
These two steps worked for me
1) Uninstalled react-app globally with this command
npm uninstall -g create-react-app
2) Installed react-app in project folder with this command
npx create-react-app project-name
npx create-react-app#latest your-project-name
work for me after trying all the answers hope that can help someone in the future.
"If you've previously installed create-react-app globally via npm install -g create-react-app, we recommend you uninstall the package using npm uninstall -g create-react-app to ensure that npx always uses the latest version"
This is reported at https://create-react-app.dev/docs/getting-started/. For me, this did not work. I had to re-install create-react-app globally instead.
My steps to fix this problem were to:
npm uninstall -g create-react-app
npm install -g create-react-app
npx create-react-app my-app
All of the option didn't work for me on MacOS. What did work was the following 3 steps:
Delete the node from: /usr/local/bin/
then
install node newly: https://nodejs.org/en/
then
Install react: npx create-react-app my-app follow: https://create-react-app.dev/
For Linux this worked for me
sudo npm uninstall -g create-react-app
npx create-react-app my-test-app
TLDR: Uninstall the global package using npm uninstall -g create-react-app and generate new react apps using npx create-react-app app.
Issue
You're using an older version of create-react-app that you have installed globally using npm. The create-react-app command invokes this global package.
You could've confirmed that you were using an outdated version by running npm outdated -g create-react-app or comparing create-react-app --version with npm view create-react-app.
The fact that the version of react-scripts was up to date, has nothing to do with the version of the package that is bootstrapping the app (create-react-app), which grabs the latest versions of the packages that it uses (react-scripts in this case).
Solution
If you want to continue using the create-react-app command, you'll need to update the global package using npm update -g create-react-app. Note that you'll want to do this periodically to keep it up to date. You'll notice that create-react-app does not recommend this (noted in the logs from your install).
A better approach would be to delete the global install entirely (npm uninstall -g create-react-app) and instead use npx so that it grabs the latest version of the package every time (more detail on npx below).
You should confirm that it was uninstalled globally by trying to use create-react-app to make sure the command is "not found".
Issues with uninstalling?
You can debug where it was installed using which create-react-app. If you're having issues uninstalling it, you may have multiple versions of node/npm on your machine (from multiple installs, or because you use a node version manager such as nvm). This is a separate issue I won't address here, but there's some info in this answer.
A quick nuclear approach would be to forcefully remove it (rm -rf) at the path that which create-react-app returns.
Supplement
Global npm packages and the npx command
$ NPM_PACKAGE_NAME will always use the globally installed version of the package, regardless of which directory you're in.
$ npx NPM_PACKAGE_NAME will use the first version of the package that it finds when searching up from the current directory to the root:
If you have the package in your current directory, it will use that.
Else if you have the package in a directory that is a parent of your current directory, it will use the first one it finds.
Else if you have the package installed globally, it will use that.
Else if you don't have the package at all, it will temporarily install it, use it, and then discard it. - this is the best way to ensure the package is up to date.
More info about npx can be found in this answer.
Using npx with create-react-app
create-react-app has some special commands/aliases to create a react app (instead of npx) that are specific to that package (yarn create react-app, npm init react-app), but npx create-react-app will work the same as it does with other packages.
yarn vs npm global installs
Yarn stores global installs in a different folder than npm, which is why yarn create react-app would work immediately without uninstalling the global npm package (as far as yarn is concerned, the package hasn't been installed).
This is just a temporary solution though, as you'll need to remember to always use yarn instead of npm when using Create React App.
This works for me!
1) npm uninstall -g create-react-app
2) npm install -g create-react-app
3) npx create-react-app app_name
If you have any previously installed create-react-app globally via npm install -g create-react-app, Better to uninstall it using npm uninstall -g create-react-app
This solved my problem
Steps:
1.Uninstall the create-react app
npm uninstall -g create-react-app
2.Now just use
npx create-react-app my-app
this will automatically create the template for u .
This problem is not solved like this, the problem is in the different instances of node, try removing globally create-react-app and then delete the node_modules and package-lock.json from your root user
This work's for me :
Let's, uninstall create-react-app globally by this command:
npm uninstall -g create-react-app
After that in your project directory:
npm install create-react-app#latest
At the last:
npx create-react-app my-app
For typescript :
npx create-react-app my-app --template typescript
First uninstall create-react-app
npm uninstall -g create-react-app
Then run yarn create react-app my-app or npx create-react-app my-app
then running yarn create react-app my-app or npx create-react-app my-app may still gives the error,
A template was not provided. This is likely because you're using an outdated version of create-react-app.Please note that global installs of create-react-app are no longer supported.
This may happens because of the cashes. So next run
npm cache clean --force
then run
npm cache verify
Now its all clear. Now run
yarn create react-app my-app or npx create-react-app my-app
Now you will get what you expected!
I fix this issue on Mac by uninstalling create-react-app from global npm lib, that's basically what said, just try to do, you need also do sudo:
sudo npm uninstall -g create-react-app
Then simply run:
npx create-react-app my-app-name
Now should be all good and get the folder structures as below:
Using the command npm uninstall -g create-react-app didn't work for me.
But this worked:
yarn global remove create-react-app
and then:
npx create-react-app my-app
Such a weird problem because this worked for me yesterday and I came across the same error this morning. Based on the release notes, a new feature was added to support templates so it looks like a few parts have changed in the command line (for example, the --typescript was deprecated in favor of using --template typescript)
I did manage to get it all working by doing the following:
Uninstall global create-react-app npm uninstall create-react-app -g.
Verify npm cache npm cache verify.
Close terminal. I use the mac terminal, if using an IDE maybe close and re-open.
Re-open terminal, browse to where you want your project and run create-react-app via npx using the new template command conventions. For getting it to work, I used the typescript my-app from the documentation site to ensure consistency: npx create-react-app my-app --template typescript
If it works, you should see multiple installs: one for react-scripts and one for the template. The error message should also no longer appear.
npm uninstall -g create-react-app could be an answer in some cases, but not in mine.
You should manually delete your create-react-app located at ~/.node/bin/ or /usr/bin/ (just type which create-react-app and remove it from locations you saw using rm -rf), next just run npm i -g create-react-app.
After that create-react-app will be working correctly.
This worked for me
1.First uninstall create-react-app globally by this command:
npm uninstall -g create-react-app
If there you still have the previous installation please delete the folder called my app completely.(Make sure no program is using that folder including your terminal or cmd promt)
2.then in your project directory:
npm install create-react-app#latest
3.finally:
npx create-react-app my-app
For any Windows users still having this issue, this is what fixed it for me:
Run where create-react-app to get the path (mine was in C:\Users\username\AppData\Local\Yarn\bin).
Navigate to that directory and delete both "create-react-app" and "create-react-app.cmd".
Navigate to the directory you want to start a project in.
Run npm install create-react-app,
npx create-react-app name-of-app,
cd name-of-app, yarn start.
Step #4 will vary based on your configuration, but that's just what got me up and running.
One of the easiest way to do it is by using
npx --ignore-existing create-react-app [project name]
This will remove the old cached version of create-react-app and then get the new version to create the project.
Note: Adding the name of the project is important as just ignoring the existing create-react-app version is stale and the changes in your machines global env is temporary and hence later just using npx create-react-app [project name] will not provide the desired result.
npx create-react-app#latest {project name}
this seems to be the way to make it work.
After using this command:
yarn global upgrade create-react-app
I then tried:
yarn create-react-app my-app but it didn't work for me.
This worked though:
npx create-react-app my-app

Difference between npx and npm?

I have just started learning React, and Facebook helps in simplifying the initial setup by providing the following ready-made project.
If I have to install the skeleton project I have to type npx create-react-app my-app in command-line.
I was wondering why does the Facebook in Github have npx create-react-app my-app rather than npm create-react-app my-app?
Introducing npx: an npm package runner
NPM - Manages packages but doesn't make life easy executing any.NPX - A tool for executing Node packages.
NPX comes bundled with NPM version 5.2+
NPM by itself does not simply run any package. It doesn't run any package as a matter of fact. If you want to run a package using NPM, you must specify that package in your package.json file.
When executables are installed via NPM packages, NPM links to them:
local installs have "links" created at ./node_modules/.bin/ directory.
global installs have "links" created from the global bin/ directory (e.g. /usr/local/bin) on Linux or at %AppData%/npm on Windows.
Documentation you should read
NPM:
One might install a package locally on a certain project:
npm install some-package
Now let's say you want NodeJS to execute that package from the command line:
$ some-package
The above will fail. Only globally installed packages can be executed by typing their name only.
To fix this, and have it run, you must type the local path:
$ ./node_modules/.bin/some-package
You can technically run a locally installed package by editing your packages.json file and adding that package in the scripts section:
{
"name": "whatever",
"version": "1.0.0",
"scripts": {
"some-package": "some-package"
}
}
Then run the script using npm run-script (or npm run):
npm run some-package
NPX:
npx will check whether <command> exists in $PATH, or in the local project binaries, and execute it. So, for the above example, if you wish to execute the locally-installed package some-package all you need to do is type:
npx some-package
Another major advantage of npx is the ability to execute a package which wasn't previously installed:
$ npx create-react-app my-app
The above example will generate a react app boilerplate within the path the command had run in, and ensures that you always use the latest version of a generator or build tool without having to upgrade each time you’re about to use it.
Use-Case Example:
npx command may be helpful in the script section of a package.json file,
when it is unwanted to define a dependency which might not be commonly used or any other reason:
"scripts": {
"start": "npx gulp#3.9.1",
"serve": "npx http-server"
}
Call with: npm run serve
Related questions:
How to use package installed locally in node_modules?
NPM: how to source ./node_modules/.bin folder?
How do you run a js file using npm scripts?
npx is a npm package runner (x probably stands for eXecute). One common way to use npx is to download and run a package temporarily or for trials.
create-react-app is an npm package that is expected to be run only once in a project's lifecycle. Hence, it is preferred to use npx to install and run it in a single step.
As mentioned in the main page https://www.npmjs.com/package/npx, npx can run commands in the PATH or from node_modules/.bin by default.
Note:
With some digging, we can find that create-react-app points to a Javascript file (possibly to /usr/lib/node_modules/create-react-app/index.js on Linux systems) that is executed within the node environment. This is simply a global tool that does some checks. The actual setup is done by react-scripts, whose latest version is installed in the project. Refer https://github.com/facebook/create-react-app for more info.
NPM is a package manager, you can install node.js packages using NPM
NPX is a tool to execute node.js packages.
It doesn't matter whether you installed that package globally or locally. NPX will temporarily install it and run it. NPM also can run packages if you configure a package.json file and include it in the script section.
So remember this, if you want to check/run a node package quickly without installing locally or globally use NPX.
npM - Manager
npX - Execute - easy to remember
npm - Package manager for JavaScript, just like: pip (Python), Maven (Java), NuGet (.NET), Composer (PHP), RubyGems (Ruby), ...
npx - runs a command of a package without installing it explicitly.
Use cases:
You don't want to install packages neither globally nor locally.
You don't have permission to install it globally.
Just want to test some commands.
Sometime, you want to have a script command (generate, convert something, ...) in package.json to execute something without installing these packages as project's dependencies.
Syntax:
npx [options] [-p|--package <package>] <command> [command-arg]...
Package is optional:
npx -p uglify-js uglifyjs --output app.min.js app.js common.js
+----------------+ +--------------------------------------------+
package (optional) command, followed by arguments
For example:
Start a HTTP Server : npx http-server
Lint code : npx eslint ./src
# Run uglifyjs command in the package uglify-js
Minify JS : npx -p uglify-js uglifyjs -o app.min.js app.js common.js
Minify CSS : npx clean-css-cli -o style.min.css css/bootstrap.css style.css
Minify HTML : npx html-minifier index-2.html -o index.html --remove-comments --collapse-whitespace
Scan for open ports : npx evilscan 192.168.1.10 --port=10-9999
Cast video to Chromecast : npx castnow http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.mp4
More about command:
https://docs.npmjs.com/files/package.json#bin
https://github.com/mishoo/UglifyJS2/blob/master/package.json#L17
NPX:
From https://www.futurehosting.com/blog/npx-makes-life-easier-for-node-developers-plus-node-vulnerability-news/:
Web developers can have dozens of projects on their development
machines, and each project has its own particular set of npm-installed
dependencies. A few years back, the usual advice for dealing with CLI
applications like Grunt or Gulp was to install them locally in each
project and also globally so they could easily be run from the command
line.
But installing globally caused as many problems as it solved. Projects
may depend on different versions of command line tools, and polluting
the operating system with lots of development-specific CLI tools isn’t
great either. Today, most developers prefer to install tools locally
and leave it at that.
Local versions of tools allow developers to pull projects from GitHub
without worrying about incompatibilities with globally installed
versions of tools. NPM can just install local versions and you’re good
to go. But project specific installations aren’t without their
problems: how do you run the right version of the tool without
specifying its exact location in the project or playing around with
aliases?
That’s the problem npx solves. A new tool included in NPM 5.2, npx is
a small utility that’s smart enough to run the right application when
it’s called from within a project.
If you wanted to run the project-local version of mocha, for example,
you can run npx mocha inside the project and it will do what you
expect.
A useful side benefit of npx is that it will automatically install npm
packages that aren’t already installed. So, as the tool’s creator Kat
Marchán points out, you can run npx benny-hill without having to deal
with Benny Hill polluting the global environment.
If you want to take npx for a spin, update to the most recent version
of npm.
Simple Definition:
npm - Javascript package manager
npx - Execute npm package binaries
Here's an example of NPX in action: npx cowsay hello
If you type that into your bash terminal you'll see the result. The benefit of this is that npx has temporarily installed cowsay. There is no package pollution since cowsay is not permanently installed. This is great for one off packages where you want to avoid package pollution.
As mentioned in other answers, npx is also very useful in cases where (with npm) the package needs to be installed then configured before running. E.g. instead of using npm to install and then configure the json.package file and then call the configured run command just use npx instead. A real example:
npx create-react-app my-app
NPM => Is a JS package manager.
NPX => Is a tool for executing Node packages and execute npm package binaries.
It is easy to remember:
-npm stands for MANAGER
-npx stands for EXECUTE
NPM: NPM stands for Node Package Manager and is the default package manager for Node.js. It was developed by Isaac Z. Schlueter and was originally released on January 12, 2010. It is entirely written in JavaScript. It consists of a command-line client npm which manages all node.js packages and modules. When node.js is installed, it is included in the installation.
npm run your-package-name
NPX is a tool that use to execute packages.
NPX is an acronym for Node Package Execute The NPX package comes with npm, so when you install npm above 5.2.0, NPX will be installed automatically.
It is an npm package runner that can execute any package that you want from the npm registry without even installing that package. The npx is useful during a single time use package. If you have installed npm below 5.2.0 then npx is not installed in your system.
Run the following command to determine if npx is installed:
npx -v
The following command can be run if npx is not installed.
npm install -g npx
Use npx to execute the package:
npx your-package-name
Simplest Definition:
NPX
The npx stands for Node Package Execute and it comes with the npm,
when you installed npm above 5.2.0 version then automatically npx will
installed. It is an npm package runner that can execute any package
that you want from the npm registry without even installing that
package.
NPM
npm is a package manager for the JavaScript programming language
maintained by npm, Inc. npm is the default package manager for the
JavaScript runtime environment Node.js. It consists of a command line
client, also called npm, and an online database of public and paid-for
private packages
NPM vs. NPX
NPM stands for the Node Package Manager. A text based program for Nodejs package management.
While NPX is a Node Package Runner. Its function is to execute the Nodejs package
NPX will execute binary files from the Nodejs package, both installed and not.
Even NPX can also help us use certain versions of Nodejs without having to use nvm (node.js version management), nave (node.js virtual environment), and nvm (node.js version management).
NPM stands for Node Package Manager. NPM is Node.JS's default package manager. It's written in Javascript. The role of NPM is to manage the package and modules of node.js.
NPX stands for Node Package Execute. NPX comes with npm, when npm is installed above the 5.2.0 version, it gets installed automatically. NPX is an npm package runner and its role is to execute the package from the registry without even installing that package.
Now, the differences between NPM and NPX are as below:
i) NPM is used to install the packages while NPX is used to execute the packages.
ii) Due to npm the packages installed have to be taken care of since it's installed globally while the packages which are used by npx don't need to be taken care of as they are not installed globally.
Simple answer is like
NPX: is used to execute any node package without installing the package on our machine.
NPM: is used to install any node js package in our machine. We can use "require("package-name')" when we install any package using NPM. but we can not import the package when we use NPX.
Example: You should run npm i axios
in this case you are installing axios package in your local machine
and npx create-react-app 'app-name'
here you are executing the create-react-app package directly on your machine without installing it's files.
NPM stands for Node Package Manager.
It comes pre-installed with Node.js. NPM helps to manage packages in your projects as dependencies.
When using NPM, there are two ways to install a package into your local computer.
Locally: When a package is installed locally, it is installed in
./node_modules/.bin/ of the local project directory.
Globally: A global package is installed in the user environment
path. /usr/local/bin for Linux and AppData%/npm for Windows.
To execute a locally installed package, it should be specified in the package.json scripts block as shown below.
"scripts": {
"your-package": "your-package-name"
}
Then, you can execute the package with:
npm run your-package-name
NPX is an NPM package executor.
Currently, NPX is bundled with NPM when you install the NPM version 5.2.0 or higher.
Why NPX over NPM?
No need to edit the package.json file with node_modules paths.
You can directly execute the tool from the command line.
The differences between NPM and NPX are as below:
i) NPM is used to install the packages while NPX is used to execute the packages.
ii) Due to npm the packages installed have to be taken care of since it's installed globally while the packages used by npx don't need to be taken care of as they are not installed globally.
NPX is a tool for creating and executing some features in a new project
NPM is the package manager that contains all of libraries
Here is the simple definition.
NPM is a package manager, you can install node.js packages using NPM
NPX is a tool to execute node.js packages.
Here's an example of what your app creation might look like using npx
npx create-react-app project-name --template all
Simply npm is the Node Package Manager and
npx is the executeable version that run npm packages
npm is a tool that use to install packages and npx is a tool that use to execute packages.
npm-If you wish to run package through npm then you have to specify that package in your package.json and install it locally.
npx-A package can be executable without installing the package. It is an npm package runner so if any packages aren’t already installed it will install them automatically.
npm - package manager
npx - Execute npm package
This is a difference with it.
npm is package manager or installer on the other hand Packages used by npx are not installed globally so you have to carefree for the pollution for the long term.
Actually, I tried many ways to solve this and failed but finally removing/deleting yarn globally solves the problem
just type this command in your commandline terminal:
npm uninstall -g yarn
And then run the command below to install the react starter project
npx create-react-app

How do I use two versions of Electron on the same machine

When I first started to learn Election the book I was using recommended that it be installed using npm install -g electron. Now I read on the npm website that npm install electron --save-dev is the preferred way to install it.
So I created a new project directory and ran npm init then ran
npm install electron --save-dev. According to package.json Electron 1.7.5 was installed, but when I type electron in the project directory it reports version 1.6.10 which is the version that was installed with the -g option.
Is there a way to get my new project to use 1.7.5? I have already completed a small project using version 1.6.10 and don't want to do anything that would keep it from running.
Thanks, Jim
You can run the local version of electron out of the node_modules/.bin directly -- most likely it will be called node_modules/.bin/electron.
You can use npm or gulp (or even a shellscript/batch file) to run the app for you.

Categories