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

# 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:

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:

├── turbo.json
├── package.json
├── yarn.lock
├── README.md
└── apps
    └── myapp
        ├── src
        ├── index.html
        └── 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

# 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.

Dockerize a Rect App (vite) inside a Turborepo

Comments

More from this blog

Deepsec (Vercel Security Harness): a practical guide to setup, troubleshooting, and triaging findings

Deepsec (Vercel Security Harness): guía práctica de configuración, troubleshooting y triaje de findings

Setting Up a Monitoring Stack in Docker Compose

Deploy Jupyter Lite on Vercel / Netlify

Ultra-Light HTTP Server with Busybox HTTPD Applet

Example Usage

Serving Static Files from your Host Machine

Using in a Dockerfile

(Vite) React App built inside a turborepo full example

Build image and run container

Command Palette

Comments

More from this blog

Ultra-Light HTTP Server with Busybox HTTPD Applet

Example Usage

Serving Static Files from your Host Machine

Using in a Dockerfile

(Vite) React App built inside a turborepo full example

Build image and run container