chore: migrate to vite (#1045)

This migrates from the unmaintained CRA to vite, following the steps
laid out by @cmacdonnacha in https://cathalmacdonnacha.com/migrating-from-create-react-app-cra-to-vite.

Thanks Cathal!

For developers, nothing changes unless the backend is also run locally, which now requires
a slightly different env variable name.

This also eliminates cross-platform issues, especially when developing on macOS.
The cost is mainly that we now need to execute one command more than before,
but maintenance is much easier.

.eslintignore

@@ -0,0 +1,5 @@
+node_modules/
+dist/
+.prettierrc.js
+.eslintrc.js
+env.d.ts

.eslintrc.js

@@ -0,0 +1,6 @@
+// TODO: Update this with config from https://cathalmacdonnacha.com/setting-up-eslint-prettier-in-vitejs
+// This will require fixes in the code, so we're doing it one step at a time
+// When migrating, remove the eslint-config-react-app dependency
+module.exports = {
+  extends: ['react-app'],
+}

.github/workflows/workflow.yml

@@ -36,23 +36,19 @@ jobs:
       backend:
         image: ghcr.io/envelope-zero/backend:v3.1.1
         env:
-          CORS_ALLOW_ORIGINS: http://localhost:3001
-          API_URL: http://localhost:3001/api
+          CORS_ALLOW_ORIGINS: http://localhost:3000
+          API_URL: http://localhost:3000/api
         ports:
           - 8080:8080
 
     steps:
       - uses: actions/[email protected]
 
       - uses: cypress-io/[email protected]
-        env:
-          PORT: 3001
-          # The URL that the react-scripts dev server proxies /api to
-          API_URL: http://localhost:8080
         with:
-          start: npm start
-          # Frontend runs on :3001, API on :8080
-          wait-on: 'http://localhost:3001, http://localhost:8080'
+          start: npm run start-ci
+          # Frontend runs on :3000, API on :8080
+          wait-on: 'http://localhost:3000, http://localhost:8080'
           browser: chrome
 
       - uses: actions/[email protected]
@@ -102,4 +98,4 @@ jobs:
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}
           build-args: |
-            REACT_APP_VERSION=${{ github.ref_name }}
+            VITE_VERSION=${{ github.ref_name }}

.gitignore

@@ -9,7 +9,7 @@ node_modules
 /coverage
 
 # production
-/build
+dist
 
 # misc
 .DS_Store

CONTRIBUTING.md

@@ -14,13 +14,19 @@ Once those are installed, run `make setup` to perform the repository setup.
 
 :information_source: If you need any help with those steps, please [open a blank issue](https://github.com/envelope-zero/frontend/issues/new). We’re happy to help!
 
-To simplify development, we provide docker-compose files that run the backend and frontend together. With this, you can run
+To simplify development, we provide docker-compose files that run the backend. With this, you can run
 
 ```sh
 npm run server:dev
+npm start
 ```
 
-and wait for ~1 minute (if you know why `react-scripts start` takes this long in a container, we're happy about pointers). Then, open [http://localhost:3000](http://localhost:3000) in your browser.
+Then, open [http://localhost:3000](http://localhost:3000) in your browser.
+
+### Running against local development backend
+
+If you're debugging or testing against a local backend development version, start up the backend locally, stop all frontend test and dev environments (the ones started with `npm run server:dev` and `npm run server:test`) and then run `npm run start`.
+The default frontend configuration and default backend configuration match up, so you don't need to explicitly configure anything.
 
 ## Tests
 
@@ -29,8 +35,9 @@ Please write tests when you add features and add regression tests for bug fixes.
 You can run the tests as follows:
 
 ```sh
-# Open a terminal
+# Open a terminal and start the test backend, then the frontend
 npm run server:test
+npm run start:test
 
 # Runs the tests in your terminal
 npm run test

Dockerfile

@@ -4,14 +4,14 @@ WORKDIR /app
 
 # copy package.json first to avoid unnecessary npm install
 COPY package.json package-lock.json /app/
-RUN npm install --production
+RUN npm install
 
 # Copy app files
 COPY src /app/src
 COPY public /app/public
-COPY tsconfig.json tailwind.config.js /app/
+COPY tsconfig.json tailwind.config.js index.html /app/
 
-ARG REACT_APP_VERSION=0.0.0
+ARG VITE_VERSION=0.0.0
 
 # Build the app
 RUN npm run build
@@ -21,4 +21,4 @@ FROM nginx:1.25.2-alpine
 ENV NODE_ENV production
 
 COPY default.conf /etc/nginx/conf.d/default.conf
-COPY --from=builder /app/build /usr/share/nginx/html
+COPY --from=builder /app/dist /usr/share/nginx/html

cypress.config.ts

@@ -2,7 +2,7 @@ import { defineConfig } from 'cypress'
 
 export default defineConfig({
   e2e: {
-    baseUrl: 'http://localhost:3001',
+    baseUrl: 'http://localhost:3000',
     supportFile: 'cypress/support/e2e.ts',
   },
 })

docker-compose-dev.yml

@@ -8,18 +8,8 @@ services:
     image: ghcr.io/envelope-zero/backend:v3.1.1
     volumes:
       - ez-dev-data:/data
+    ports:
+      - 8080:8080
     environment:
       API_URL: http://localhost:3000/api
       CORS_ALLOW_ORIGINS: http://localhost:3000
-
-  frontend:
-    image: node:20.5.1-alpine
-    working_dir: /app
-    command: ['npm', 'run', 'start']
-    ports:
-      - '3000:3000'
-    volumes:
-      - ./:/app
-    environment:
-      # Don't open a browser, we're in a container
-      BROWSER: none

docker-compose-test.yml

@@ -2,20 +2,8 @@ version: '3'
 services:
   backend:
     image: ghcr.io/envelope-zero/backend:v3.1.1
-    environment:
-      API_URL: http://localhost:3001/api
-      CORS_ALLOW_ORIGINS: http://localhost:3001
-
-  frontend:
-    image: node:20.5.1-alpine
-    working_dir: /app
-    command: ['npm', 'run', 'start']
     ports:
-      - '3001:3000'
-    volumes:
-      - ./:/app
+      - 8081:8080
     environment:
-      # Set the web socket port to 0 to use the port the browser uses
-      WDS_SOCKET_PORT: 0
-      # Don't open a browser, we're in a container
-      BROWSER: none
+      API_URL: http://localhost:3000/api
+      CORS_ALLOW_ORIGINS: http://localhost:3000

public/index.html → index.html

@@ -2,19 +2,20 @@
 <html lang="en" class="h-full">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="rgb(153 27 27)" />
     <meta
       name="description"
       content="Envelope based zero sum budgeting for your personal needs."
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="apple-touch-icon" href="/logo192.png" />
+    <link rel="manifest" href="/manifest.json" />
     <title>Envelope Zero</title>
   </head>
   <body class="h-full">
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root" class="min-h-full"></div>
+    <script type="module" src="/src/index.tsx"></script>
   </body>
 </html>