Move to Vite

.github/workflows/ci.yml

@@ -0,0 +1,48 @@
+name: CI
+
+# Controls when the action will run. Triggers the workflow on push or pull request
+# events but only for the master branch
+on:
+  push:
+    branches: [master]
+  pull_request:
+    branches: "*"
+
+jobs:
+  install-deps:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 20
+          cache: yarn
+      - run: yarn install --frozen-lockfile
+  e2e-tests:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 20
+          cache: yarn
+      - run: yarn install --frozen-lockfile
+  deploy-production:
+    name: Deploy production
+    if: ${{ github.ref == 'refs/heads/master' && github.event_name == 'push' }}
+    runs-on: ubuntu-latest
+    needs:
+      - e2e-tests
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 20
+          cache: yarn
+      - run: yarn install --frozen-lockfile
+
+      - name: Build
+        run: yarn build
+
+      - name: Deploy webapp on render
+        run: curl -X POST ${{ secrets.RENDER_DEPLOY_HOOK }}

.gitignore

@@ -22,3 +22,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+test-results
+playwright-report

package.json

@@ -2,27 +2,24 @@
   "name": "portfolio",
   "version": "0.1.0",
   "private": true,
+  "type": "module",
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.25",
     "@fortawesome/free-regular-svg-icons": "^5.11.2",
     "@fortawesome/free-solid-svg-icons": "^5.11.2",
     "@fortawesome/react-fontawesome": "^0.1.7",
+    "@vitejs/plugin-react": "^4.2.1",
     "p5": "^1.4.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-p5": "^1.3.21",
-    "react-router-dom": "^5.3.0",
-    "react-scripts": "3.2.0",
+    "react-router-dom": "^6.20.1",
     "react-transition-group": "^4.3.0"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
-    "deploy": "node tools/deployGeneral.js",
-    "deploy:production": "node tools/deployProduction.js",
-    "deploy:staging": "node tools/deployStaging.js"
+    "dev": "npx vite serve src",
+    "preview": "npx vite preview --port 3000",
+    "build": "yarn install --frozen-lockfile && npx vite build src"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -45,11 +42,14 @@
     ]
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^6.1.5",
     "aws-sdk": "^2.736.0",
     "dotenv": "^8.2.0",
     "mime-types": "^2.1.27",
     "ncp": "^2.0.0",
     "prettier": "^3.1.0",
-    "rimraf": "^3.0.2"
+    "rimraf": "^3.0.2",
+    "vite": "^5.0.5",
+    "vitest": "^1.0.1"
   }
 }

playwright.config.js

@@ -0,0 +1,46 @@
+import { defineConfig } from "@playwright/test";
+import dotenv from "dotenv";
+
+dotenv.config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+
+export default defineConfig({
+  testDir: "./e2e",
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+
+  reporter: "html",
+  /* Use longer timeouts on CI. */
+  timeout: process.env.CI ? 30 * 1000 : 10 * 1000,
+
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: `http://${process.env.HOST || "localhost"}:${
+      process.env.PORT || 3000
+    }`,
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: process.env.CI ? "on-first-retry" : "retain-on-failure",
+
+    screenshot: "only-on-failure",
+    video: process.env.CI ? "on-first-retry" : "retain-on-failure",
+  },
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: "yarn preview",
+    url: `http://127.0.0.1:3000`,
+    reuseExistingServer: !process.env.CI,
+  },
+});

public/index.html → src/index.html

@@ -2,12 +2,12 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Ryan Villanueva is a full stack software engineer in New York City with over {yearsExperienceText} years of professional experience leading technical projects and teams. He graduated from Wharton and worked at IBM Research's innovation lab before moving on to venture-backed startups."
+      content="Ryan Villanueva is a full stack software engineer in New York City with over nine years of professional experience leading technical projects and teams. He graduated from Wharton and worked at IBM Research's innovation lab before moving on to venture-backed startups."
     />
     <link
       href="https://fonts.googleapis.com/css?family=Rubik&display=swap"
@@ -16,79 +16,79 @@
     <link
       rel="apple-touch-icon"
       sizes="57x57"
-      href="%PUBLIC_URL%/icons/apple-icon-57x57.png"
+      href="/icons/apple-icon-57x57.png"
     />
     <link
       rel="apple-touch-icon"
       sizes="60x60"
-      href="%PUBLIC_URL%/icons/apple-icon-60x60.png"
+      href="/icons/apple-icon-60x60.png"
     />
     <link
       rel="apple-touch-icon"
       sizes="72x72"
-      href="%PUBLIC_URL%/icons/apple-icon-72x72.png"
+      href="/icons/apple-icon-72x72.png"
     />
     <link
       rel="apple-touch-icon"
       sizes="76x76"
-      href="%PUBLIC_URL%/icons/apple-icon-76x76.png"
+      href="/icons/apple-icon-76x76.png"
     />
     <link
       rel="apple-touch-icon"
       sizes="114x114"
-      href="%PUBLIC_URL%/icons/apple-icon-114x114.png"
+      href="/icons/apple-icon-114x114.png"
     />
     <link
       rel="apple-touch-icon"
       sizes="120x120"
-      href="%PUBLIC_URL%/icons/apple-icon-120x120.png"
+      href="/icons/apple-icon-120x120.png"
     />
     <link
       rel="apple-touch-icon"
       sizes="144x144"
-      href="%PUBLIC_URL%/icons/apple-icon-144x144.png"
+      href="/icons/apple-icon-144x144.png"
     />
     <link
       rel="apple-touch-icon"
       sizes="152x152"
-      href="%PUBLIC_URL%/icons/apple-icon-152x152.png"
+      href="/icons/apple-icon-152x152.png"
     />
     <link
       rel="apple-touch-icon"
       sizes="180x180"
-      href="%PUBLIC_URL%/icons/apple-icon-180x180.png"
+      href="/icons/apple-icon-180x180.png"
     />
     <link
       rel="icon"
       type="image/png"
       sizes="192x192"
-      href="%PUBLIC_URL%/icons/android-icon-192x192.png"
+      href="/icons/android-icon-192x192.png"
     />
     <link
       rel="icon"
       type="image/png"
       sizes="32x32"
-      href="%PUBLIC_URL%/icons/favicon-32x32.png"
+      href="/icons/favicon-32x32.png"
     />
     <link
       rel="icon"
       type="image/png"
       sizes="96x96"
-      href="%PUBLIC_URL%/icons/favicon-96x96.png"
+      href="/icons/favicon-96x96.png"
     />
     <link
       rel="icon"
       type="image/png"
       sizes="16x16"
-      href="%PUBLIC_URL%/icons/favicon-16x16.png"
+      href="/icons/favicon-16x16.png"
     />
     <meta name="msapplication-TileColor" content="#ffffff" />
     <meta
       name="msapplication-TileImage"
-      content="%PUBLIC_URL%/icons/ms-icon-144x144.png"
+      content="/icons/ms-icon-144x144.png"
     />
     <meta name="theme-color" content="#ffffff" />
-    <link rel="manifest" href="%PUBLIC_URL%/icons/manifest.json" />
+    <link rel="manifest" href="/icons/manifest.json" />
     <link
       href="https://fonts.googleapis.com/css?family=Merriweather&display=swap"
       rel="stylesheet"
@@ -122,5 +122,6 @@
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <script type="module" src="/main.jsx"></script>
   </body>
 </html>

src/index.js → src/main.jsx

@@ -2,11 +2,11 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
-import * as serviceWorker from './serviceWorker';
+// import * as serviceWorker from './serviceWorker';
 
 ReactDOM.render(<App />, document.getElementById('root'));
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.
 // Learn more about service workers: https://bit.ly/CRA-PWA
-serviceWorker.unregister();
+// serviceWorker.unregister();

src/vite.config.js

@@ -0,0 +1,13 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: process.env.FRONTEND_PORT ? Number(process.env.FRONTEND_PORT) : 5000,
+  },
+  build: {
+    outDir: "../build",
+  },
+});