From 4fbc9a6532f12c1875359db26b1f16149cf6f862 Mon Sep 17 00:00:00 2001
From: Enes Alili <e.alili@ineting.net>
Date: Sat, 28 Oct 2023 17:00:22 +0200
Subject: [PATCH] Add dockerfile

---
 frontend/.dockerignore         |  1 +
 frontend/Dockerfile            | 29 +++++++++++++++++++++
 frontend/README.md             |  7 ++++++
 frontend/docker/nginx/app.conf | 46 ++++++++++++++++++++++++++++++++++
 4 files changed, 83 insertions(+)
 create mode 100644 frontend/.dockerignore
 create mode 100644 frontend/Dockerfile
 create mode 100644 frontend/docker/nginx/app.conf

diff --git a/frontend/.dockerignore b/frontend/.dockerignore
new file mode 100644
index 0000000..b512c09
--- /dev/null
+++ b/frontend/.dockerignore
@@ -0,0 +1 @@
+node_modules
\ No newline at end of file
diff --git a/frontend/Dockerfile b/frontend/Dockerfile
new file mode 100644
index 0000000..f22dba4
--- /dev/null
+++ b/frontend/Dockerfile
@@ -0,0 +1,29 @@
+# Use the official Node.js runtime as the base image
+FROM node:18 as build
+
+# Set the working directory in the container
+WORKDIR /app
+
+# Copy package.json and package-lock.json to the working directory
+COPY package*.json ./
+
+# Install dependencies
+RUN npm install
+
+# Copy the entire application code to the container
+COPY . .
+
+# Build the React app for production
+RUN npm run 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/build /usr/share/nginx/html
+
+# Expose port 80 for the Nginx server
+EXPOSE 80
+
+# Start Nginx when the container runs
+CMD ["nginx", "-g", "daemon off;"]
\ No newline at end of file
diff --git a/frontend/README.md b/frontend/README.md
index 58beeac..55f2213 100644
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -68,3 +68,10 @@ This section has moved here: [https://facebook.github.io/create-react-app/docs/d
 ### `npm run build` fails to minify
 
 This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
+
+
+# Run with docker
+Make sure to run command at the root directory
+
+```docker build -t frontend .``` <br />
+```docker run --name frontend -p 8080:80 -d frontend```
diff --git a/frontend/docker/nginx/app.conf b/frontend/docker/nginx/app.conf
new file mode 100644
index 0000000..7814cd5
--- /dev/null
+++ b/frontend/docker/nginx/app.conf
@@ -0,0 +1,46 @@
+server {
+    listen 80 default_server;
+    listen [::]:80 default_server;
+
+    root /var/www;
+
+    #add_header X-Frame-Options "SAMEORIGIN";
+    #add_header X-Content-Type-Options "nosniff";
+
+    index index.html;
+
+    charset utf-8;
+
+    # _ makes sure that nginx does not try to map requests to a specific hostname
+    # This allows us to specify the urls to our application as infrastructure changes,
+    # without needing to change the application
+    server_name _;
+
+    error_log  /var/log/nginx/error.log;
+    access_log /var/log/nginx/access.log;
+
+    # Some static assets are loaded on every page load,
+    # and logging these turns into a lot of useless logs.
+    # If you would prefer to see these requests for catching 404's etc.
+    # Feel free to remove them
+    location = /favicon.ico { access_log off; log_not_found off; }
+    location = /robots.txt  { access_log off; log_not_found off; }
+
+    # When a 404 is returned, we want to display our applications 404 page,
+    # so we redirect it to index.php to load the correct page
+    error_page 404 /index.php;
+
+    location / {
+        add_header Access-Control-Allow-Origin *;
+        
+        try_files $uri /index.html;
+    }
+
+    location ~ /\.ht {
+        deny all;
+    }
+
+    location ~ /\.(?!well-known).* {
+        deny all;
+    }
+}