containerization of react app

.github/workflows/node.js.yml

@@ -22,5 +22,6 @@ jobs:
         image: finshark/finsharp-app
         registry: gcr.io
         dockerfile: ./frontend/Dockerfile
+        directory: ./frontend
         username: _json_key
         password: ${{ secrets.GCP_SA_KEY }}

frontend/Dockerfile

@@ -1,10 +1,15 @@
 FROM node:21-alpine
+
 WORKDIR /app
-COPY package*.json ./
 
+COPY package*.json ./
 RUN npm install
 
 COPY . .
 
-EXPOSE 5173
-CMD ["npm", "run"]
+RUN npm run build
+
+EXPOSE 3000
+ENV NODE_ENV=development
+
+CMD ["npm", "start"]

frontend/package.json

@@ -54,6 +54,7 @@
     ]
   },
   "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@types/axios": "^0.14.0",
     "@types/uuid": "^9.0.8",
     "tailwindcss": "^3.4.4"

frontend/src/index.tsx

@@ -1,23 +1,23 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
-import { searchCompanies } from './api';
-import { RouterProvider } from 'react-router-dom';
-import { router } from './Routes/Routes';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { RouterProvider } from "react-router-dom";
+import "./index.css";
+import App from "./App";
+import reportWebVitals from "./reportWebVitals";
+import { router } from "./Routes/Routes";
 
 const root = ReactDOM.createRoot(
-  document.getElementById('root') as HTMLElement
+  document.getElementById("root") as HTMLElement
 );
-console.log(searchCompanies("tsla"));
+
+//console.log(searchCompanies("tsla"));
 root.render(
   <React.StrictMode>
-    <RouterProvider router={router}/>
+    <RouterProvider router={router} />
   </React.StrictMode>
 );
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
+reportWebVitals();