First React App
18 Nov 2022 | ReactToday, I will create a react web application with react standards creating command. But, I will introduce some acknowledges that keep you from inaccessible the standards registry in your country(such as China).
Standard Offical Command
The first is first. You see many places that use this command to create react web applications.
npx create-react-app my-app
cd my-app
npm start
By default, npx
are slow and will take some times. You are use yarn
instead.
npm install --global yarn
yarn --version
yarn global add create-react-app
create-react-app my-app
Use Custom Registry
If you got an error that indicates that this registry URL is inaccessible, then you need to switch to an accessible registry. If you live in China, you can use this registry.registry=https://registry.npm.taobao.org/
. Or you can change the command manually in your .npmrc
file. I recommend to change variables to command:
npm config set registry=https://registry.npm.taobao.org
npm config get registry
npm config list
npm install -g create-react-app
create-react-app my-app
cd my-app
npm start
Use Private Registry
If you are using a private registry. The only thing you need to be concerned about is changing the registry and setup credentials.
npm config set registry=https://your private registry
npm config set _auth="<token>"
The command is encrypted by base64
echo -n "<lowecase_email>:<password>" | openssl base64
If you don’t have OpenSSL installed on Windows, you can use the following snippet in windows Powershell.
$MYTEXT = '<lowecase_email>:<password>'
$ENCODED = [Convert]::ToBase64String([Text.Encoding]::UTF8.GetBytes($MYTEXT))
Write-Output $ENCODED
Note:
You can also google to encrypt online base64 credentials, You can also decrypt your credentials, sometimes, windows or Linux will append a newline character\n
or\r\n
at the end, make sure that doesn't include in your passport. I stalled v8.19.3 for npm(npm --version
), And v16.17.0 for my node(node --version
) according my experience, but the latest node version could cause encryption fail(9.1.2). Check npm history.
.npmrc config file
The .npmrc
file can exist in four different places.
npmrc file | Path |
---|---|
Per-project NPM config | projectPath\. npmrc |
Global NPM config | C:\Users\%username%\AppData\Roaming\npm\etc\.npmrc |
Per-user NPM config | C:\Users\%username%\.npmrc |
Built-in NPM config | nodejsPath\node_modules\npm\.npmrc |
` Per project NPM config and
Per-user NPM config are both frequently used config files. Publishable settings can be placed under
Per-Project, sensitive information should be placed under
Per-user` folder.
Cache
The npm cache file located at your C:\Users\{User}\AppData\Local\npm-cache
and C:\Users\{User}\AppData\Roaming\npm-cache
folders. You can clean your cache by deleted these two folders, or with command
npm cache clean --force
Comments