Deploy frontend

.github/workflows/github_pages.yml

@@ -0,0 +1,44 @@
+name: Deploy to Github Pages
+on:
+  push:
+    branches:
+      - main
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+    - name: Configure Github Pages
+      uses: actions/configure-pages@v3
+    - name: Checkout repo
+      uses: actions/checkout@v4
+    - name: Install Nix
+      uses: DeterminateSystems/nix-installer-action@main
+    - name: npm install
+      working-directory: ./frontend
+      run: |
+        nix develop --command npm install
+    - name: Build
+      working-directory: ./frontend
+      env:
+        REACT_APP_API_ROOT: "https://api.bakaq.net/market-helper"
+      run: |
+        nix develop --command npm run build
+    - name: Upload Github Pages artifact
+      uses: actions/upload-pages-artifact@v3
+      with:
+        path: "./frontend/build/"
+  deploy:
+    permissions:
+      contents: read
+      pages: write
+      id-token: write
+    environment:
+      name: github-pages
+      url: ${{steps.deployment.outputs.page_url}}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+    - name: Deploy to Github Pages
+      id: deployment
+      uses: actions/deploy-pages@v4
+

frontend/package.json

@@ -2,6 +2,7 @@
   "name": "frontend",
   "version": "0.1.0",
   "private": true,
+  "homepage": "https://bakaq.net/market-helper",
   "dependencies": {
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",

frontend/src/App.js

@@ -1,9 +1,7 @@
 import { useState, useEffect } from 'react';
 
-// TODO: Configure it at build-time
 function api_root() {
-  const hostname = window.location.hostname;
-  return `http://${hostname}:8000`;
+  return process.env.REACT_APP_API_ROOT || "http://localhost:8000";
 }
 
 const PRECISION = 3;
@@ -194,7 +192,7 @@ function ItemCard({ itemId, itemData, getItems }) {
       :
       (
         <div className="item-card">
-            <h3>{itemData.name}</h3>
+          <h3>{itemData.name}</h3>
           <div className="item-card-header">
             <div className="item-price">R$ {itemData.price.toFixed(2)}</div>
             <div className="item-weight">{itemData.weight.toPrecision(PRECISION)}g</div>