App init

.gitignore

@@ -1,7 +1,7 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies
-/node_modules
+node_modules
 /.pnp
 .pnp.js
 

Makefile

@@ -0,0 +1,11 @@
+build:
+	docker-compose up -d --build
+
+up:
+	docker-compose up -d
+
+down:
+	docker-compose down -v
+
+# windows MinGW32-make [command]
+# linux make [command] (superior system)

app/.dockerignore

@@ -0,0 +1,6 @@
+node_modules
+Dockerfile
+.dockerignore
+.git
+.gitignore
+README.md

app/Dockerfile

@@ -0,0 +1,9 @@
+FROM node:15
+WORKDIR /app
+COPY package.json .
+RUN npm install && npm install typescript -g
+COPY . .
+ENV PORT 3000
+EXPOSE ${PORT}
+RUN tsc
+CMD [ "npm", "start" ]

package.json → app/package.json

@@ -1,17 +1,19 @@
 {
-  "name": "frontend",
+  "name": "front",
   "version": "0.1.0",
+  "proxy": "http://host.docker.internal:5000",
   "private": true,
   "dependencies": {
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.5.2",
     "@types/node": "^16.18.91",
-    "@types/react": "^18.2.72",
-    "@types/react-dom": "^18.2.22",
+    "@types/react": "^18.2.73",
+    "@types/react-dom": "^18.2.23",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.3",
     "react-scripts": "5.0.1",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
@@ -39,5 +41,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "tailwindcss": "^3.4.3"
   }
 }

src/App.css → app/src/App.css

@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 .App {
   text-align: center;
 }

app/src/App.tsx

@@ -0,0 +1,16 @@
+import { BrowserRouter, Route, Routes } from "react-router-dom"
+import Home from './pages/home';
+
+function App() {
+
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path='/' element={ <Home/> }></Route>
+      </Routes>
+    </BrowserRouter>
+
+  );
+}
+
+export default App;

src/index.tsx → app/src/index.tsx

@@ -9,7 +9,7 @@ const root = ReactDOM.createRoot(
 );
 root.render(
   <React.StrictMode>
-    <App />
+      <App />
   </React.StrictMode>
 );
 

app/src/pages/home.tsx

@@ -0,0 +1,43 @@
+import React, {useEffect, useState} from 'react';
+import logo from '../logo.svg';
+import '../App.css';
+
+export default function Home(){
+    const [backendData, setBackendData] = useState([{}])
+
+    useEffect(()=> {
+        fetch("/api").then(
+        response => response.json()
+        ).then(
+        data => {
+            setBackendData(data);
+        }
+        )
+    }, [])
+
+    console.log(backendData);
+
+    return (
+    <div className="App">  
+      <header className="App-header">
+        <img src={logo} className="App-logo" alt="logo" />
+        <p>
+          Edit <code>src/App.tsx</code> and save to reload.
+        </p>
+        <h1 className="text-3xl font-bold underline">
+          Test tailwinda
+        </h1>
+
+        <a
+          className="App-link"
+          href="https://reactjs.org"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Learn React
+        </a>
+      </header>
+    </div>
+    );
+}
+

app/tailwind.config.js

@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+

docker-compose.yml

@@ -0,0 +1,19 @@
+version: '3.8'
+services:
+  backend-container:
+    build: ./server
+    ports:
+      - "5000:5000"
+    volumes:
+      - ./server:/app:ro
+      - /app/node_modules
+    env_file:
+      - ./server/.env
+  frontend-container:
+    build: ./app
+    depends_on:
+      - backend-container
+    ports:
+      - "3000:3000"
+    volumes:
+      - ./app:/app