Migration from CRA to Vite 6 (#75)

# Migration from CRA to Vite 6

## ♻️ Current situation & Problem
The application currently uses Create React App as its build tool, which
has been formally deprecated. [Vite](https://vite.dev/) is the most
suitable replacement that is actively maintained.


## ⚙️ Release Notes 
- Migrates from Create React App to Vite 6.


## 📚 Documentation
Updates documentation to reflect changes in build commands.

### Code of Conduct & Contributing Guidelines 

By submitting creating this pull request, you agree to follow our [Code
of
Conduct](https://github.com/StanfordBDHG/.github/blob/main/CODE_OF_CONDUCT.md)
and [Contributing
Guidelines](https://github.com/StanfordBDHG/.github/blob/main/CONTRIBUTING.md):
- [X] I agree to follow the [Code of
Conduct](https://github.com/StanfordBDHG/.github/blob/main/CODE_OF_CONDUCT.md)
and [Contributing
Guidelines](https://github.com/StanfordBDHG/.github/blob/main/CONTRIBUTING.md).

.github/workflows/deploy.yml → .github/workflows/build-and-deploy.yml

@@ -1,4 +1,4 @@
-name: Deploy React Application
+name: Build and Deploy To GitHub Pages
 
 on:
   push:
@@ -10,19 +10,18 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [16.x]
+        node-version: [18.x]
 
     steps:
       - uses: actions/checkout@v2
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v2
         with:
           node-version: ${{ matrix.node-version }}
-      - name: Install Dependencies, Build, and Test
+      - name: Install Dependencies and Build
         run: |
           npm ci
           npm run build --if-present
-          npm test -- --watchAll=false
         env:
           CI: ""
       - name: Deploy to Github Pages

.github/workflows/build-and-test.yml

@@ -12,7 +12,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [16.x]
+        node-version: [18.x]
 
     steps:
       - uses: actions/checkout@v2
@@ -24,6 +24,5 @@ jobs:
         run: |
           npm ci
           npm run build --if-present
-          npm test -- --watchAll=false
         env:
           CI: ""

Dockerfile

@@ -1,7 +1,7 @@
 # We are using a multi-stage build to keep our final image clean and small
 
 # Stage 1: Build a temporary image
-FROM node:16 as build
+FROM node:18 as build
 
 # Set working directory
 WORKDIR /app

README.md

@@ -16,19 +16,63 @@ A web application that allows you to build healthcare surveys using the [HL7® F
 - Node.js & npm
 
 ## Getting Started
-- To use the application online, visit https://stanfordbdhg.github.io/phoenix.
+- To use the application online, visit [https://stanfordbdhg.github.io/phoenix](https://stanfordbdhg.github.io/phoenix).
 
 ## Run for Development
-- First, ensure that Node.js (version 16 or greater) and npm are installed on your system.
-- Clone this repository and run `npm install` in the root directory.
-- Run `npm start` to start the application in development mode.
-- Open `localhost:3000/phoenix` in your browser to view the application.
+First, ensure that Node.js (version 18 or greater) and npm are installed on your system.
+
+In your terminal, clone this repository from GitHub to your local computer.
+
+```bash
+git clone https://github.com/StanfordBDHG/phoenix.git
+```
+
+Run the following command in the project directory to install dependencies.
+
+```bash
+npm install
+```
+
+Now, run the following command to start the application in development mode.
+
+```bash
+npm run dev
+```
+
+You should see the following message in your terminal if the application is running successfully.
+
+```bash
+  VITE v5.4.12  ready in 133 ms
+
+  ➜  Local:   http://localhost:3000/
+  ➜  Network: use --host to expose
+  ➜  press h + enter to show help
+```
+
+You can now open [http://localhost:3000/phoenix](http://localhost:3000/phoenix) in your browser to view the application.
 
 ## Build for Production
-- First, ensure that Node.js (version 16 or greater) and npm are installed on your system.
-- Clone this repository and run `npm install` in the root directory.
-- Run `npm run build` in the root directory.
-- The build files will be found in the `build/` subdirectory. You may deploy these files to the static web hosting service of your choice.
+First, ensure that Node.js (version 16 or greater) and npm are installed on your system.
+
+In your terminal, clone this repository from GitHub to your local computer.
+
+```bash
+git clone https://github.com/StanfordBDHG/phoenix.git
+```
+
+Run the following command in the project directory to install dependencies.
+
+```bash
+npm install
+```
+
+Now, run the following command to build the application for production.
+
+```bash
+npm run build
+```
+
+The build files will be found in the `build/` subdirectory. You may deploy these files to the static web hosting service of your choice.
 
 ## Build and Run in Docker
 
@@ -47,7 +91,7 @@ docker run -p 8080:80 phoenix-survey-builder
 > [!TIP]
 > You may also substitute `8080` in the command above with a different port of your choice.
 
-Open `localhost:8080/phoenix` in your browser to view the application.
+Open `http://localhost:8080/phoenix` in your browser to view the application.
 
 ## Deploy to GitHub Pages
 

index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Phoenix Survey Builder</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>