Dockerized project

.gitignore

@@ -24,3 +24,6 @@ dist-ssr
 *.sw?
 
 .env
+
+package-lock.json
+*.tsbuildinfo

Dockerfile

@@ -0,0 +1,17 @@
+FROM node:18-alpine
+
+WORKDIR /app
+
+COPY package.json package-lock.json ./
+
+RUN npm install
+
+COPY . .
+
+EXPOSE 9089
+
+ENV VITE_PORT=9089
+
+RUN npm run build
+
+CMD ["sh", "-c", "npm run preview -- --port $VITE_PORT"]

README.md

@@ -111,3 +111,28 @@ or if you are using pnpm:
 pnpm build
 ```
 
+## Run with Docker
+
+You can run this project in a Docker container.
+
+#### 1. Set your .env file
+
+```env
+VITE_MINER_URL=your-miner-url-here
+```
+
+#### 2. Build the Docker image
+
+Note: if you want to change the VITE_MINER_URL you must repeat this step
+
+```bash
+docker build . -t "miner-dashboard:latest"
+```
+
+#### 3. Start a container
+
+Pass in the port you want to run on.
+
+```bash
+docker run -d -p 9091:9091 -e VITE_PORT=9091 --name local-dashboard miner-dashboard:latest
+```

package.json

@@ -38,6 +38,7 @@
     "@tailwindcss/forms": "^0.5.9",
     "@types/chroma-js": "^2.4.4",
     "@types/lodash": "^4.17.7",
+    "@types/node": "^22.5.5",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.1",

src/components/App/App.tsx

@@ -13,72 +13,69 @@ import "./App.css";
 
 export const App = () => {
   const [opened, { toggle }] = useDisclosure();
-  
+
   const [data, setData] = useState<MinerData | null>(null);
   const [loading, setLoading] = useState<boolean>(true);
   const [error, setError] = useState<string | null>(null);
-
+
+  console.log(import.meta.env.VITE_MINER_URL);
+
   useEffect(() => {
     const fetchData = async () => {
       setLoading(true);
-      
+
       try {
         const minerData = await getMinerData();
-        
+
         setData(minerData);
       } catch (error: unknown) {
         if (error instanceof Error) {
           setError(error.message);
         } else {
-          setError("An unknown error occurred");  // Optional: Handle non-Error objects
+          setError("An unknown error occurred"); // Optional: Handle non-Error objects
         }
       } finally {
         setLoading(false);
       }
     };
-    
+
     fetchData();
   }, []);
-  
+
   if (loading) {
     return (
       <Center>
         <Loader color="orange" type="dots" />
       </Center>
     );
   }
-  
+
   if (isEmpty(data?.positions) || isEmpty(data?.statistics)) {
-    return (
-      <Center>
-        No data available.
-      </Center>
-    );
+    return <Center>No data available.</Center>;
   }
-  
+
   if (error) {
-    return (
-      <Center>
-        Error: {error}
-      </Center>
-    );
+    return <Center>Error: {error}</Center>;
   }
-  
+
   return (
     <AppShell
-      navbar={{ width: 300, breakpoint: "sm", collapsed: { desktop: true, mobile: !opened } }}
+      navbar={{
+        width: 300,
+        breakpoint: "sm",
+        collapsed: { desktop: true, mobile: !opened },
+      }}
       padding="md"
     >
       <AppShell.Header>
         <AppHeader opened={opened} toggle={toggle} data={data?.statistics} />
       </AppShell.Header>
-      
+
       <AppShell.Navbar p="md">Navbar</AppShell.Navbar>
-      
+
       <AppShell.Main>
         <Main data={data as MinerData} />
       </AppShell.Main>
     </AppShell>
-
   );
-};
+};

tsconfig.app.json

@@ -5,6 +5,7 @@
     "lib": ["ES2020", "DOM", "DOM.Iterable"],
     "module": "ESNext",
     "skipLibCheck": true,
+    "types": ["node"],
 
     /* Bundler mode */
     "moduleResolution": "bundler",

vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

vite.config.ts

@@ -1,7 +1,11 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
 
-// https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
-})
+  base: "/dashboard",
+  server: {
+    host: "0.0.0.0",
+    port: parseInt(process.env.VITE_PORT || "9089"), // Use the environment variable PORT if available
+  },
+});