Skip to content

Latest commit

 

History

History

react_vite

README.md

React Vite with Docker

This directory provides Dockerfiles for deploying a React Vite application. You can choose between three different

FIles Included

1. Dockerfile

  • Use a custom built busybox image as the base image.

2. Dockerfile_alpine

  • This uses alpine:3.20 as the base image. It uses the root user to run the application. See the Dockerfile_alpine_nonroot file for a non-root user version.

3. Dockerfile_alpine_nonroot

  • This uses alpine:3.20 as the base image. It uses a non-root user to run the application.

4. Dockerfile_busybox

  • This uses busybox as the base image.

5. Dockerfile_nginx

  • Uses nginx:alpine as the base image.

Heres a comparison of the image sizes. The .slim images are built using Docker Slim.

Yup, you saw that right, the Dockerfile is Kilobytes in size!

alt text

Setup Instructions

1. Add a .dockerignore File

Copy the .dockerignore file in the root of your project.

2. Add an nginx.conf File (Optional)

Create an nginx.conf file in the root of your project.

Note: Only use this file if you are using one of the NGINX Dockerfiles.

3. Build the Docker Image

Using the General Dockerfile

docker build -t react-vite .

Using the Alpine Dockerfile

docker build -f Dockerfile_alpine -t react-vite .

Using the Alpine Non-Root Dockerfile

docker build -f Dockerfile_alpine_nonroot -t react-vite .

Using the Busybox Dockerfile

docker build -f Dockerfile_busybox -t react-vite .

Using the NGINX Dockerfile

docker build -f Dockerfile_nginx -t react-vite .

4. Using Docker Slim (Optional)

We can use Docker Slim to reduce the size further.

Note: docker slim can remove some files that are required for your application to run. So, it is recommended to test the application after using Docker Slim.

For the Dockerfile_alpine_nonroot file, run the following command:

docker run --rm -it -v /var/run/docker.sock:/var/run/docker.sock dslim/slim build --target react-vite --include-path /var/www/html --include-path /var/log/nginx --include-path /var/lib/nginx --include-path /run/nginx

For others (non busybox), run the following command:

docker run --rm -it -v /var/run/docker.sock:/var/run/docker.sock dslim/slim build --target react-vite --include-path /var/www/html

After successfully running the above command, you will see a new image with name react-vite.slim in your Docker

Running the Container

After building the image, run the container using the following command:

docker run -p 3000:80 react-vite

Contributing

If you have improvements or additional configurations for the React Vite setup, feel free to open a pull request!

References