Replace CRA with Vite (#74)

* replacing CRA boilerplate with Vite incl env vars

* go back to using es6

* newline in gitignore for vite

* dynamic env config

* newline in config

* cleanup from PR, small typing fix

* fixed eslint errors except 'any' type

* install vitest

* removes whitespace in eslintrc

* replace watchall flag fragment in ci

* replace jest with vitest

* edit vitest config, add globals

* remove all eslint issues (mostly any)

* rename lighthouserc

* config for lighthouse with esm support

* remove lighthouse tmp files

* ignore lighthouse tmp files

* live attempt for build folder

* change standard build dir for vite

* change nodejs version

* changed upload target

* symlink only

* update comment on symlinks

* Update Dockerfile

* Add basic vite pwa plugin setup

* Update workbox-core

* Remove unused workbox packages

* Remove web-vitals

* Remove old service worker code

* Use the default build folder

* Remove unused favicon

* Update robots.txt

* Fully configure vite-plugin-pwa

* Remove unused dependencies

* Use @babel/eslint-parser instead of babel-eslint

* Update some eslint plugins

* Fix eslint warnings

* Remove overrides

* Fix TS errors

* Use better types for handleError

* Add a 'typecheck' script

* Use better typing for QR code data validation

* Use better types for camelizeKeys

* Use better types for deepEqual

* Remove unused test dependencies

* Update @testing-library/jest-dom

* Remove prop-types

* rename service-worker file

* move order of service-worker.js

* build base path update vite

* change prop order viteconf

* workbox config vite

* add manual skipwaiting msg

* Remove immediate registerSW

* set injectregister to null

* Added missing pwa module

* additional sw worker fns for testing

* rollback to old serviceworker

* remove unused packages

* add issue comment for SW transition

* change envdir

* remove public flag completely

* serviceworker log for build

* old service-worker implement

* use self instead of window in sw

* remove publicurl snippet

* remove documentation comments

* remove unnecessary vitepwa config

* get rid of unnecessary build files

* Change config comment vite

* remove now redundant png caching line

* Use absolute path for sw

* extend lint command and fix issues

* rm redundant typing and public path

* fix invalid dummy data

* Remove redundant vite conf

* cache manifest.json

* modify access to manifestjson code

* additional cache check and renamed cachename

* separate cache for manifest

* add json to globpatterns

* remove manual manifest caching

* fix lint issue

* alternative manifest caching

* remove manifest caching (not building)

* Change comment for manifest

* mv comment

---------

Co-authored-by: Tomas Roun <[email protected]>

.env

@@ -1,11 +1,9 @@
  # TODO: remove this when we have a better way to handle source maps
 GENERATE_SOURCEMAP=false
 
-PORT=3000     # Specify the port to run on
-
-# Custom Variables
-REACT_APP_CLIENT_URL=https://localhost:3000
 ESLINT_NO_DEV_ERRORS=true
 TSC_COMPILE_ON_ERROR=true
 
-REACT_APP_VERSION=${npm_package_version}-dev-${COMMIT_SHA}
+VITE_PORT=3000
+VITE_VITE_APP_VERSION=${npm_package_version}-dev-${COMMIT_SHA}
+VITE_VITE_CLIENT_URL=https://localhost:${VITE_PORT}

.env.production

@@ -1 +1 @@
-REACT_APP_VERSION=${npm_package_version}-${COMMIT_SHA}
+VITE_APP_VERSION=${npm_package_version}-${COMMIT_SHA}

.eslintrc.json

@@ -1,6 +1,30 @@
 {
-  "extends": ["plugin:react/recommended", "react-app", "prettier"],
-  "plugins": ["prettier"],
+  "extends": [
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended", 
+    "plugin:import/errors",
+    "plugin:import/warnings",
+    "plugin:import/typescript",
+    "prettier"
+  ],
+  "plugins": [
+    "prettier",
+    "@typescript-eslint",
+    "import"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "env": {
+    "es6": true,
+    "browser": true,
+    "node": true
+  },
   "rules": {
     "prettier/prettier": "error",
     "react/no-unescaped-entities": ["error", {"forbid": [">", "<"]}],
@@ -28,6 +52,11 @@
       }
     ],
     /* Rules to make it not necessary to include React as it is done automatically since React 17 */
-    "react/react-in-jsx-scope": "off"
+    "react/react-in-jsx-scope": "off",
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      {"argsIgnorePattern": "^_", "varsIgnorePattern": "^_", "ignoreRestSiblings": true}
+    ],
+    "@typescript-eslint/no-empty-function": "off"
   }
 }

.github/workflows/ci.yml

@@ -19,7 +19,7 @@ jobs:
       - name: Set up NodeJS
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
           cache: 'npm'
 
       - name: Install dependencies
@@ -28,22 +28,30 @@ jobs:
       - name: Run linters
         run: npm run lint
 
+      - name: Run type check
+        run: npm run typecheck
+
       - name: Run tests
-        run: npm test -- --watchAll=false
+        run: npm test -- --run
 
       - name: Build the app
         run: npm run build
 
       - name: Run Lighthouse CI
         id: lhci
+        # Unfortunately vite requires the index.html to be at the root.
+        # This means that the public and index.html are separated, which
+        # affects the building process. Lighthouse also only allows for
+        # one staticDir. Therefore we need to create a sym link for it.
+        # https://stackoverflow.com/questions/76590642/how-to-configure-vite-with-index-html-in-public-folder
         run: |
-          npm install -g @lhci/[email protected]
+          npm install -g @lhci/[email protected]
+          ln -s $(pwd)/index.html $(pwd)/public/index.html
           lhci_output=$(lhci autorun)
           echo "$lhci_output"
           url=$(echo "$lhci_output" | grep -o "https://.\+")
           echo "Found storage url: <$url>"
           echo "report_url=$url" >> $GITHUB_OUTPUT
-
       - name: Save data needed by the Lighthouse workflow
         if: github.event_name == 'pull_request'
         run: |

.gitignore

@@ -9,7 +9,7 @@
 /coverage
 
 # production
-/build
+/dist
 
 # misc
 .DS_Store
@@ -21,3 +21,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.vite
+.lighthouseci

Dockerfile

@@ -2,24 +2,28 @@ FROM node:20-alpine AS builder
 
 RUN apk add --update git
 
-ENV NODE_ENV production
+ENV NODE_ENV=production
 WORKDIR /app
 
+# Copy the .git folder so we can get the last commit hash
 COPY .git .git
-COPY package.json package-lock.json ./
-COPY tailwind.config.js .
-COPY tsconfig.json .
-COPY .env.production .
 COPY public public
 COPY src src
 COPY types types
+COPY index.html .
+
+COPY package.json package-lock.json .
+COPY tailwind.config.js .
+COPY tsconfig.json .
+COPY .env.production .
+COPY vite-env.d.ts vite.config.ts .
 
-RUN npm ci --ignore-scripts
+RUN npm ci --ignore-scripts --include=dev
 RUN npm run build
 
 FROM nginxinc/nginx-unprivileged:stable-alpine
 
-COPY --from=builder /app/build /html
+COPY --from=builder /app/dist /html
 COPY nginx.conf /etc/nginx/conf.d/default.conf
 
 EXPOSE 8080

public/index.html → index.html

@@ -2,25 +2,12 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/logo.png" />
+    <link rel="icon" href="/logo.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
     <meta name="theme-color" content="#1D4ED8" />
     <meta name="description" content="Indico Check-In App" />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
+    <link rel="apple-touch-icon" href="/logo.png" />
+    <link rel="manifest" href="/manifest.json" />
 
     <title>Indico Check-In</title>
   </head>
@@ -37,5 +24,6 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
+    <script type="module" src="/src/index.tsx"></script>
   </body>
 </html>

lighthouserc.js → lighthouserc.cjs

@@ -3,5 +3,9 @@ module.exports = {
     upload: {
       target: 'temporary-public-storage',
     },
+    collect: {
+      staticDistDir: './dist',
+      staticDirFileDiscoveryDepth: 1,
+    },
   },
 };