add docker-compose, docker client with nginx

Author: nadav867

client/.dockerignore

@@ -1,4 +1,3 @@
 node_modules
-.env
 npm-debug
 build

client/Dockerfile

@@ -1,15 +1,19 @@
 FROM node:12-alpine as build
 
-RUN mkdir /app/client
-WORKDIR /app/client
-COPY package.json /app/client/package.json
-RUN npm install --only=prod
-COPY . /app/client/
+WORKDIR /app
+#copy files client to container
+COPY . /app/
+
+# prepare for build
+RUN npm install --silent
 RUN npm run build
 
-FROM nginx:1.16.0-alpine
+# prepare nginx
+FROM nginx
 RUN rm /etc/nginx/conf.d/default.conf
-COPY nginx.conf /etc/nginx/nginx.conf
-COPY --from=build /app/client/build /usr/share/nginx/html
+COPY nginx.conf /etc/nginx/conf.d/
+COPY --from=build app/build /usr/share/nginx/html 
+
+# start nginx
 EXPOSE 80
 CMD ["nginx", "-g", "daemon off;"]

client/nginx.conf

@@ -1,22 +1,22 @@
-events {
-        worker_connections 768;
-        # multi_accept on;
-}
 
-http {
+server {
+    listen 80;
 
-    server {
-        listen      80 default_server;
+    location / {
+        root  /usr/share/nginx/html;
+        index index.html index.htm index.nginx-debian.html;
+        try_files $uri $uri/ /index.html;   
+    }
 
-        root /usr/share/nginx/html;
+    location /api {
+        proxy_pass http://server:5500;
+    }
 
-        # Add index.php to the list if you are using PHP
-        index index.html index.htm index.nginx-debian.html;
+    error_page 500 502 503 504  /50x.html;
+
+    location = /50x.html {
+        root  usr/share/nginx/html;
+    }    
+} 
+ 
 
-        location / {
-            try_files $uri /index.html;
-        }
-        
-        location /welcome {
-            proxy_pass http://server:5000;
-        }

client/package.json

@@ -19,7 +19,7 @@
     "react-scripts": "3.4.1",
     "typescript": "^3.7.5"
   },
-  "proxy": "http://localhost:5000",
+  "proxy": "http://localhost:5500",
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",

client/src/App.css

@@ -24,6 +24,10 @@
   color: white;
 }
 
+.navbar > * {
+  padding-left: 1rem;
+}
+
 .App-link {
   color: #61dafb;
 }

client/src/App.tsx

@@ -1,25 +1,20 @@
-import React, { useEffect, useState } from 'react';
-import logo from './logo.svg';
-import axios from 'axios';
-
+import React from 'react';
+import Home from './containers/Home';
+import Test from './containers/Test';
+import Navbar from './components/Navbar';
+import { Switch, Route, BrowserRouter } from 'react-router-dom';
 import './App.css';
 
 function App() {
-  const [welcomeMsg, setWelcomeMsg] = useState<string>('');
-
-  useEffect(() => {
-    (async () => {
-      const res = await axios.get('/api/start');
-      setWelcomeMsg(res.data.msg);
-    })();
-  }, []);
-
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>{welcomeMsg}</p>
-      </header>
+      <BrowserRouter>
+        <Navbar />
+        <Switch>
+          <Route exact path="/" component={Home} />
+          <Route path="/test" component={Test} />
+        </Switch>
+      </BrowserRouter>
     </div>
   );
 }

client/src/components/Navbar.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+const Navbar = () => {
+  return (
+    <div
+      style={{
+        height: '64px',
+        width: '100%',
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'flex-start',
+        paddingLeft: '1rem',
+        background: 'white',
+        boxShadow: '0 0 8px 3px rgba(0,0,0,0.2)'
+      }}
+      className="navbar"
+    >
+      <Link to="/">Home</Link>
+      <Link to="/test">Test React Router</Link>
+    </div>
+  );
+};
+
+export default Navbar;

client/src/containers/Home.tsx

@@ -0,0 +1,21 @@
+import React, { useEffect, useState } from 'react';
+import axios from 'axios';
+
+const Home = () => {
+  const [welcomeMsg, setWelcomeMsg] = useState<string>('');
+
+  useEffect(() => {
+    (async () => {
+      const res = await axios.get('/api/start');
+      setWelcomeMsg(res.data.msg);
+    })();
+  }, []);
+
+  return (
+    <div className="App-header">
+      <p>{welcomeMsg}</p>
+    </div>
+  );
+};
+
+export default Home;

client/src/containers/Test.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+const Test = () => {
+  return (
+    <div
+      style={{
+        height: '100vh',
+        background: 'lightgreen',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        fontSize: '2rem'
+      }}
+    >
+      This is A router Test
+    </div>
+  );
+};
+
+export default Test;

docker-compose.yml

@@ -1,14 +1,18 @@
-version: '2'
+version: '3'
 services:
   server:
     build: ./server
-    ports:
-      - '5000:5000'
-    restart: always
+    networks:
+      - webapp
     container_name: server
   client:
     build: ./client
+    networks:
+      - webapp
     ports:
       - '80:80'
-    restart: always
     container_name: client
+
+networks:
+  webapp:
+    driver: bridge