diff --git a/README.md b/README.md index 54b405e..a2aacd5 100644 --- a/README.md +++ b/README.md @@ -4,8 +4,11 @@ ```sh # Install dependencies -npm install -D recharts tailwindcss postcss autoprefixer +npm install -D recharts tailwindcss postcss autoprefixer nodemon # Initialize tailwind CSS (creates config files) npx tailwindcss init -p + +# Run the development server +npm start ``` diff --git a/docs/README.dev-notes.md b/docs/README.dev-notes.md index e0f518f..4711965 100644 --- a/docs/README.dev-notes.md +++ b/docs/README.dev-notes.md @@ -4,8 +4,9 @@ ```sh # 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 --save recharts 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 -### 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. @@ -156,6 +157,33 @@ Alternatively (not verified) a `.env` file can be created in the project root wi 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 ### Setup webhint in Project @@ -235,5 +263,5 @@ npm uninstall -g hint ### External Resources -* https://github.com/webhintio/hint -* https://webhint.io/docs/user-guide/configuring-webhint/summary/ +* [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/) diff --git a/package.json b/package.json index 786ad48..45e4b2f 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,7 @@ "web-vitals": "^2.1.4" }, "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", "test": "react-scripts test", "eject": "react-scripts eject",