Switch from npm to pnpm, webpack to vite (#884)

* reset branch * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * fix(frontend): envionment process -> import.meta.env * feat: migrate jest -> vitest * fix(ci): pnpm test running * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * fix(ci): working directory * feat,tweak(frontend/package): remove now unused deps, switch scripts from webpack -> vite * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * build(frontend): remove remaining webpack deps, add vite-pwa * build(frontend): add vite-pwa to config, remove webpack.config.js * docs: update docs reference to pwa --------- Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com> Co-authored-by: spwoodcock <sam.woodcock@protonmail.com>
hotosm · Oct 9, 2023 · dafa94a · dafa94a
1 parent 312e4e4
commit dafa94a
Show file tree

Hide file tree

Showing 19 changed files with 9,100 additions and 30,621 deletions.
diff --git a/.github/workflows/r-frontend_tests.yml b/.github/workflows/r-frontend_tests.yml
@@ -17,17 +17,12 @@ jobs:
         with:
           node-version: "18"
 
-      - name: Cache Node Modules
-        uses: actions/cache@v3
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2.4.0
         with:
-          path: |
-            src/frontend/node_modules
-          keys: node-modules-${{ env.cache_id }}
-          restore-keys: |
-            node-modules-
+          package_json_file: src/frontend/package.json
+          version: 8.8.0
 
       - name: Test Frontend
-        run: |
-          cd src/frontend
-          npm ci --only-dev
-          npm run test
+        working-directory: src/frontend
+        run: pnpm run test
diff --git a/docs/dev/Setup.md b/docs/dev/Setup.md
@@ -28,7 +28,7 @@ The FMTM web app is a Python/Flask/Leaflet app that serves as a frontend for the
 The FMTM codebase consists of:
 
 - An API backend in FastAPI (code in: `src/backend`)
-- A frontend website (soon to be a PWA) in react (code in: `src/frontend`)
+- A frontend website in React (code in: `src/frontend`)
 
 ### Manager Web Interface (with PC browser-friendlymap view)
 

diff --git a/src/frontend/debug.dockerfile b/src/frontend/debug.dockerfile
@@ -5,6 +5,9 @@ ARG FRONTEND_MAIN_URL
 ENV FRONTEND_MAIN_URL="${FRONTEND_MAIN_URL}"
 WORKDIR /app
 COPY ./package*.json ./
-RUN npm install
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+RUN corepack enable
+RUN pnpm install
 ENV NODE_ENV development
 ENTRYPOINT ["npm", "run", "start:live"]
diff --git a/src/frontend/index.html b/src/frontend/index.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" href="favicon.ico" />
+    <link rel="manifest" href="/manifest.json" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/7.4.0/ol.min.css"
+      integrity="sha512-InhY7dfdkf2+ZyIsz9AX9M1xDC3GjEy0zVnAIudX1fTUOEhBu13KooX9txjBoWkDAMI3fQ07VE/D0gMUvweerw=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    />
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
+    <title>Field Mapping Tasking Manager</title>
+  </head>
+
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/App.jsx"></script>
+  </body>
+</html>