diff --git a/.gitignore b/.gitignore index 50c8dda..aad0ef5 100644 --- a/.gitignore +++ b/.gitignore @@ -24,3 +24,6 @@ dist-ssr *.sw? .env + +package-lock.json +*.tsbuildinfo \ No newline at end of file diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 0000000..34077cb --- /dev/null +++ b/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"] diff --git a/README.md b/README.md index e7905c1..7698841 100644 --- a/README.md +++ b/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 +``` diff --git a/package.json b/package.json index 586a96c..aa77bd2 100644 --- a/package.json +++ b/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", diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx index 54c8339..5621805 100644 --- a/src/components/App/App.tsx +++ b/src/components/App/App.tsx @@ -13,33 +13,35 @@ import "./App.css"; export const App = () => { const [opened, { toggle }] = useDisclosure(); - + const [data, setData] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(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 (
@@ -47,38 +49,33 @@ export const App = () => {
); } - + if (isEmpty(data?.positions) || isEmpty(data?.statistics)) { - return ( -
- No data available. -
- ); + return
No data available.
; } - + if (error) { - return ( -
- Error: {error} -
- ); + return
Error: {error}
; } - + return ( - + Navbar - +
- ); -}; \ No newline at end of file +}; diff --git a/tsconfig.app.json b/tsconfig.app.json index f0a2350..cf32e7d 100644 --- a/tsconfig.app.json +++ b/tsconfig.app.json @@ -5,6 +5,7 @@ "lib": ["ES2020", "DOM", "DOM.Iterable"], "module": "ESNext", "skipLibCheck": true, + "types": ["node"], /* Bundler mode */ "moduleResolution": "bundler", diff --git a/vite-env.d.ts b/vite-env.d.ts new file mode 100644 index 0000000..11f02fe --- /dev/null +++ b/vite-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/vite.config.ts b/vite.config.ts index 5a33944..7492dac 100644 --- a/vite.config.ts +++ b/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 + }, +});