initial commit

.dockerignore

@@ -0,0 +1 @@
+/node_modules

Dockerfile

@@ -0,0 +1,16 @@
+# stage1 - build react app first 
+FROM node:19.3.0-alpine as build
+WORKDIR /app
+ENV PATH /app/node_modules/.bin:$PATH
+COPY ./package.json /app/
+RUN npm install
+COPY . /app
+RUN npm run build
+
+# stage 2 - build the final image and copy the react build files
+FROM nginx:1.19.0-alpine
+COPY --from=build /app/build /usr/share/nginx/html
+RUN rm /etc/nginx/conf.d/default.conf
+COPY config/nginx/nginx.conf /etc/nginx/conf.d
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]

commands.txt

@@ -0,0 +1,29 @@
+- React.js site:
+docker build -t pa4kev/portfolio-reactjs-app -f ./dockerfiles/reactjs/Dockerfile .
+docker push pa4kev/portfolio-reactjs-app:latest
+
+- Nginx:
+docker build -t pa4kev/portfolio-reactjs-nginx -f ./dockerfiles/nginx/Dockerfile .
+docker push pa4kev/portfolio-reactjs-nginx:latest
+
+- Full app (React + Nginx):
+docker build -t pa4kev/portfolio-reactjs-full:latest -f Dockerfile .
+docker push pa4kev/portfolio-reactjs-full:latest
+
+
+- Server:
+docker pull pa4kev/portfolio-reactjs-app
+docker pull pa4kev/portfolio-reactjs-nginx
+
+docker run -d --name nginx --rm -p 80:80 pa4kev/portfolio-reactjs-nginx
+docker run -d --name react --rm -p 3000:3000 pa4kev/portfolio-reactjs-app
+
+
+
+- Locally, create Production ready React.js app:
+npm run build
+(creates a /build directory)
+
+
+
+

config/nginx/nginx.conf

@@ -0,0 +1,19 @@
+server {
+  listen 80;
+  
+  location / {
+    root   /usr/share/nginx/html;
+    index  index.html index.htm;
+
+    # to redirect all the requests to index.html, 
+    # useful when you are using react-router
+
+    try_files $uri /index.html; 
+  }
+
+  error_page   500 502 503 504  /50x.html;
+
+  location = /50x.html {
+    root   /usr/share/nginx/html;
+  }
+}