[EASI-3250] - Migrate cra to vite

.envrc

@@ -15,11 +15,11 @@ export CLIENT_PORT=3005
 export CLIENT_HOSTNAME=$CLIENT_DOMAIN:$CLIENT_PORT
 export CLIENT_ADDRESS=$CLIENT_PROTOCOL://$CLIENT_HOSTNAME
 export API_PORT=8085
-export REACT_APP_API_ADDRESS=$CLIENT_PROTOCOL://$CLIENT_DOMAIN:$API_PORT/api/v1
-export REACT_APP_GRAPHQL_ADDRESS=$CLIENT_PROTOCOL://$CLIENT_DOMAIN:$API_PORT/api/graph/query
-export REACT_APP_APP_ENV=$APP_ENV
+export VITE_API_ADDRESS=$CLIENT_PROTOCOL://$CLIENT_DOMAIN:$API_PORT/api/v1
+export VITE_GRAPHQL_ADDRESS=$CLIENT_PROTOCOL://$CLIENT_DOMAIN:$API_PORT/api/graph/query
+export VITE_APP_ENV=$APP_ENV
 export LOCAL_AUTH_ENABLED=true
-export REACT_APP_LOCAL_AUTH_ENABLED=true
+export VITE_LOCAL_AUTH_ENABLED=true
 
 # Email variables
 export EMAIL_ENABLED=true
@@ -43,16 +43,16 @@ export LAMBDA_ENDPOINT="http://localhost:9006"
 # OKTA variables
 export OKTA_CLIENT_ID=0oad9awvebnsMwWNa297
 export OKTA_CLIENT_ID_DEV=0oad9awvebnsMwWNa297
-export REACT_APP_OKTA_CLIENT_ID=$OKTA_CLIENT_ID
+export VITE_OKTA_CLIENT_ID=$OKTA_CLIENT_ID
 export OKTA_DOMAIN=https://test.idp.idm.cms.gov
-export REACT_APP_OKTA_DOMAIN=$OKTA_DOMAIN
+export VITE_OKTA_DOMAIN=$OKTA_DOMAIN
 export OKTA_SERVER_ID=ausd980kt2CBBzStG297
 export OKTA_SERVER_ID_DEV=ausd980kt2CBBzStG297
-export REACT_APP_OKTA_SERVER_ID=$OKTA_SERVER_ID
+export VITE_OKTA_SERVER_ID=$OKTA_SERVER_ID
 export OKTA_ISSUER=$OKTA_DOMAIN/oauth2/$OKTA_SERVER_ID
-export REACT_APP_OKTA_ISSUER=$OKTA_ISSUER
+export VITE_OKTA_ISSUER=$OKTA_ISSUER
 export OKTA_REDIRECT_URI=http://localhost:3005/implicit/callback
-export REACT_APP_OKTA_REDIRECT_URI=$OKTA_REDIRECT_URI
+export VITE_OKTA_REDIRECT_URI=$OKTA_REDIRECT_URI
 
 # OKTA test account
 # Needed to run Cypress tests. Look in 1Password.
@@ -63,12 +63,12 @@ export OKTA_TEST_SECRET=
 # Launch Darkly configuration
 export FLAG_SOURCE=LOCAL
 export LD_SDK_KEY="check 1Password to find this value"
-export REACT_APP_LD_CLIENT_ID=632afde9635ca2116a04e82e # Points to our "local" environment
+export VITE_LD_CLIENT_ID=632afde9635ca2116a04e82e # Points to our "local" environment
 export LD_TIMEOUT_SECONDS=30
 export FLAGDATA_FILE="./cypress/fixtures/flagdata.json" # File to load LD flag data from when FLAG_SOURCE=FILE
 
 # HelpScout configuration
-export REACT_APP_BEACON_ID="ad55e329-4722-4a83-b3d6-07af22f6edea"
+export VITE_BEACON_ID="ad55e329-4722-4a83-b3d6-07af22f6edea"
 
 # Default minio credentials for local use
 export MINIO_HOST=localhost:9005

.eslintrc

@@ -1,7 +1,8 @@
 {
   "ignorePatterns": ["**/*.d.ts", "serviceWorker.ts",".storybook/**/*","src/gql/gen/**/*"],
   "globals" : {
-    "JSX" : "readonly"
+    "JSX" : "readonly",
+    "vi": true
   },
   "root": true,
   "extends": [

.github/workflows/build_frontend_assets.yml

@@ -40,7 +40,7 @@ jobs:
           OKTA_CLIENT_ID: ${{ secrets.OKTA_CLIENT_ID }}
           OKTA_SERVER_ID: ${{ secrets.OKTA_SERVER_ID }}
           STATIC_S3_BUCKET: ${{ secrets.STATIC_S3_BUCKET }}
-          REACT_APP_BEACON_ID: ${{ secrets.REACT_APP_BEACON_ID }}
+          VITE_BEACON_ID: ${{ secrets.VITE_BEACON_ID }}
         run: |
           ./scripts/build_static.sh
       - name: Upload Frontend assets

.spelling

@@ -228,3 +228,5 @@ Elasticsearch
 Debezium
 StateTrace
 performant
+Vite
+EASI-3250

Dockerfile.client

@@ -11,10 +11,19 @@ RUN yarn install --frozen-lockfile
 
 FROM modules AS src
 
-COPY craco.config.js ./
 COPY tsconfig.json ./
 COPY .eslintrc ./
 COPY public ./public
 COPY src ./src
 
+ARG VITE_APP_ENV
+ARG VITE_API_ADDRESS
+ARG VITE_GRAPHQL_ADDRESS
+ARG VITE_OKTA_CLIENT_ID
+ARG VITE_OKTA_DOMAIN
+ARG VITE_OKTA_ISSUER
+ARG VITE_OKTA_REDIRECT_URI
+ARG VITE_OKTA_SERVER_ID
+ARG VITE_LOCAL_AUTH_ENABLED
+
 ENTRYPOINT [ "yarn", "start" ]

cypress.config.ts

@@ -6,6 +6,7 @@ export default defineConfig({
   projectId: 'vc6vw5',
   defaultCommandTimeout: 10000,
   execTimeout: 120000,
+  video: true,
   e2e: {
     // We've imported your old cypress plugins here.
     // You may want to clean this up later by importing these.

cypress/plugins/index.js

@@ -22,8 +22,7 @@ const cache = new apollo.InMemoryCache();
 
 function createApolloClient(euaId) {
   const gqlURL =
-    process.env.REACT_APP_GRAPHQL_ADDRESS ||
-    'http://localhost:8085/api/graph/query';
+    process.env.VITE_GRAPHQL_ADDRESS || 'http://localhost:8085/api/graph/query';
 
   return new apollo.ApolloClient({
     cache,

cypress/support/global-hooks.js

@@ -1,12 +1,19 @@
 beforeEach(() => {
-  cy.exec('scripts/dev db:clean').then(result => {
-    cy.log('db:clean code', result.code);
-    cy.log('db:clean stdout', result.stdout);
-    cy.log('db:clean stderr', result.stderr);
-  });
-  cy.exec('scripts/dev db:seed').then(result => {
-    cy.log('db:seed code', result.code);
-    cy.log('db:seed stdout', result.stdout);
-    cy.log('db:seed stderr', result.stderr);
+  cy.exec('scripts/dev db:clean', {
+    timeout: 20000,
+    failOnNonZeroExit: false
+  }).then(cleanResult => {
+    cy.log('db:clean code', cleanResult.code);
+    cy.log('db:clean stdout', cleanResult.stdout);
+    cy.log('db:clean stderr', cleanResult.stderr);
+
+    cy.exec('scripts/dev db:seed', {
+      timeout: 20000,
+      failOnNonZeroExit: false
+    }).then(seedResult => {
+      cy.log('db:seed code', seedResult.code);
+      cy.log('db:seed stdout', seedResult.stdout);
+      cy.log('db:seed stderr', seedResult.stderr);
+    });
   });
 });

cypress/support/login.js

@@ -9,7 +9,7 @@ Cypress.Commands.add('login', () => {
     log: false,
     parseSpecialCharSequences: false
   });
-  cy.get('#okta-signin-submit').click();
+  cy.get('#okta-signin-submit').click({ force: true });
 
   cy.get('.beacon-loading').should('not.exist');
   cy.get('body').then($body => {
@@ -19,7 +19,7 @@ Cypress.Commands.add('login', () => {
           token => {
             cy.get('input[name="answer"]').type(token, { log: false });
             cy.get('input[name="rememberDevice"]').check({ force: true });
-            cy.get('input[value="Verify"').click();
+            cy.get('input[value="Verify"]').click();
           }
         );
       });
@@ -34,7 +34,8 @@ Cypress.Commands.add('login', () => {
 Cypress.Commands.add(
   'localLogin',
   ({ name, role = 'MINT_USER_NONPROD', nda }) => {
-    cy.visit('/login');
+    // Adding an extended timeout here to give Vite enough time to compile sass on it's first run
+    cy.visit('/login', { timeout: 120000 });
 
     cy.get('[data-testid="LocalAuth-Visit"]').click();
     cy.get('[data-testid="LocalAuth-EUA"]').type(name);

docker-compose.override.yml

@@ -46,19 +46,19 @@ services:
       dockerfile: Dockerfile.client
       target: src
     environment:
-      - REACT_APP_APP_ENV
-      - REACT_APP_API_ADDRESS
-      - REACT_APP_GRAPHQL_ADDRESS
-      - REACT_APP_OKTA_CLIENT_ID
-      - REACT_APP_OKTA_DOMAIN
-      - REACT_APP_OKTA_ISSUER
-      - REACT_APP_OKTA_REDIRECT_URI
-      - REACT_APP_OKTA_SERVER_ID
-      - REACT_APP_LD_ENV_USER
-      - REACT_APP_LD_USER_HASH
-      - REACT_APP_LD_CLIENT_ID
-      - REACT_APP_LOCAL_AUTH_ENABLED
-      - REACT_APP_BEACON_ID
+      - VITE_APP_ENV
+      - VITE_API_ADDRESS
+      - VITE_GRAPHQL_ADDRESS
+      - VITE_OKTA_CLIENT_ID
+      - VITE_OKTA_DOMAIN
+      - VITE_OKTA_ISSUER
+      - VITE_OKTA_REDIRECT_URI
+      - VITE_OKTA_SERVER_ID
+      - VITE_LD_ENV_USER
+      - VITE_LD_USER_HASH
+      - VITE_LD_CLIENT_ID
+      - VITE_LOCAL_AUTH_ENABLED
+      - VITE_BEACON_ID
       - CHOKIDAR_USEPOLLING=true
       - ESLINT_NO_DEV_ERRORS=true
       - PORT=3005

docs/adr/0013-replace-craco-with-vite.md

@@ -0,0 +1,34 @@
+# Migrate from Create React App & Craco to Vite
+
+**User Story:** [EASI-3250](https://jiraent.cms.gov/browse/EASI-3250)
+
+Meta (the organization who created React) has formally stopped recommending that developers use Create React App. The reasons won't be enumerated here in perfect detail, but this [Pull Request](https://github.com/reactjs/react.dev/pull/5487) on the official React docs site is a good place to start if you want more context.
+
+Given this recommendation, and with the fact that Vite promises (and delivers) faster compilation times, we have considered (and settled on) migrating the application to Vite.
+
+
+## Considered Alternatives
+
+* Stay on CRA/Craco
+* Migrate to Vite
+
+## Decision Outcome
+
+* Chosen Alternative: **Migrate to Vite**
+
+This approach, while a heavy lift, should provide us with faster compilation, better support, and a more modern toolchain.
+
+## Pros and Cons of the Alternatives
+
+### Stay on CRA/Craco
+
+* `+` No config changes to make
+* `+` CRA is a popular tool, despite its age and limitations
+* `-` Less efficient (larger) bundle sizes
+* `-` Much slower compilation times
+
+### Migrate to Vite
+
+* `+` Faster build times
+* `+` More active support and development
+* `-` Requires a lot of trial and error to migrate, with potential breaking changes

public/index.html → index.html

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="/favicon.ico" />
     <!-- TODO: This font should be imported through USWDS and not Google Fonts -->
     <link
       href="https://fonts.googleapis.com/css?family=Public+Sans:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap"
@@ -19,16 +19,7 @@
       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="manifest" href="/manifest.json" />
     <title>CMS MINT</title>
     <script type="text/javascript">!function(e,t,n){function a(){var e=t.getElementsByTagName("script")[0],n=t.createElement("script");n.type="text/javascript",n.async=!0,n.src="https://beacon-v2.helpscout.net",e.parentNode.insertBefore(n,e)}if(e.Beacon=n=function(t,n,a){e.Beacon.readyQueue.push({method:t,options:n,data:a})},n.readyQueue=[],"complete"===t.readyState)return a();e.attachEvent?e.attachEvent("onload",a):e.addEventListener("load",a,!1)}(window,document,window.Beacon||function(){});</script>
   </head>
@@ -45,5 +36,7 @@
       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>