Update npm start script and READMEs
This commit is contained in:
@@ -4,8 +4,11 @@
|
|||||||
|
|
||||||
```sh
|
```sh
|
||||||
# Install dependencies
|
# Install dependencies
|
||||||
npm install -D recharts tailwindcss postcss autoprefixer
|
npm install -D recharts tailwindcss postcss autoprefixer nodemon
|
||||||
|
|
||||||
# Initialize tailwind CSS (creates config files)
|
# Initialize tailwind CSS (creates config files)
|
||||||
npx tailwindcss init -p
|
npx tailwindcss init -p
|
||||||
|
|
||||||
|
# Run the development server
|
||||||
|
npm start
|
||||||
```
|
```
|
||||||
|
|||||||
@@ -4,8 +4,9 @@
|
|||||||
|
|
||||||
```sh
|
```sh
|
||||||
# Hard reset in case of version conflicts / existing installs
|
# Hard reset in case of version conflicts / existing installs
|
||||||
npm uninstall tailwindcss postcss autoprefixer recharts
|
npm uninstall tailwindcss postcss autoprefixer recharts nodemon
|
||||||
npm install -D tailwindcss@^3.0.0 postcss@^8.0.0 autoprefixer@^10.0.0
|
npm install -D tailwindcss@^3.0.0 postcss@^8.0.0 autoprefixer@^10.0.0
|
||||||
|
|
||||||
npm install --save recharts
|
npm install --save recharts
|
||||||
rm -rf node_modules package-lock.json
|
rm -rf node_modules package-lock.json
|
||||||
|
|
||||||
@@ -140,7 +141,7 @@ Just to rule out potential firewall issues, it is always an option to temporaril
|
|||||||
|
|
||||||
## Development Server
|
## Development Server
|
||||||
|
|
||||||
### Auto Open in Browser
|
### (Prevent) Auto Open in Browser
|
||||||
|
|
||||||
Per default, the React development server does automatically open the app in the browser when started. If this is not desired, add `BROWSER=none` to the `start` script in `package.json` as follows. Note that this also requires the `cross-env` package as described above.
|
Per default, the React development server does automatically open the app in the browser when started. If this is not desired, add `BROWSER=none` to the `start` script in `package.json` as follows. Note that this also requires the `cross-env` package as described above.
|
||||||
|
|
||||||
@@ -156,6 +157,33 @@ Alternatively (not verified) a `.env` file can be created in the project root wi
|
|||||||
BROWSER=none
|
BROWSER=none
|
||||||
```
|
```
|
||||||
|
|
||||||
|
### Hot Reloading File System Issues (in WSL)
|
||||||
|
|
||||||
|
Install development dependency `nodemon` to monitor file changes and restart the server automatically.
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm install -D nodemon
|
||||||
|
```
|
||||||
|
Modify the `start` script in `package.json` to use `nodemon` with polling enabled. This helps in environments like WSL where file system events may not be detected properly.
|
||||||
|
|
||||||
|
```json
|
||||||
|
"scripts": {
|
||||||
|
"start": "cross-env HOST=0.0.0.0 BROWSER=none CHOKIDAR_USEPOLLING=true react-scripts start"
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Alternatively, add `CHOKIDAR_USEPOLLING=true` to a `.env` file in the project root:
|
||||||
|
|
||||||
|
```ini
|
||||||
|
echo CHOKIDAR_USEPOLLING=true >> .env
|
||||||
|
```
|
||||||
|
|
||||||
|
Then the `start` script can remain as:
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm start
|
||||||
|
```
|
||||||
|
|
||||||
## Webhint
|
## Webhint
|
||||||
|
|
||||||
### Setup webhint in Project
|
### Setup webhint in Project
|
||||||
@@ -235,5 +263,5 @@ npm uninstall -g hint
|
|||||||
|
|
||||||
### External Resources
|
### External Resources
|
||||||
|
|
||||||
* https://github.com/webhintio/hint
|
* [https://github.com/webhintio/hint](https://github.com/webhintio/hint)
|
||||||
* https://webhint.io/docs/user-guide/configuring-webhint/summary/
|
* [https://webhint.io/docs/user-guide/configuring-webhint/summary/](https://webhint.io/docs/user-guide/configuring-webhint/summary/)
|
||||||
|
|||||||
@@ -15,7 +15,7 @@
|
|||||||
"web-vitals": "^2.1.4"
|
"web-vitals": "^2.1.4"
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "cross-env HOST=0.0.0.0 BROWSER=none react-scripts start",
|
"start": "cross-env HOST=0.0.0.0 BROWSER=none CHOKIDAR_USEPOLLING=true FAST_REFRESH=false react-scripts start",
|
||||||
"build": "react-scripts build",
|
"build": "react-scripts build",
|
||||||
"test": "react-scripts test",
|
"test": "react-scripts test",
|
||||||
"eject": "react-scripts eject",
|
"eject": "react-scripts eject",
|
||||||
|
|||||||
Reference in New Issue
Block a user