updated documentation

# React Tornado Blog Demo (Vite Edition)

**Using Vite instead of Create React App (CRA)** for development and deployment of multiple isolated React + Tornado apps on a shared Nginx server.

---

## 🧠 Why Switch to Vite?

Vite offers a faster, modern development workflow compared to CRA:

| Area | CRA | Vite |

|------|-----|------|

| Dev server port | 3000 | 5173 |

| Start command | `npm start` | `npm run dev` |

| Build output | `build/` | `dist/` |

| Environment variables | `REACT_APP_*` | `VITE_*` |

| Base path config | `homepage` in `package.json` | `base` in `vite.config.js` |

---

## 🧱 Development Setup

### docker-compose.yml

```yaml

services:

  vite-frontend:

    build:

      context: ./react-frontend

      dockerfile: Dockerfile

    volumes:

      - ./react-frontend/my-vite-app:/app

    ports:

      - "5173:5173"

    stdin_open: true

    tty: true

    environment:

      - CHOKIDAR_USEPOLLING=true

    command: ["npm", "run", "dev"]

    depends_on:

      - tornado-backend

    networks:

      - app-network

  tornado-backend:

    build: ./tornado-backend

    ports:

      - "8888:8888"

    networks:

      - app-network

  postgres:

    image: postgres:10.3

    environment:

      POSTGRES_USER: blog

      POSTGRES_PASSWORD: blog

      POSTGRES_DB: blog

    ports:

      - "5432:5432"

    networks:

      - app-network

  adminer:

    image: adminer

    ports:

      - "8080:8080"

    networks:

      - app-network

networks:

  app-network:

    driver: bridge

```

Access:

- Frontend: [http://localhost:5173](http://localhost:5173)

- Backend: [http://localhost:8888](http://localhost:8888)

- Database UI: [http://localhost:8080](http://localhost:8080)

---

## ⚙️ Vite Configuration

### vite.config.js

```js

import { defineConfig } from 'vite'

import react from '@vitejs/plugin-react'

export default defineConfig({

  plugins: [react()],

  base: '/blog-demo-01/',  // 👈 Base path for your app

  server: {

    host: true,

    port: 5173,

    watch: {

      usePolling: true,

    },

  },

})

```

The `base` field replaces CRA's `"homepage"` property from `package.json`.

---

## 🌍 Environment Variables

Vite exposes only variables prefixed with `VITE_`.

Example `.env.production`:

```

VITE_BACKEND_URL=https://aidaho-tinkering-club.uni-hohenheim.de/blog-demo-01/api

VITE_FRONTEND_URL=https://aidaho-tinkering-club.uni-hohenheim.de/blog-demo-01

```

Usage in React code:

```js

const backendBaseUrl = import.meta.env.VITE_BACKEND_URL;

```

---

## 🚀 Production Build and Deployment

Build your app inside a Node container:

```bash

docker run -it --rm -v $(pwd)/react-frontend/my-vite-app:/app -w /app node:20-alpine sh

npm install

npm run build

```

Vite outputs to `dist/` instead of `build/`.

Copy the built files to Nginx static directory:

```bash

cp -rf ./react-frontend/my-vite-app/dist/* /srv/nginx/assets/static/blog-demo-01/

```

Restart the nginx container.

---

## 🧩 Multi-Stage Docker Build (Vite → Nginx)

You can automate the build and serve process using a multi-stage Dockerfile.

### Dockerfile

```dockerfile

# ===== Stage 1: Build with Vite =====

FROM node:20-alpine AS build

WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . .

RUN npm run build

# ===== Stage 2: Serve via Nginx =====

FROM nginx:alpine

RUN rm -rf /usr/share/nginx/html/*

COPY --from=build /app/dist /usr/share/nginx/html

COPY nginx.conf /etc/nginx/conf.d/default.conf

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

```

### nginx.conf

```nginx

server {

  listen 80;

  server_name localhost;

  root /usr/share/nginx/html;

  index index.html;

  location / {

    try_files $uri /index.html;

  }

}

```

Then deploy with:

```bash

docker-compose -f docker-compose.prod.yml up -d --build

```

---

## ✅ Summary of Changes from CRA

| Area | Old (CRA) | New (Vite) |

|------|------------|------------|

| Dev command | `npm start` | `npm run dev` |

| Port | 3000 | 5173 |

| Output dir | `build/` | `dist/` |

| Base path config | `"homepage"` | `base` in `vite.config.js` |

| Env vars prefix | `REACT_APP_` | `VITE_` |

| Static copy target | `/build/*` | `/dist/*` |

---

## 🧠 Benefits of Vite

- ⚡ Faster dev server & hot reloads

- 📦 Smaller build output

- 🧩 Simpler config and path handling

- 🚀 Easy Docker automation via multi-stage builds

---

© 2025 University of Hohenheim — Aidaho Tinkering Club