cbaoth/med-plan-assistant
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Migrate from Create React App to Vite; update docs and configs

Browse Source
This commit is contained in:
Andreas Weyer
2026-01-07 19:52:25 +00:00
parent 641829d87a
commit 5e6fb273a7
6 changed files with 92 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@@ -23,7 +23,7 @@ The app will be available at `http://localhost:3000` (or `http://0.0.0.0:3000` i
- **shadcn/ui** component library (Radix UI primitives) - **shadcn/ui** component library (Radix UI primitives)
- **Tailwind CSS** for styling - **Tailwind CSS** for styling
- **Recharts** for concentration-time charts - **Recharts** for concentration-time charts
- **Create React App** as build tool - **Vite** as build tool
## 📋 Features ## 📋 Features

6
docs/README.create-react-app.md
View File

@@ -1,6 +1,8 @@
# Getting Started with Create React App # Getting Started with Create React App (ARCHIVED)
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). > **Note:** This project has been migrated from Create React App to Vite. This file is kept for historical reference only.
This project was originally bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
## Available Scripts ## Available Scripts

116
docs/README.dev-notes.md
View File

@@ -6,7 +6,7 @@
- **shadcn/ui** component library (Radix UI + Tailwind) - **shadcn/ui** component library (Radix UI + Tailwind)
- **Tailwind CSS 3.4.18** for styling - **Tailwind CSS 3.4.18** for styling
- **Recharts 3.3.0** for data visualization - **Recharts 3.3.0** for data visualization
- **Create React App 5.0.1** as build tool - **Vite 5** as build tool
## Initial Setup (Fresh Clone) ## Initial Setup (Fresh Clone)
@@ -14,13 +14,20 @@
# Install all dependencies # Install all dependencies
npm install npm install
# Run development server # Run development server (Vite on port 3000)
npm start npm start
# Build for production # Build for production
npm run build npm run build
# Optionally preview the production build
npm run preview
``` ```
### 2026-01-07 Build Tool Migration
We migrated from Create React App to Vite to resolve conflicting optional peer dependencies around `typescript` (CRA expected TS `^3.2 || ^4` while several libraries prefer TS `^5`). Vite supports modern TypeScript and avoids those conflicts, making new workspace setups straightforward. It is also much faster in dev mode.
## shadcn/ui Setup (Already Done) ## shadcn/ui Setup (Already Done)
The project was set up with shadcn/ui components. If you need to add more components: The project was set up with shadcn/ui components. If you need to add more components:
@@ -80,11 +87,13 @@ Global styles in `./src/styles/global.css`:
## WSL Networking Issues ## 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. Please be aware that the issues and potential solutions in this section were relevant when using Create React App's webpack dev server. They may still apply to Vite in some cases, but Vite generally handles WSL2 networking better. The documentation was changed to reflect Vite usage (see earlier revisions), but never verified in all details.
If access to `http://localhost:3000` does not work from Windows host when running the Vite dev 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. 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). **For Vite:** The `HOST=0.0.0.0` binding is configured in `vite.config.ts` with `server.host: true`. The `start:wsl2` script also sets the environment variable as a fallback.
In my case the `npm start` terminal output shows: In my case the `npm start` terminal output shows:
@@ -119,26 +128,19 @@ wsl
### Dev Server Host Binding ### Dev Server Host Binding
To ensure that the React development server binds to all interfaces in WSL, install the `cross-env` package: **Vite** automatically binds to all interfaces when `server.host: true` is set in `vite.config.ts` (already configured).
```sh For WSL2 environments, use the dedicated script:
npm install cross-env --save-dev
```bash
npm run start:wsl2
``` ```
And modify the `start` script in `package.json` as follows. This sets `HOST=0.0.0.0` explicitly as an environment variable for additional compatibility.
```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 ### 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. If you want to access the Vite 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: First get the WSL IP address by running the following command in WSL:
@@ -159,7 +161,7 @@ netsh interface portproxy add v4tov4 listenport=3000 listenaddress=127.0.0.1 con
#netsh interface portproxy delete v4tov4 listenport=3000 listenaddress=127.0.0.1 #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. You should now be able to access the Vite dev server via `http://localhost:3000` on Windows host, instead of having to use the WSL IP address.
### Open Firewall Ports ### Open Firewall Ports
@@ -179,33 +181,22 @@ In case the above does not resolve your issues, just to rule out potential firew
## VS Code Dev Container Port Forwarding ## VS Code Dev Container Port Forwarding
When running the React dev server in a VS Code dev container (WSL2 + Podman/Docker), VS Code automatically forwards ports from the container to the Windows host. However, you may encounter: When running the Vite dev server in a VS Code dev container (WSL2 + Podman/Docker), VS Code automatically forwards ports from the container to the Windows host.
1. **Port remapping**: If port 3000 is busy on Windows, VS Code may forward to 3001 or another available port **Vite HMR (Hot Module Replacement) automatically detects the correct WebSocket port** from the page URL, so no special configuration is needed (unlike the old webpack dev server which required `WDS_SOCKET_PORT=0`).
2. **WebSocket errors**: The React dev server's WebSocket may try to connect to the original port instead of the forwarded one
### Fix WebSocket Connection Issues You may encounter:
Create a `.env.development` file in the project root: 1. **Port remapping**: If port 3000 is busy on Windows, VS Code may forward to 3001 or another available port - this is normal and Vite will adapt automatically.
```ini
# WebSocket configuration for dev server
# This ensures hot-reloading works correctly when accessing via VS Code port forwarding
WDS_SOCKET_PORT=0
```
Setting `WDS_SOCKET_PORT=0` tells webpack dev server to use the same port as the page URL, automatically adapting to VS Code's port forwarding.
### Dev Container vs Direct WSL2 Configuration Differences ### Dev Container vs Direct WSL2 Configuration Differences
**In VS Code Dev Containers:** **In VS Code Dev Containers:**
- `HOST=0.0.0.0` is **not needed** - VS Code handles port forwarding from container's localhost - `HOST=0.0.0.0` is **not needed** - VS Code handles port forwarding from container's localhost
- `CHOKIDAR_USEPOLLING=true` is **usually not needed** - container filesystem is typically better than WSL2's - File watching works reliably - Vite's HMR is fast and stable
- React Fast Refresh works well - keep it enabled
**In Direct WSL2 (no container):** **In Direct WSL2 (no container):**
- `HOST=0.0.0.0` is **required** - to bind to WSL2's network interface - `HOST=0.0.0.0` is **recommended** - to bind to WSL2's network interface for host access
- `CHOKIDAR_USEPOLLING=true` may be **needed** - WSL2 filesystem watch can be unreliable
- Manual port forwarding with `netsh interface portproxy` may be needed - Manual port forwarding with `netsh interface portproxy` may be needed
**Project Scripts:** **Project Scripts:**
@@ -223,8 +214,8 @@ npm run start:wsl2
Configured in `package.json`: Configured in `package.json`:
```json ```json
"scripts": { "scripts": {
"start": "cross-env BROWSER=none react-scripts start", "start": "vite",
"start:wsl2": "cross-env HOST=0.0.0.0 BROWSER=none CHOKIDAR_USEPOLLING=true react-scripts start" "start:wsl2": "HOST=0.0.0.0 vite"
} }
``` ```
@@ -239,7 +230,7 @@ In `.devcontainer/devcontainer.json`, you can configure port forwarding:
"forwardPorts": [3000], "forwardPorts": [3000],
"portsAttributes": { "portsAttributes": {
"3000": { "3000": {
"label": "React Dev Server", "label": "Vite Dev Server",
"onAutoForward": "notify" "onAutoForward": "notify"
} }
} }
@@ -277,39 +268,30 @@ netsh interface portproxy delete v4tov4 listenport=3000 listenaddress=127.0.0.1
### (Prevent) 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. **Vite does not automatically open the browser** by default when the dev server starts. If you want to enable this behavior, add to `vite.config.ts`:
```json ```typescript
"scripts": { export default defineConfig({
"start": "cross-env HOST=0.0.0.0 BROWSER=none react-scripts start" server: {
} open: true // Opens browser automatically
}
});
``` ```
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. ### Hot Module Replacement (HMR)
```ini Vite's HMR is significantly faster than webpack and works reliably in most environments including WSL2 and dev containers. File system watching is handled natively and typically doesn't require polling.
BROWSER=none
```
### Hot Reloading File System Issues (in WSL) If you encounter issues with HMR not detecting changes (rare), you can configure polling in `vite.config.ts`:
Install development dependency `nodemon` to monitor file changes and restart the server automatically. ```typescript
export default defineConfig({
```sh server: {
npm install -D nodemon watch: {
``` usePolling: true
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: Then the `start` script can remain as:
@@ -357,7 +339,7 @@ npm install puppeteer --save-dev
### Run webhint ### Run webhint
Ensure that the React development server is running when you run webhint against `http://localhost:3000`. Ensure that the Vite development server is running when you run webhint against `http://localhost:3000`.
```sh ```sh
npm start npm start

16
index.html Normal file
View File

@@ -0,0 +1,16 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Medication Plan Assistant" />
<link rel="manifest" href="/manifest.json" />
<title>Medication Plan Assistant</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/index.tsx"></script>
</body>
</html>

15
package.json
View File

@@ -19,18 +19,17 @@
"react-dom": "^19.1.1", "react-dom": "^19.1.1",
"react-i18next": "^16.3.5", "react-i18next": "^16.3.5",
"react-is": "^19.2.0", "react-is": "^19.2.0",
"react-scripts": "5.0.1",
"recharts": "^3.3.0", "recharts": "^3.3.0",
"tailwind-merge": "^3.4.0", "tailwind-merge": "^3.4.0",
"tailwindcss-animate": "^1.0.7" "tailwindcss-animate": "^1.0.7"
}, },
"scripts": { "scripts": {
"start": "cross-env BROWSER=none react-scripts start", "start": "vite",
"start:wsl2": "cross-env HOST=0.0.0.0 BROWSER=none CHOKIDAR_USEPOLLING=true react-scripts start", "start:wsl2": "HOST=0.0.0.0 vite",
"kill": "lsof -ti:3000 | xargs kill -9 2>/dev/null && echo 'Cleared port 3000' || echo 'Port 3000 was not in use'", "kill": "lsof -ti:3000 | xargs kill -9 2>/dev/null && echo 'Cleared port 3000' || echo 'Port 3000 was not in use'",
"build": "react-scripts build", "build": "vite build",
"test": "react-scripts test", "preview": "vite preview",
"eject": "react-scripts eject", "test": "echo 'Test runner not configured for Vite yet' && exit 0",
"check": "tsc --noEmit", "check": "tsc --noEmit",
"lint": "eslint 'src/**/*.{js,jsx,ts,tsx}'", "lint": "eslint 'src/**/*.{js,jsx,ts,tsx}'",
"lint:fix": "eslint 'src/**/*.{js,jsx,ts,tsx}' --fix", "lint:fix": "eslint 'src/**/*.{js,jsx,ts,tsx}' --fix",
@@ -70,6 +69,8 @@
"postcss": "^8.5.6", "postcss": "^8.5.6",
"puppeteer": "^24.27.0", "puppeteer": "^24.27.0",
"tailwindcss": "^3.4.18", "tailwindcss": "^3.4.18",
"typescript": "^5.9.3" "typescript": "^5.9.3",
"vite": "^5.0.0",
"@vitejs/plugin-react": "^4.0.0"
} }
} }

14
vite.config.ts
View File

@@ -0,0 +1,14 @@
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
server: {
port: 3000,
host: true,
},
preview: {
port: 3000,
host: true,
},
});