Vue3 upgrade

.babelrc

@@ -1,28 +1,14 @@
 {
   "presets": [
-    ["env", {
-      modules: false,
-      useBuiltIns: true,
-      targets: {
-        browsers: [
-          '> 1%',
-          'last 2 versions'
-        ]
+    ["@babel/preset-env", {
+      "useBuiltIns": "entry",
+      "targets": {
+        "node": "current"
       }
     }]
   ],
   "plugins": [
+    '@babel/plugin-transform-modules-commonjs',
     "transform-object-rest-spread"
-  ],
-  "env": {
-    "test": {
-       "presets": [
-        ["env", {
-          targets: {
-            "node": "current"
-          }
-        }]
-      ]
-    }
-  }
+  ]
 }

.github/workflows/node.js.yml

@@ -12,29 +12,32 @@ on:
 jobs:
   build:
 
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
 
     strategy:
       matrix:
-        node-version: [14.x]
+        node-version: [20.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
     - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v3
+      uses: actions/setup-node@v4
       with:
         node-version: ${{ matrix.node-version }}
         cache: 'npm'
     - run: npm ci
-    - run: npm run lint
+#    - run: npm run lint
     - run: npm run build
-    - run: npm test
-    - run: npm run e2e-ci
-    - name: Upload E2E Test Report
-      uses: actions/upload-artifact@v3
+    - run: npm run cy:run
+    - name: Cypress e2e run
+      uses: cypress-io/github-action@v6
+      with:
+        start: npm run serve-http
+    - name: Upload E2E Test Artifacts
+      uses: actions/upload-artifact@v4
       if: always()
       with:
-        name: playwright-report
-        path: playwright-report/
+        name: e2e_tests
+        path: cypress/videos/e2e_tests.cy.js.mp4
         retention-days: 30

.github/workflows/pages.yml

@@ -32,22 +32,30 @@ defaults:
 jobs:
   build:
 
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
 
     steps:
       - name: Checkout
         uses: actions/checkout@v3
       - name: Use Node.js 
         uses: actions/setup-node@v3
         with:
-          node-version: 14.x
+          node-version: 20.x
           cache: 'npm'
       - run: npm ci
       - run: npm run build
 
   # Deployment job
       - name: Deploy 🚀
+        if: ${{ github.ref_name == 'master' }}
         uses: JamesIves/github-pages-deploy-action@3.7.1
-        with:       
+        with:
           BRANCH: gh-pages # The branch the action should deploy to.
-          FOLDER: public # The folder the action should deploy.
+          FOLDER: build # The folder the action should deploy.
+      - name: Test build
+        if: ${{ github.ref_name != 'master' }}
+        uses: JamesIves/github-pages-deploy-action@3.7.1
+        with:
+          BRANCH: gh-pages-test # The branch the action should deploy to.
+          FOLDER: build # The folder the action should deploy.
+

.gitignore

@@ -1,5 +1,6 @@
 .DS_Store
 node_modules/
+build/
 public/build.js
 public/build.js.map
 public/assets
@@ -8,7 +9,7 @@ yarn-error.log
 data-scripts/venv
 data-scripts/__pycache__
 data-scripts/*.pyc
-
+public/build
 # Editor directories and files
 .idea
 *.suo
@@ -17,4 +18,6 @@ data-scripts/*.pyc
 *.sln
 /test-results/
 /playwright-report/
-/playwright/.cache/
+/playwright/.cache/
+cypress/screenshots/*
+cypress/videos/*

Dockerfile

@@ -1,3 +1,3 @@
-FROM node:14-alpine3.15
-  RUN apk update && apk add --no-cache bash
+FROM node:20-alpine3.18
+  RUN apk update && apk add --no-cache bash && apk add --no-cache python3
   ENTRYPOINT ["bash"]

README.md

@@ -7,22 +7,22 @@ These endorsements are determined by Ward Leaders, and have a huge influence ove
 
 # Local development
 
-This project currently requires outdated node and npm versions to build.
+This project currently uses node version 20 to build.
 
-Use Docker to start up a container that has working versions. The lines with ">"
+You can use Docker to start up a container that has node 20 if you don't have it for local development. The lines with ">"
 are in the native shell, the lines with ~ are in Docker.
 
 ```bash
 # Build and start the Docker container.
->  docker-compose build
->  docker-compose up -d
->  docker-compose exec ward-leaders bash
+>  docker compose build
+>  docker compose up -d
+>  docker compose exec ward-leaders bash
 
 # Install dependencies in the Docker container
 ~ npm ci
 
-# In Docker, serve with hot reload at localhost:8080
-~ npm start
+# In Docker, serve at localhost:8080
+~ npm run dev
 
 # Inital load of the app in your browser is slow, fyi.
 # The dev server has hot reload - you should see any
@@ -35,7 +35,7 @@ are in the native shell, the lines with ~ are in Docker.
 # Exit docker and stop the container
 ~ exit
 
->  docker-compose down
+>  docker compose down
 ```
 
 # Technical overview
@@ -55,27 +55,27 @@ While this application runs in the browser, completely client-side, [Node.js](ht
 **Contentful**
 Poking around [their website](https://www.contentful.com/) may be enough, but it would be helpful to create a free account and poke around to make sure you understand the concept of a CMS-as-a-Service.
 
-**Webpack**
-[Webpack](https://webpack.js.org/) is a tool that aids you in pulling your hair out, building up frustration, and considering leaving front-end development behind for good. You can also use it to combine JavaScript modules into a bundled file that can be run in the browser. In this project it’s also used to run a local development server. Webpack can do *a ton* of things, and one of the trade-offs is that it’s rather confusing to configure and debug.
+**Vite**
+[Vite](https://vite.dev/guide/) Is used to build and combine JavaScript modules into a bundled file that can be run in the browser. In this project it’s also used to run a local development server and the server for e2e tests.
 
 **Modern JavaScript features**
 This application is written in modern JavaScript (ES2015-ES2017) with language features such as [arrow functions](https://github.com/DrkSephy/es6-cheatsheet#arrow-functions), [destructuring](https://github.com/DrkSephy/es6-cheatsheet#destructuring), [object spread operator](https://codeburst.io/master-javascripts-object-spread-operator-3803430e99aa), and [async/await](http://nikgrozev.com/2017/10/01/async-await/). 
 
-**Babel**
-[Babel](https://babeljs.io/) allows us to support older browsers by transpiling our modern source code into source code that is more widely supported.
-
 **Vue.js**
-We chose this framework because it’s relatively easy to get up-to-speed in, even if you’ve never used a JS framework before. But there are probably a few Vue.js-only things you’ll find yourself scratching your head about if it’s your first Vue.js app. It would be worth reading through their [really great guide](https://vuejs.org/v2/guide/).
+We chose this framework because it’s relatively easy to get up-to-speed in, even if you’ve never used a JS framework before. But there are probably a few Vue.js-only things you’ll find yourself scratching your head about if it’s your first Vue.js app. It would be worth reading through their [really great guide](https://vuejs.org/guide/introduction.html). This project was initially developed with Vue 2 and later upgraded to Vue 3. It uses the Options API.
 
 **Composing components**
 This is a concept that you’ll already know if you’ve used React, Angular, choo, or other modern JS frameworks. If not, you’ll come across it [in the Vue.js guide](https://vuejs.org/v2/guide/#Composing-with-Components). [React’s docs](https://reactjs.org/docs/thinking-in-react.html) are also helpful for the concept.
 
 **Vuex**
-We use Vue.js’ official centralized state management library, vuex. If you’re familiar with flux, redux, or elm, this will be pretty recognizable. If it’s your first time with centralized state management, this may be the most complex concept. Read over the [vuex docs](https://vuex.vuejs.org/en/) — specifically “What is vuex?”
+We use Vue.js’ centralized state management library, vuex. If you’re familiar with flux, redux, or elm, this will be pretty recognizable. If it’s your first time with centralized state management, this may be the most complex concept. Read over the [vuex docs](https://vuex.vuejs.org/en/) — specifically “What is vuex?”
 
 **Vue-router**
 If you’ve used a router before, whether in JS or a server-side environment, this should seem pretty familiar. But it will be helpful to have the [vue-router docs](https://router.vuejs.org/en/) handy for anything that’s not obvious.
 
+**Testing**
+[Cypress](https://www.cypress.io/) Only the Cypress component and e2e tests are currently being utilized. The tests are run automatically using github actions, but also can be run locally with npm.
+
 ## Directory structure
 ```
 .
@@ -84,10 +84,11 @@ If you’ve used a router before, whether in JS or a server-side environment, th
 ├── README.md
 ├── data-scripts
 ├── package.json
+├── index.html
 ├── public
 │   ├── data
 │   ├── CNAME
-│   ├── index.html
+│   ├── 404.html
 ├── src
 │   ├── App.vue
 │   ├── api
@@ -103,14 +104,16 @@ If you’ve used a router before, whether in JS or a server-side environment, th
 │   │   └── mutations.js
 │   ├── util.js
 │   └── views
-├── tests
-└── webpack.config.js
+├── cypress
+└── vite.config.js
+└── cypress.config.js
 ```
 
 ## `src` directory
 | **File / directory** | **Description**                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
 | -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `public`             | The directory that gets deployed. It includes the static `index.html` in source control, but the `build` script will put additional (compiled) files into this directory.                                                                                                                                                                                                                                                                                            |
+| `index.html`         | Vite uses this as the basis for serving the site. Inline JS code works together with code in 404.html to made this work as a single page app on github pages.
+| `public`             | Static assests that are copied to the build to be deployed. The `build` script will put additional (compiled) files together with these files and `index.html` in a `build/` directory.                                                                                                                                                                                                                                                                                            |
 | `public/data`        | Static data files that are requested dynamically by the application (at runtime).                                                                                                                                                                                                                                                                                                                                                                                    |
 | `main.js`            | Primary entry point for the app. Initializes router, store, and the top-level Vue component, mounting it to the `#app` element in `index.html`.                                                                                                                                                                                                                                                                                                                      |
 | `App.vue`            | Top-level Vue component. Provides the layout for the site, including the nav bar, loading indicator, and space for the current route’s view. Also sets up the site’s core styles.                                                                                                                                                                                                                                                                                    |

babel.config.js

@@ -0,0 +1,14 @@
+module.exports = {
+  "presets": [
+    ["@babel/preset-env", {
+      "useBuiltIns": "entry",
+      "targets": {
+        "node": "current"
+      }
+    }]
+  ],
+  "plugins": [
+    '@babel/plugin-transform-modules-commonjs',
+    "transform-object-rest-spread"
+  ]
+}

cypress.config.js

@@ -0,0 +1,38 @@
+const  { defineConfig } = require('cypress');
+const { startDevServer } = require('@cypress/vite-dev-server');
+
+module.exports=defineConfig({
+  component: {
+    specPattern: '**/*.cy.{js,jsx,ts,tsx}',
+    devServer: {
+      framework: 'vue',
+      bundler: 'vite',
+    },
+  },
+  e2e: {
+    baseUrl: 'http://localhost:8080', // Default Vite dev server port
+    supportFile: 'cypress/support/e2e.js',
+    specPattern: 'cypress/e2e/**/*.cy.js',
+    viewportWidth: 1280,
+    viewportHeight: 720,
+    defaultCommandTimeout: 3000,
+    video: true,
+    retries: {
+      runMode: 2,
+      openMode: 0,
+    },
+    setupNodeEvents(on, config) {
+      on('dev-server:start', (options) => {
+        return startDevServer({
+          options,
+          viteConfig: {
+            configFile: 'vite.config.js', // Path to your Vite config file
+          },
+        });
+      });
+
+      return config;
+    },
+  },
+});
+