Switched from CRA to Vite (#69)

hackutd · Mar 5, 2024 · 2016a6d · 2016a6d
1 parent 9b4e9a7
commit 2016a6d
Show file tree

Hide file tree

Showing 25 changed files with 1,350 additions and 8,797 deletions.
diff --git a/.do/deploy.template.yaml b/.do/deploy.template.yaml
@@ -4,9 +4,9 @@ spec:
   - name: jury-service
     dockerfile_path: Dockerfile
     envs:
-    - key: REACT_APP_JURY_NAME
+    - key: VITE_JURY_NAME
       scope: RUN_AND_BUILD_TIME
-    - key: REACT_APP_JURY_URL
+    - key: VITE_JURY_URL
       scope: RUN_AND_BUILD_TIME
       value: /api
     - key: JURY_ADMIN_PASSWORD

diff --git a/.env.template b/.env.template
@@ -1,6 +1,5 @@
 JURY_NAME=
 JURY_ADMIN_PASSWORD=
-JURY_BASE_URL=
 
 MONGODB_URI=
 MONGODB_USER=

diff --git a/Dockerfile b/Dockerfile
@@ -6,9 +6,9 @@ COPY client/src src
 COPY ["client/package.json", "client/tailwind.config.js", "client/tsconfig.json", "./"]
 
 ARG NODE_ENV=production
-ARG REACT_APP_JURY_NAME
-ARG REACT_APP_HUB
-ARG REACT_APP_JURY_URL
+ARG VITE_JURY_NAME
+ARG VITE_HUB
+ARG VITE_JURY_URL
 
 RUN yarn install
 RUN yarn build

diff --git a/README.md b/README.md
@@ -24,7 +24,7 @@ Note that since Digital Ocean charges prorated, this will literally be like less
 
 Click on "edit" next to "jury-service" and fill in the env as follows:
 
-- REACT_APP_JURY_NAME - Name of the app to display to the user (eg. HackUTD X Judging)
+- VITE_JURY_NAME - Name of the app to display to the user (eg. HackUTD X Judging)
 - JURY_ADMIN_PASSWORD - Password for the admin portal (suggestion: use 2 random words)
 - MONGODB_URI - URI of MongoDB Atlas instance (see step 0)
 
@@ -129,12 +129,12 @@ Here is the Figma design file: https://www.figma.com/file/qwBWs4i7pJMpFbcjMffDZU
 
 ## Backend Routes
 
-All routes are found at the `http://localhost:8000/api` endpoint, which can be accessed on the frontend through the `REACT_APP_JURY_URL` environmental variable.
+All routes are found at the `http://localhost:8000/api` endpoint, which can be accessed on the frontend through the `VITE_JURY_URL` environmental variable.
 
 An example fetch request (The `credentials: include` allow for authentication cookies to be sent over):
 
 ```js
-const fetchedProjects = await fetch(`${process.env.REACT_APP_JURY_URL}/project/list`, {
+const fetchedProjects = await fetch(`${import.meta.env.VITE_JURY_URL}/project/list`, {
     method: 'GET',
     headers: { 'Content-Type': 'application/json' },
     credentials: 'include',

diff --git a/client/.env.template b/client/.env.template
@@ -1,2 +1,2 @@
-REACT_APP_JURY_URL=
-REACT_APP_JURY_NAME=
+VITE_JURY_URL=
+VITE_JURY_NAME=
diff --git a/client/dev.Dockerfile b/client/dev.Dockerfile
@@ -1,8 +1,8 @@
 FROM node:lts-hydrogen as client-builder
 WORKDIR /client
 
-ENV REACT_APP_JURY_NAME=$REACT_APP_JURY_NAME
-ENV REACT_APP_JURY_URL=$REACT_APP_JURY_URL
-ENV REACT_APP_HUB=$REACT_APP_HUB
+ENV VITE_JURY_NAME=$VITE_JURY_NAME
+ENV VITE_JURY_URL=$VITE_JURY_URL
+ENV VITE_HUB=$VITE_HUB
 
 CMD [ "yarn", "run", "docker" ]
diff --git a/client/public/index.html → client/index.html b/client/public/index.html → client/index.html
@@ -2,11 +2,11 @@
 <html lang="en">
     <head>
         <title>Jury</title>
-        <meta name="description" content="A modernized pairwise judging system" />
+        <meta name="description" content="A modernized hackathon judging system" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <meta charset="UTF-8" />
         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-        <link rel="icon" href="%PUBLIC_URL%/favicon.ico?v=1" />
+        <link rel="icon" href="/favicon.ico?v=1" />
         <link rel="preconnect" href="https://fonts.googleapis.com" />
         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" />
         <link
@@ -16,6 +16,7 @@
     </head>
     <body>
         <noscript>You need to enable JavaScript to run this app.</noscript>
+        <script type="module" src="/src/index.tsx"></script>
         <div id="root"></div>
         <!--
       This HTML file is a template.

diff --git a/client/package.json b/client/package.json
@@ -2,37 +2,39 @@
     "name": "client",
     "version": "0.1.0",
     "private": true,
+    "type": "module",
     "main": "index.tsx",
     "license": "MIT",
     "dependencies": {
-        "@tailwindcss/forms": "^0.5.3",
-        "@tailwindcss/line-clamp": "^0.4.4",
-        "@types/node": "^16.7.13",
-        "@types/react": "^18.0.0",
-        "@types/react-dom": "^18.0.0",
         "localforage": "^1.10.0",
         "match-sorter": "^6.3.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-hook-form": "^7.44.3",
         "react-router-dom": "^6.8.1",
-        "react-scripts": "5.0.1",
-        "tailwind-merge": "^1.9.1",
         "typescript": "^4.4.2",
         "universal-cookie": "^4.0.4",
         "zustand": "^4.3.8"
     },
     "devDependencies": {
+        "@tailwindcss/forms": "^0.5.3",
+        "@tailwindcss/line-clamp": "^0.4.4",
+        "@types/node": "^16.7.13",
+        "@types/react": "^18.0.0",
+        "@types/react-dom": "^18.0.0",
+        "@vitejs/plugin-react": "^4.2.1",
+        "autoprefixer": "^10.4.18",
         "esbuild": "^0.17.8",
         "eslint-plugin-unused-imports": "^2.0.0",
-        "tailwindcss": "^3.2.6"
+        "postcss": "^8.4.35",
+        "tailwindcss": "^3.4.1",
+        "tailwind-merge": "^1.9.1",
+        "vite": "^5.1.5"
     },
     "scripts": {
         "docker": "yarn install && yarn start",
-        "start": "react-scripts start",
-        "build": "react-scripts build",
-        "test": "react-scripts test",
-        "eject": "react-scripts eject",
+        "start": "vite",
+        "build": "vite build",
         "lint": "eslint src --ext .js,.jsx,.ts,.tsx"
     },
     "eslintConfig": {

diff --git a/client/postcss.config.js b/client/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/client/src/api.ts b/client/src/api.ts
@@ -1,6 +1,6 @@
 import Cookies from 'universal-cookie';
 
-const BACKEND_URL = process.env.REACT_APP_JURY_URL;
+const BACKEND_URL = import.meta.env.VITE_JURY_URL;
 
 export async function getRequest<T>(path: string, auth: string): Promise<FetchResponse<T>> {
     try {

diff --git a/client/src/components/JuryHeader.tsx b/client/src/components/JuryHeader.tsx
@@ -52,7 +52,7 @@ const JuryHeader = (props: JuryHeaderProps) => {
                     adminCenter
                 )}
             >
-                {process.env.REACT_APP_JURY_NAME}
+                {import.meta.env.VITE_JURY_NAME}
             </div>
             {props.withBack && (
                 <div

diff --git a/client/src/components/admin/add-judges/UploadCSVForm.tsx b/client/src/components/admin/add-judges/UploadCSVForm.tsx
@@ -53,7 +53,7 @@ const UploadCSVForm = (props: UploadCSVFormProps) => {
                     : '/project/devpost';
 
             // Make the request
-            const response = await fetch(`${process.env.REACT_APP_JURY_URL}${path}`, {
+            const response = await fetch(`${import.meta.env.VITE_JURY_URL}${path}`, {
                 method: 'POST',
                 body: formData,
                 headers: createHeaders('admin', false),

diff --git a/client/src/components/home/HomeHub.tsx b/client/src/components/home/HomeHub.tsx
@@ -16,7 +16,7 @@ const AppHub = () => {
                     </a>
                 </h1>
                 <h2 className="text-primary text-3xl text-center font-bold mb-24">
-                    {process.env.REACT_APP_JURY_NAME}
+                    {import.meta.env.VITE_JURY_NAME}
                 </h2>
                 <Button href="/judge/login" type="primary">
                     Judging Portal

diff --git a/client/src/index.tsx b/client/src/index.tsx
@@ -13,16 +13,17 @@ import JudgeWelcome from './pages/judge/welcome';
 import JudgeLive from './pages/judge/live';
 import Project from './pages/judge/project';
 
-import './index.css';
 import AdminSettings from './pages/admin/settings';
 import Expo from './pages/Expo';
 
+import './index.css';
+
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
 
 const router = createBrowserRouter([
     {
         path: '/',
-        element: process.env.REACT_APP_HUB ? <HomeHub /> : <Home />,
+        element: import.meta.env.VITE_HUB ? <HomeHub /> : <Home />,
     },
     {
         path: '/judge/login',

diff --git a/client/src/pages/Expo.tsx b/client/src/pages/Expo.tsx
@@ -40,7 +40,7 @@ const Expo = () => {
         <Container noCenter>
             <h1 className="mt-4 text-4xl text-center font-bold">Project Expo</h1>
             <h2 className="text-2xl text-center font-bold text-primary">
-                {process.env.REACT_APP_JURY_NAME}
+                {import.meta.env.VITE_JURY_NAME}
             </h2>
             <table className="mb-4">
                 <thead>

diff --git a/client/src/pages/Home.tsx b/client/src/pages/Home.tsx
@@ -10,7 +10,7 @@ const App = () => {
                 </a>
             </h1>
             <h2 className="text-primary text-3xl text-center font-bold mb-24">
-                {process.env.REACT_APP_JURY_NAME}
+                {import.meta.env.VITE_JURY_NAME}
             </h2>
             <Button href="/judge/login" type="primary">
                 Judging Portal

diff --git a/client/src/pages/admin/settings.tsx b/client/src/pages/admin/settings.tsx
@@ -127,8 +127,9 @@ const AdminSettings = () => {
         setDropPopup(false);
     };
 
+    // TODO: Why is this not using the getRequest function?
     const exportCsv = async (type: string) => {
-        const res = await fetch(`${process.env.REACT_APP_JURY_URL}/admin/export/${type}`, {
+        const res = await fetch(`${import.meta.env.VITE_JURY_URL}/admin/export/${type}`, {
             method: 'GET',
             headers: createHeaders('admin', false),
         });
@@ -142,7 +143,7 @@ const AdminSettings = () => {
     };
 
     const exportByChallenge = async () => {
-        const res = await fetch(`${process.env.REACT_APP_JURY_URL}/admin/export/challenges`, {
+        const res = await fetch(`${import.meta.env.VITE_JURY_URL}/admin/export/challenges`, {
             method: 'GET',
             headers: createHeaders('admin', false),
         });

diff --git a/client/tailwind.config.js b/client/tailwind.config.js
@@ -1,6 +1,6 @@
 /** @type {import('tailwindcss').Config} */
-module.exports = {
-    content: ['./src/**/*.{js,jsx,ts,tsx}'],
+export default {
+    content: ['index.html', './src/**/*.{js,jsx,ts,tsx}'],
     theme: {
         colors: {
             transparent: '#00000000',

diff --git a/client/tsconfig.json b/client/tsconfig.json
@@ -14,7 +14,8 @@
         "resolveJsonModule": true,
         "isolatedModules": true,
         "noEmit": true,
-        "jsx": "react-jsx"
+        "jsx": "react-jsx",
+        "types": ["vite/client"]
     },
     "include": ["src"]
 }
diff --git a/client/vite.config.js b/client/vite.config.js
@@ -0,0 +1,15 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig(() => {
+    return {
+        build: {
+            outDir: 'build',
+        },
+        plugins: [react()],
+        server: {
+            host: true,
+            port: 3000,
+        }
+    };
+});