d5e8b63682
All checks were successful
Docker Build and Push / build-and-push (push) Successful in 7s
117 lines
3.1 KiB
Markdown
117 lines
3.1 KiB
Markdown
# 🔭 **Eye – A React Vite Image-Utility Demo**
|
||
|
||
> A lightweight React starter built with Vite, featuring custom image helpers,
|
||
> a simple REST API wrapper, ESLint + Prettier, Docker support, and a
|
||
> ready-to-run Docker-Compose setup.
|
||
|
||
---
|
||
|
||
## 🚀 Quick Start
|
||
|
||
```bash
|
||
# Clone the repo
|
||
git clone https://github.com/<user>/eye.git
|
||
cd eye
|
||
|
||
# Install dependencies (Node v18+ recommended)
|
||
npm install
|
||
|
||
# Run the development server
|
||
npm run dev
|
||
# → Open http://localhost:5173
|
||
|
||
# Build for production
|
||
npm run build
|
||
|
||
# Preview the production build
|
||
npm run preview
|
||
```
|
||
|
||
> **Tip** – Use the VS Code *Open Folder* command for IntelliSense and auto-formatting.
|
||
|
||
---
|
||
|
||
## 📁 Project Structure
|
||
|
||
```
|
||
src/
|
||
├── App.jsx # Main React component
|
||
├── main.jsx # Entry point for the React application
|
||
├── services/
|
||
│ └── api.js # Axios wrapper for API calls
|
||
├── utils/
|
||
│ └── imageUtils.js # Helpers for image scaling
|
||
public/
|
||
├── index.html # HTML template
|
||
└── favicon.svg # Site icon
|
||
vite.config.js # Vite configuration
|
||
eslint.config.js # ESLint rules
|
||
Dockerfile # Docker setup
|
||
docker-compose.yml # Multi-service setup using Docker Compose
|
||
```
|
||
|
||
---
|
||
|
||
## 🛠️ Available Scripts
|
||
|
||
| Script | Description |
|
||
|--------|-------------|
|
||
| `dev` | Starts Vite dev server with HMR. |
|
||
| `build` | Builds optimized assets for production. |
|
||
| `preview` | Serves the built files locally. |
|
||
| `lint` | Runs ESLint with auto-fix. |
|
||
| `lint:check` | Checks linting without modifying files. |
|
||
|
||
---
|
||
|
||
## 🔧 Configuration
|
||
|
||
| File | Purpose |
|
||
|-----------------|----------------------------------------------|
|
||
| `vite.config.js` | Core Vite config, integrates @vitejs/plugin-react. |
|
||
| `eslint.config.js` | ESLint rules – see [ESLint docs](https://eslint.org). |
|
||
| `Dockerfile` | Builds a minimal Node v18 image, serves the built bundle. |
|
||
| `docker-compose.yml` | Orchestrates dev and prod services. |
|
||
|
||
---
|
||
|
||
## 📦 Docker & Docker-Compose
|
||
|
||
> The repo ships with a simple Docker setup that can be used for local dev or production deployment.
|
||
|
||
```bash
|
||
# Build & run containers
|
||
docker compose up --build
|
||
# → App is available at http://localhost:5173
|
||
|
||
# Stop containers
|
||
docker compose down
|
||
```
|
||
|
||
---
|
||
|
||
## 📚 Contributing
|
||
|
||
1. Fork the repo and create a feature branch.
|
||
2. Run `npm run lint` before submitting a PR.
|
||
3. Follow the existing style and add unit tests where appropriate.
|
||
4. Ensure all tests pass locally: `npm test`.
|
||
|
||
See `CONTRIBUTING.md` for more details.
|
||
|
||
---
|
||
|
||
## 📄 License
|
||
|
||
This project is licensed under the MIT License – see the `LICENSE` file for details.
|
||
|
||
---
|
||
|
||
## 🤔 FAQ / Troubleshooting
|
||
|
||
| Issue | Fix |
|
||
|-------------------------------|-------------------------------------------|
|
||
| **`vite: command not found`** | Ensure Node v18+ is installed and `npx vite` works. |
|
||
| **CORS errors** | API calls are proxied via Vite (`/api`). Adjust `proxy` in `vite.config.js`. |
|
||
| **Build fails on Docker** | Verify `Dockerfile` uses the correct `CMD` and ports. |
|