268 lines
7.2 KiB
Markdown
268 lines
7.2 KiB
Markdown
# Development Notes
|
|
|
|
## Initial Setup for Tailwind CSS and Recharts
|
|
|
|
```sh
|
|
# Hard reset in case of version conflicts / existing installs
|
|
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
|
|
|
|
# Fresh install
|
|
npm install
|
|
|
|
# Initialize tailwind CSS (creates config files)
|
|
# Note: This may overwrite existing project files
|
|
npx tailwindcss init -p
|
|
```
|
|
|
|
Content of ./tailwind.config.js:
|
|
|
|
```javascript
|
|
/** @type {import('tailwindcss').Config} */
|
|
module.exports = {
|
|
content: [
|
|
"./src/**/*.{js,jsx,ts,tsx}",
|
|
],
|
|
theme: {
|
|
extend: {},
|
|
},
|
|
plugins: [],
|
|
}
|
|
```
|
|
|
|
Content of ./src/index.css:
|
|
|
|
```css
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
```
|
|
|
|
## WSL Networking Issues
|
|
|
|
If access to `http://localhost:3000` dose not work from Windows host, when running the React development server in WSL, look at the following troubleshooting steps.
|
|
|
|
Note that not all steps may be necessary, depending on your specific WSL and Windows setup.
|
|
|
|
In my case Option 1 (NAT, WSL default), cross-env host binding to `HOST=0.0.0.0`, port forwarding, and firewall rules were necessary to access the dev server from Windows host via `http://172.20.39.187:3000` (my WSL IP address).
|
|
|
|
In my case the `npm start` terminal output shows:
|
|
|
|
```sh
|
|
Local: http://localhost:3000
|
|
On Your Network: http://172.20.39.187:3000
|
|
```
|
|
|
|
### WSL Networking Modes
|
|
|
|
Check and potentially change the network mode of WSL.
|
|
|
|
#### Option 1: NAT Networking Mode (Default)
|
|
|
|
This is the default mode used if Option 2 is not specifically set. Unless the settings described in Option 2 are applied, this mode is active.
|
|
|
|
#### Option 2: Mirrored Networking Mode (Windows 11 22H2+)
|
|
|
|
In `%USERPROFILE%\.wslconfig` add:
|
|
|
|
```ini
|
|
[wsl2]
|
|
networkingMode=mirrored
|
|
```
|
|
|
|
Then stop WSL and start it again so the changes take effect:
|
|
|
|
```batch
|
|
wsl --shutdown
|
|
wsl
|
|
```
|
|
|
|
### Dev Server Host Binding
|
|
|
|
To ensure that the React development server binds to all interfaces in WSL, install the `cross-env` package:
|
|
|
|
```sh
|
|
npm install cross-env --save-dev
|
|
```
|
|
|
|
And modify the `start` script in `package.json` as follows.
|
|
|
|
```json
|
|
"scripts": {
|
|
// "start": "react-scripts start" // Original line, basic start command
|
|
"start": "cross-env HOST=0.0.0.0 react-scripts start"
|
|
}
|
|
```
|
|
|
|
Note that when I tried it with only `HOST=0.0.0.0` but without `cross-env`, even though some things may have changed, the server was still bound to 127.0.1.1 and not to all interfaces.
|
|
|
|
### Port Forwarding
|
|
|
|
If you want to access the React dev server via `http://localhost:3000` on Windows host, you need to set up port forwarding from Windows localhost to the WSL IP address.
|
|
|
|
First get the WSL IP address by running the following command in WSL:
|
|
|
|
```sh
|
|
hostname -I
|
|
```
|
|
|
|
Then use the WSL IP address (in my case `172.20.39.187`) in the following command to set up permanent port forwarding.
|
|
|
|
```batch
|
|
# Add port forwarding rule
|
|
netsh interface portproxy add v4tov4 listenport=3000 listenaddress=127.0.0.1 connectport=3000 connectaddress=172.20.39.187
|
|
|
|
# In case you need to delete the rule later, use:
|
|
netsh interface portproxy delete v4tov4 listenport=3000 listenaddress=127.0.0.1
|
|
```
|
|
|
|
You should now be able to access the React dev server via `http://localhost:3000` on Windows host, instead of having to use the WSL IP address.
|
|
|
|
### Open Firewall Ports
|
|
|
|
In case you have trouble with your Windows Firewall blocking access to the forwarded port, or you want to allow access from other devices on your network, you may need to open the port in the firewall.
|
|
|
|
Run the following PowerShell commands to open the necessary port (just an example, ensure that the settings fit your security requirements):
|
|
|
|
```powershell
|
|
# Open port 3000 for inbound TCP traffic on all network interfaces
|
|
New-NetFirewallRule -DisplayName "WSL React Dev Server" -Direction Inbound -Action Allow -Protocol TCP -LocalPort 3000
|
|
|
|
# Do the same but only for the WSL virtual network interface
|
|
New-NetFirewallRule -DisplayName "Allow WSL Inbound Port 3000" -Direction Inbound -Action Allow -Protocol TCP -LocalPort 3000 -InterfaceAlias "vEthernet (WSL (Hyper-V firewall))"
|
|
```
|
|
|
|
Just to rule out potential firewall issues, it is always an option to temporarily disable the firewall all together.
|
|
|
|
> WARNING: IF YOU DO THIS, DO NOT FORGET TO RE-ENABLE THE FIREWALL AFTER TESTING!
|
|
|
|
## Development Server
|
|
|
|
### (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.
|
|
|
|
```json
|
|
"scripts": {
|
|
"start": "cross-env HOST=0.0.0.0 BROWSER=none react-scripts start"
|
|
}
|
|
```
|
|
|
|
Alternatively (not verified) a `.env` file can be created in the project root with the following content, so no changes to `package.json` are necessary.
|
|
|
|
```ini
|
|
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
|
|
|
|
Check local config:
|
|
|
|
```sh
|
|
# Install hint locally in the project
|
|
npm install hint --save-dev
|
|
|
|
# Optionally use the web-recommended config
|
|
#npm install @hint/configuration-web-recommended --save-dev
|
|
#npm create hintrc
|
|
|
|
# Or create .hintrc manually with a basic config
|
|
```sh
|
|
cat > .hintrc <<EOL
|
|
{
|
|
"extends": ["web-recommended"]
|
|
}
|
|
EOL
|
|
```
|
|
|
|
Add `webhint` script to `package.json`:
|
|
|
|
```json
|
|
"scripts": {
|
|
"webhint": "hint"
|
|
}
|
|
```
|
|
|
|
Optionally install puppeteer if you want to run webhint with headless Chrome:
|
|
|
|
```sh
|
|
npm install puppeteer --save-dev
|
|
```
|
|
|
|
### Run webhint
|
|
|
|
Ensure that the React development server is running when you run webhint against `http://localhost:3000`.
|
|
|
|
```sh
|
|
npm start
|
|
```
|
|
|
|
Run webhint:
|
|
|
|
```sh
|
|
npm run webhint -- http://localhost:3000
|
|
```
|
|
|
|
Open `./hint-report/http-localhost-3000.html` in a browser to see the report.
|
|
|
|
### VS Code: Problems with "Microsoft Edge Tools for VS Code" Extension
|
|
|
|
Error message:
|
|
|
|
> Unable to start webhint. Ensure you are using the latest version of the `hint` package.
|
|
|
|
Solution:
|
|
|
|
Install webhint locally in the project as shown above, or update to the latest version:
|
|
|
|
```sh
|
|
npm install hint@latest --save-dev
|
|
```
|
|
|
|
In doubt check the global installation and remove it if necessary:
|
|
|
|
```sh
|
|
# Global config
|
|
npm list -g hint
|
|
|
|
# Uninstall global version if necessary
|
|
npm uninstall -g hint
|
|
```
|
|
|
|
### External Resources
|
|
|
|
* [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/)
|