feat: ✨ add Docker support for containerizing the application with Nginx

Author: andrewdyer

Dockerfile

@@ -0,0 +1,35 @@
+# Use the official Node.js runtime as the base image
+FROM node:20 as build
+
+# Set the working directory in the container
+WORKDIR /app
+
+# Copy package.json and yarn.lock to the working directory
+COPY package.json yarn.lock ./
+
+# Install dependencies
+RUN yarn install
+
+# Copy the entire application code to the container
+COPY . .
+
+# Set environment variables for production
+ENV VITE_APP_DEBUG=false
+
+# Build the React app for production
+RUN yarn build
+
+# Use Nginx as the production server
+FROM nginx:alpine
+
+# Copy the built React app to Nginx's web server directory
+COPY --from=build /app/dist /usr/share/nginx/html
+
+# Copy the Nginx configuration file to the container
+COPY nginx.conf /etc/nginx/nginx.conf
+
+# Expose port 80 for the Nginx server
+EXPOSE 80
+
+# Start Nginx when the container runs
+CMD ["nginx", "-g", "daemon off;"]

README.md

@@ -12,6 +12,7 @@ This template is built using the official Vite template for React with TypeScrip
 - [Prettier](https://prettier.io/) for code formatting.
 - [Husky](https://typicode.github.io/husky/#/) for Git hooks to automate tasks such as linting, formatting, and testing before commits.
 - CI (Continuous Integration) setup with [GitHub Actions](https://github.com/features/actions) for automated testing and building.
+- Docker support for containerizing the application.
 
 ## Project Structure
 

nginx.conf

@@ -0,0 +1,30 @@
+user  nginx;
+worker_processes  auto;
+error_log  /var/log/nginx/error.log warn;
+pid        /var/run/nginx.pid;
+
+events {
+  worker_connections  1024;
+}
+
+http {
+  include       /etc/nginx/mime.types;
+  default_type  application/octet-stream;
+  log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
+  '$status $body_bytes_sent "$http_referer" '
+  '"$http_user_agent" "$http_x_forwarded_for"';
+  access_log  /var/log/nginx/access.log  main;
+  sendfile        on;
+
+  keepalive_timeout  65;
+
+  server {
+    listen 80;
+
+    location / {
+      root   /usr/share/nginx/html;
+      index  index.html index.htm;
+      try_files $uri $uri/ /index.html;
+    }
+  }
+}