masslight · ncgreene · Oct 6, 2023 · Oct 6, 2023
diff --git a/.eslintignore b/.eslintignore
@@ -2,4 +2,5 @@ node_modules
 packages/**/node_modules/
 package-lock.json
 packages/**/scripts/
-packages/**/build/
+packages/**/build/
+packages/**/dist/
diff --git a/README.md b/README.md
@@ -4,7 +4,7 @@
 
 This repository uses a monorepo structure. Each node module has its own code in its repsective folder in `packages/`.
 
-- `app` - The create-react-app static frontend website that patients use to join their telehealth visit and providers use to answer.
+- `app` - The static frontend website that patients use to join their telehealth visit and providers use to answer.
 - `zambdas` - The application's backend endpoints, deployed on the zapEHR platform.
 
 Each package has its own README explaining in more detail its purpose, as well as how to run locally and deploy (if applicable).

diff --git a/packages/app/.gitignore b/packages/app/.gitignore
@@ -10,6 +10,7 @@
 
 # production
 /build
+/dist
 
 # misc
 .DS_Store

diff --git a/packages/app/README.md b/packages/app/README.md
@@ -1,6 +1,6 @@
 # app
 
-The create-react-app static frontend web application for zapEHR Telehealth.
+The static frontend web application for zapEHR Telehealth.
 
 ## Run Locally
 

diff --git a/packages/app/env/.env.dev b/packages/app/env/.env.dev
@@ -0,0 +1,3 @@
+VITE_FHIR_API_URL=https://fhir-api.zapehr.com
+VITE_PROJECT_API_URL=http://localhost:todo,
+VITE_UPLOAD_URL=https://project-api.zapehr.com/v1,
diff --git a/packages/app/env/.env.staging b/packages/app/env/.env.staging
@@ -0,0 +1,3 @@
+VITE_FHIR_API_URL=https://fhir-api.zapehr.com
+VITE_PROJECT_API_URL=http://localhost:todo,
+VITE_UPLOAD_URL=https://project-api.zapehr.com/v1,
diff --git a/packages/app/env/.env.testing b/packages/app/env/.env.testing
@@ -0,0 +1,3 @@
+VITE_FHIR_API_URL=https://fhir-api.zapehr.com
+VITE_PROJECT_API_URL=http://localhost:todo,
+VITE_UPLOAD_URL=https://project-api.zapehr.com/v1,
diff --git a/packages/app/env/dev.env.js b/packages/app/env/dev.env.js
diff --git a/packages/app/env/local.env.js b/packages/app/env/local.env.js
diff --git a/packages/app/env/staging.env.js b/packages/app/env/staging.env.js
diff --git a/packages/app/env/testing.env.js b/packages/app/env/testing.env.js
diff --git a/packages/app/public/index.html → packages/app/index.html b/packages/app/public/index.html → packages/app/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.png" />
+    <link rel="icon" href="/favicon.png" />
     <link
       rel="stylesheet"
       rel="prefetch"
@@ -15,16 +15,18 @@
     <meta
       name="description"
       content="zapEHR Telemedicine"
-      build-version="%REACT_APP_VERSION%"
-      build-commit="%REACT_APP_SHA%"
+      build-version="%VITE_VERSION%"
+      build-commit="%VITE_SHA%"
     />
     <script type="text/javascript" src="https://cdn.oncehub.com/mergedjs/so.js"></script>
-    <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>zapEHR Telemedicine</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>
diff --git a/packages/app/package.json b/packages/app/package.json
@@ -4,28 +4,27 @@
   "private": true,
   "scripts": {
     "start": "pnpm run start:local",
-    "start:local": "ENV=local pnpm run start-skeleton",
+    "start:local": "vite",
     "start:local-to-zapehr-local": "ENV=local-to-zapehr-local pnpm run start-skeleton",
     "start:dev": "ENV=dev pnpm run start-skeleton",
     "start:testing": "ENV=testing pnpm run start-skeleton",
     "start:staging": "ENV=staging pnpm run start-skeleton",
-    "start-skeleton": "env-cmd -f env/${ENV}.env.js react-scripts start",
+    "start-skeleton": "vite --mode ${ENV}",
     "build": "pnpm run build:dev",
     "build:dev": "ENV=dev ROBOTS_FILE=lowers pnpm run build-skeleton",
-    "build:dev2": "ENV=dev2 ROBOTS_FILE=lowers pnpm run build-skeleton",
     "build:testing": "ENV=testing ROBOTS_FILE=lowers pnpm run build-skeleton",
     "build:staging": "ENV=staging ROBOTS_FILE=lowers pnpm run build-skeleton",
     "build:production": "ENV=production ROBOTS_FILE=production pnpm run build-skeleton",
-    "build-skeleton": "env-cmd -f env/${ENV}.env.js react-scripts build && cp src/assets/robots-${ROBOTS_FILE}.txt build/robots.txt",
+    "build-skeleton": "vite build --mode ${ENV} && cp src/assets/robots-${ROBOTS_FILE}.txt dist/robots.txt",
     "deploy:dev": "ENV=dev PREFIX=development pnpm run deploy-skeleton",
     "deploy:dev2": "ENV=dev2 PREFIX=development pnpm run deploy-skeleton",
     "deploy:testing": "ENV=testing PREFIX=testing pnpm run deploy-skeleton",
-    "deploy-skeleton": "REACT_APP_SHA=$(git rev-parse --short HEAD) REACT_APP_VERSION=$(node -pe 'require(\"./package.json\").version') pnpm run build:${ENV} && aws s3 sync build/ s3://${PREFIX}-TODO.masslight.com --profile TODO --delete",
+    "deploy-skeleton": "VITE_SHA=$(git rev-parse --short HEAD) VITE_VERSION=$(node -pe 'require(\"./package.json\").version') pnpm run build:${ENV} && aws s3 sync dist/ s3://${PREFIX}-TODO.masslight.com --profile TODO --delete",
     "ci-deploy:dev": "ENV=dev PREFIX=development CLOUDFRONT_ID=TODO pnpm run ci-deploy-skeleton",
     "ci-deploy:testing": "ENV=testing PREFIX=testing CLOUDFRONT_ID=TODO pnpm run ci-deploy-skeleton",
     "ci-deploy:staging": "ENV=staging PREFIX=staging CLOUDFRONT_ID=TODO pnpm run ci-deploy-skeleton",
     "ci-deploy:production": "ENV=production PREFIX=production CLOUDFRONT_ID=TODO pnpm run ci-deploy-skeleton",
-    "ci-deploy-skeleton": "REACT_APP_SHA=${GIT_HEAD:-$(git rev-parse --short HEAD)} REACT_APP_VERSION=$(node -pe 'require(\"./package.json\").version') pnpm run build:${ENV} && aws s3 sync build/ s3://${PREFIX}-TODO.masslight.com --region us-east-1 --delete && aws cloudfront create-invalidation --distribution-id ${CLOUDFRONT_ID} --paths '/*' --region us-east-1",
+    "ci-deploy-skeleton": "VITE_SHA=${GIT_HEAD:-$(git rev-parse --short HEAD)} VITE_VERSION=$(node -pe 'require(\"./package.json\").version') pnpm run build:${ENV} && aws s3 sync dist/ s3://${PREFIX}-TODO.masslight.com --region us-east-1 --delete && aws cloudfront create-invalidation --distribution-id ${CLOUDFRONT_ID} --paths '/*' --region us-east-1",
     "test": "react-scripts test",
     "lint": "eslint",
     "prettier": "prettier --write ."
@@ -80,12 +79,15 @@
     "@types/react-dom": "^18.0.6",
     "@typescript-eslint/eslint-plugin": "^5.45.0",
     "@typescript-eslint/parser": "^5.45.0",
+    "@vitejs/plugin-react-swc": "3.4.0",
     "eslint": "^8.29.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "prettier": "^2.8.0",
-    "react-scripts": "^5.0.1",
-    "typescript": "^4.7.4"
+    "typescript": "^4.7.4",
+    "vite": "4.4.11",
+    "vite-plugin-svgr": "4.1.0",
+    "vite-tsconfig-paths": "4.2.1"
   }
 }
diff --git a/packages/app/src/api/zapehrApi.ts b/packages/app/src/api/zapehrApi.ts
@@ -6,9 +6,9 @@ export interface ZapehrSearchParameter {
   value: string;
 }
 
-const CHECK_IN_ZAMBDA_ID = process.env.REACT_APP_CHECK_IN_ZAMBDA_ID;
-const GET_PATIENTS_ZAMBDA_ID = process.env.REACT_APP_GET_PATIENTS_ZAMBDA_ID;
-const GET_APPOINTMENTS_ZAMBDA_ID = process.env.REACT_APP_GET_APPOINTMENTS_ZAMBDA_ID;
+const CHECK_IN_ZAMBDA_ID = import.meta.env.VITE_CHECK_IN_ZAMBDA_ID;
+const GET_PATIENTS_ZAMBDA_ID = import.meta.env.VITE_GET_PATIENTS_ZAMBDA_ID;
+const GET_APPOINTMENTS_ZAMBDA_ID = import.meta.env.VITE_GET_APPOINTMENTS_ZAMBDA_ID;
 
 class API {
   async checkIn(zambdaClient: ZambdaClient, appointmentId: string): Promise<any> {

diff --git a/packages/app/src/components/FileUpload.tsx b/packages/app/src/components/FileUpload.tsx
@@ -70,7 +70,7 @@ const FileUpload: FC<FileUploadProps> = ({ name, label, defaultValue, options })
 
         // Return an endpoint to the file input to create the object
         const fileType = file.type.split('/')[1];
-        return `${process.env.REACT_APP_UPLOAD_URL}/z3/object/${bucketName}/${objectFolder}/${objectName}.${fileType}`;
+        return `${import.meta.env.VITE_UPLOAD_URL}/z3/object/${bucketName}/${objectFolder}/${objectName}.${fileType}`;
       } else {
         console.error('Error uploading file: No patient id found');
         return null;

diff --git a/packages/app/src/index.css b/packages/app/src/index.css
@@ -10,6 +10,8 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
 }
 
+@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@100;200;300;400;500;700&display=swap');
+
 @font-face {
   font-family: 'PMDiatype';
   src: local('PMDiatype'), url(./fonts/PMDiatype-Regular.woff2) format('woff2'),
@@ -59,5 +61,3 @@ code {
     local('TiemposHeadline'), url(./fonts/TiemposHeadline-Regular.otf) format('otf'),
     local('TiemposHeadline'), url(./fonts/TiemposHeadline-Regular.ttf) format('ttf');
 }
-
-@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@100;200;300;400;500;700&display=swap');
diff --git a/packages/app/src/pages/Version.tsx b/packages/app/src/pages/Version.tsx
@@ -1,19 +1,19 @@
 const Version = (): JSX.Element => {
-  const { REACT_APP_ENV, REACT_APP_SHA, REACT_APP_VERSION } = process.env;
+  const { VITE_ENV, VITE_SHA, VITE_VERSION } = import.meta.env;
 
   return (
     <div>
       <p>
         Env:
-        {REACT_APP_ENV}
+        {VITE_ENV}
       </p>
       <p>
         Hash:
-        {REACT_APP_SHA}
+        {VITE_SHA}
       </p>
       <p>
         Version:
-        {REACT_APP_VERSION}
+        {VITE_VERSION}
       </p>
     </div>
   );

diff --git a/packages/app/src/store/IntakeActions.tsx b/packages/app/src/store/IntakeActions.tsx
@@ -5,7 +5,7 @@ import { FhirClient, ZambdaClient } from '@zapehr/sdk';
 
 export const setFhirClient = (token: string, dispatch: Dispatch<IntakeAction>): void => {
   const fhirClient = new FhirClient({
-    apiUrl: process.env.REACT_APP_FHIR_API_URL,
+    apiUrl: import.meta.env.VITE_FHIR_API_URL,
     accessToken: token,
   });
   dispatch({
@@ -16,7 +16,7 @@ export const setFhirClient = (token: string, dispatch: Dispatch<IntakeAction>):
 
 export const setZambdaClient = (token: string | undefined, dispatch: Dispatch<IntakeAction>): void => {
   const zambdaClient = new ZambdaClient({
-    apiUrl: process.env.REACT_APP_PROJECT_API_URL,
+    apiUrl: import.meta.env.VITE_PROJECT_API_URL,
     accessToken: token,
   });
   dispatch({

diff --git a/packages/app/src/vite-env.d.ts b/packages/app/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/packages/app/tsconfig.json b/packages/app/tsconfig.json
@@ -4,5 +4,5 @@
     "jsx": "react-jsx",
     "lib": ["dom"]
   },
-  "include": ["src", "env"]
+  "include": ["src", "env", "vite.config.ts"]
 }
diff --git a/packages/app/vite.config.ts b/packages/app/vite.config.ts
@@ -0,0 +1,8 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react-swc';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  base: '/',
+  plugins: [react()],
+});