# Dockerize a Rect App (vite) inside a Turborepo

## Ultra-Light HTTP Server with Busybox HTTPD Applet

**Description:** This Docker image is designed to provide an ultra-lightweight HTTP server optimized for efficiently serving static files. It is based on the Busybox system and utilizes the Applet HTTPD for web server functionality.

**General Image Details:**

* **Base Image:** diegofcornejo/httpd-lite:latest
    
* **Purpose:** Efficiently serve static files.
    
* **Size:** The image size has been optimized to be as lightweight as possible, making it ideal for quick and efficient deployments of static content in containerized environments. (158kb)
    

### Example Usage

#### Serving Static Files from your Host Machine

```bash
# Serve static files from the current directory
# Create a configuration file if you don't have one
touch httpd.conf 
# Run the container with the following command:
docker run -p 80:8080 --init --rm -ti -v "$(PWD):/home/static" diegofcornejo/httpd-lite:latest
```

#### Using in a Dockerfile

Here's an example of how to use this image. The `CMD` instruction is optional but can be used to replace the parameters as needed:

```Dockerfile
FROM diegofcornejo/httpd-lite:latest as production

EXPOSE 8080

# Copy your static files
COPY . .

CMD ["/busybox", "httpd", "-f", "-v", "-p", "8080", "-c", "httpd.conf"]
```

#### (Vite) React App built inside a turborepo full example

Assuming you have a project structure like this:

```plaintext
├── turbo.json
├── package.json
├── yarn.lock
├── README.md
└── apps
    └── myapp
        ├── src
        ├── index.html
        └── Dockerfile
```

```Dockerfile
# Base image
FROM alpine:3.18.4 as build

RUN apk update
RUN apk add --no-cache nodejs npm
RUN npm install -g yarn

# Create app directory
WORKDIR /app

# Copy the whole project
COPY ../../ .

# Install dependencies
RUN yarn install

# Build the app
RUN yarn workspace myapp build

# Production stage
FROM diegofcornejo/httpd-lite:latest as production

# Copy build artifacts from the build-vite stage
COPY --from=build /app/apps/myapp/dist .

EXPOSE 8080
```

#### Build image and run container

```bash
# To build the docker image, run the following command:
docker build -f apps/myapp/Dockerfile -t myreactapp:latest .

# To run the docker image, run the following command:
docker run -p 80:8080 --init --rm -ti myreactapp:latest

# Or in detach mode (background):
docker run -p 80:8080 --init --rm -d myreactapp:latest

# Now Open your browser and go to http://localhost:80

# To stop the docker image, run the following command:
docker stop <container_id>
```

Note: When running the container, sending a TERM signal to your TTY won't get propagated due to how Busybox is built. Instead, you can call `docker stop` (or `docker kill` if you can't wait 15 seconds). Alternatively, you can run the container with `docker run -it --rm --init`, which will propagate signals to the process correctly.