Update npm start script and READMEs

This commit is contained in:
2025-11-20 19:12:34 +00:00
parent e774c74fe9
commit 31662452eb
3 changed files with 37 additions and 6 deletions

View File

@@ -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
``` ```

View File

@@ -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/)

View File

@@ -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",