Use Vite for dev and migrate to SWR for pages (#60)

* Use Vite for dev and migrate to SWR for pages * checkpoint again * move to pnpm for gh actions * install pnpm in github actions * testing more for pnpm in ga * ok found docs on this - there is another stage for setting up pnpm * progress, set the correct lock file * use only frozen lockfile * set working-directory * set the pnpm version to 8.6.12 * TS fixes and hacks * set the output dir to build
PostHog · Jan 30, 2024 · 03ed948 · 03ed948
1 parent 3feb3b2
commit 03ed948
Show file tree

Hide file tree

Showing 20 changed files with 1,759 additions and 43,308 deletions.
diff --git a/.github/workflows/docker-frontend.yaml b/.github/workflows/docker-frontend.yaml
@@ -8,25 +8,21 @@ jobs:
     runs-on: ubuntu-latest
     defaults:
       run:
-        working-directory: 'frontend'
+        working-directory: "frontend"
 
     permissions:
       contents: read
       packages: write
 
     steps:
-      -
-        uses: actions/checkout@v3
-      -
-        name: Set up QEMU
+      - uses: actions/checkout@v3
+      - name: Set up QEMU
         uses: docker/setup-qemu-action@v2
         with:
           platforms: arm64
-      -
-        name: Set up Docker Buildx
+      - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v2
-      -
-        name: Docker image metadata
+      - name: Docker image metadata
         id: meta
         uses: docker/metadata-action@v4
         with:
@@ -36,33 +32,29 @@ jobs:
             type=raw,value=main,enable=${{ github.ref == 'refs/heads/main' }}
             type=ref,event=pr
             type=sha
-      -
-        name: Login to GitHub Container Registry
+      - name: Login to GitHub Container Registry
         uses: docker/login-action@v2
         with:
-            registry: ghcr.io
-            username: ${{ github.actor }}
-            password: ${{ secrets.GITHUB_TOKEN }}
-      -
-        name: Install Node.js
-        uses: actions/setup-node@v3
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8.6.12
+      - name: Install Node.js
+        uses: actions/setup-node@v4
         with:
           node-version-file: frontend/.node-version
-          cache: 'npm'
-          cache-dependency-path: frontend/package-lock.json
+          cache: "pnpm"
+          cache-dependency-path: frontend/pnpm-lock.yaml
 
-      -
-        name: Install dependencies
-        run: npm install
+      - name: Install dependencies
+        run: pnpm i --frozen-lockfile
 
-      -
-        name: Build
-        run: npm run build
-        env:
-          NODE_OPTIONS: --openssl-legacy-provider
+      - name: Build
+        run: pnpm build
 
-      -
-        name: Build and push
+      - name: Build and push
         uses: docker/build-push-action@v4
         with:
           context: frontend/

diff --git a/docker-compose.dev.yml b/docker-compose.dev.yml
@@ -25,6 +25,8 @@ services:
       - |
         python manage.py migrate
         python manage.py runserver 0.0.0.0:8000
+    ports:
+      - "8000:8000"
     volumes:
       - .:/code
     depends_on:
@@ -33,14 +35,6 @@ services:
       - redis
       - rabbitmq
 
-  web:
-    build:
-      context: ./frontend
-      dockerfile: Dockerfile.dev
-    volumes:
-      - ./frontend/public:/frontend/public
-      - ./frontend/src:/frontend/src
-
   db:
     image: postgres:14-alpine
     restart: on-failure
@@ -85,18 +79,6 @@ services:
     image: zookeeper:3.7.0
     restart: on-failure
 
-  caddy:
-    image: caddy:2.6.1
-    ports:
-      - "8888:8888"
-    environment:
-      SITE_ADDRESS: ":8888"
-    volumes:
-      - ./docker/Caddyfile:/etc/caddy/Caddyfile
-    depends_on:
-      - web
-      - app
-
   rabbitmq:
     image: rabbitmq:3.12.2-management-alpine
     ports:

diff --git a/frontend/Dockerfile.dev b/frontend/Dockerfile.dev
diff --git a/frontend/index.html b/frontend/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <link rel="icon" />
+        <link rel="icon" type="image/x-icon" href="/favicons/favicon.ico" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="theme-color" content="#000000" />
+        <meta name="description" content="Web site created using create-react-app" />
+        <title>HouseWatch</title>
+    </head>
+    <body>
+        <noscript>You need to enable JavaScript to run this app.</noscript>
+        <div id="root"></div>
+        <script type="module" src="/src/index.tsx"></script>
+    </body>
+</html>