Add vite (#108)

* Move project to vite

* Fix redirect by adding auth provider

* Fix build

* Update deployment actions

* Add nvmrc

* Run prettier, fix action for testing

* Remove option to run with docker for now

* Fix actions

* Replace version and date in deployment

* Add vitest and other testing packages

* Fix tests

* Revert some of the changes introduced

.github/workflows/frontdeploy.yaml

@@ -13,44 +13,37 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v2
-
-      - uses: actions/cache@v2
+      - uses: actions/checkout@v4
+      - uses: actions/cache@v3
         with:
           path: "**/client/node_modules"
-          key: ${{ runner.os }}-modules-${{ hashFiles('**/client/yarn.lock') }}
+          key: ${{ runner.os }}-v2-${{ hashFiles('**/client/package-lock.json') }}
 
-      - name: Use Node.js 14
-        uses: actions/setup-node@v2
+      - name: Use Node.js
+        uses: actions/setup-node@v3
         with:
-          node-version: "14"
+          node-version: "21.x"
 
-      - name: Yarn Install
+      - name: Install dependencies
+        working-directory: ./client
+        run: npm install
+      - name: Replace version
         working-directory: ./client
-        run: yarn install
+        run: |
+          export GIT_HASH=$(git rev-parse --short HEAD)
+          export VITE_APP_DATE_VERSION=$(date -u +'%Y-%m-%d')
+          sed -i "s|VITE_APP_DATE_VERSION=local|VITE_APP_DATE_VERSION=${GIT_HASH}|g" .env
+          sed -i "s|VITE_APP_VERSION=local|VITE_APP_VERSION=${GIT_HASH}|g" .env
       - name: Production build
         working-directory: ./client
-        run: yarn build
-        env:
-          REACT_APP_BASE_URL: ${{ secrets.REACT_APP_BASE_URL }}
-          PUBLIC_URL: ${{ secrets.PUBLIC_URL }}
-      - name: Unit Tests
+        run: npm run build
+      - name: Synchronize files
         working-directory: ./client
-        run: yarn test
-      - name: Deploy to S3
-        uses: jakejarvis/s3-sync-action@master
-        with:
-          args: --acl public-read --delete
-        env:
-          AWS_S3_BUCKET: ${{ secrets.AWS_S3_BUCKET }}
-          AWS_ACCESS_KEY_ID: ${{ secrets.CI_CD_AWS_ACCESS_KEY_ID }}
-          AWS_SECRET_ACCESS_KEY: ${{ secrets.CI_CD_AWS_SECRET_ACCESS_KEY }}
-          AWS_REGION: us-west-2
-          SOURCE_DIR: "client/build"
-      - name: Create cloudfront invalidation
         run: |
           export AWS_ACCESS_KEY_ID=${{ secrets.CI_CD_AWS_ACCESS_KEY_ID }}
           export AWS_SECRET_ACCESS_KEY=${{ secrets.CI_CD_AWS_SECRET_ACCESS_KEY }}
           export AWS_DEFAULT_REGION=${{ secrets.AWS_DEFAULT_REGION }}
 
-          aws cloudfront create-invalidation --distribution-id ${{ secrets.CLOUDFRONT_DISTRIBUTION_ID }} --paths '/*'
+          aws configure set preview.cloudfront true
+          aws s3 sync dist ${{ secrets.AWS_S3_BUCKET }} --delete
+          aws cloudfront create-invalidation --distribution-id ${{ secrets.CLOUDFRONT_DISTRIBUTION_ID }} --paths /\*

.github/workflows/fronttest.yaml

@@ -17,26 +17,27 @@ on:
 jobs:
   build:
     runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./client
 
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/cache@v2
+      - uses: actions/checkout@v4
+      - uses: actions/cache@v3
         with:
           path: "**/client/node_modules"
-          key: ${{ runner.os }}-modules-${{ hashFiles('**/client/yarn.lock') }}
-      - name: Use Node.js 14
-        uses: actions/setup-node@v2
+          key: ${{ runner.os }}-v2-${{ hashFiles('**/client/package-lock.json') }}
+
+      - name: Use Node.js
+        uses: actions/setup-node@v3
         with:
-          node-version: "14"
-      - name: Yarn Install
-        working-directory: ./client
-        run: yarn install
+          node-version: "21.x"
+
+      - name: Install dependencies
+        run: npm install
       - name: Check style
-        working-directory: ./client
-        run: yarn prettier
+        run: npx prettier --check .
       - name: Build
-        working-directory: ./client
-        run: yarn build
+        run: npm run build
       - name: Unit Tests
-        working-directory: ./client
-        run: yarn test
+        run: npm test

README.md

@@ -41,42 +41,10 @@ chmod +x scripts/generate_all_statistics.sh
 ./scripts/generate_all_statistics.sh
 ```
 
-## Deploy
-
-- Frontend
-
-GitHub actions will deploy after merging to main. Anyways, if you wanna do it manually, you can
-
-```
-cd client
-export PUBLIC_URL="https://statistics-api.worldcubeassociation.org"
-export REACT_APP_BASE_URL="https://statistics-api.worldcubeassociation.org"
-yarn build
-aws s3 cp build s3://{{STATISTICS_WEBSITE_BUCKET}} --recursive
-```
-
-- Backend
-
-GitHub actions will deploy after merging to main.
-
 ## Docker cron
 
 The file `scripts/cron-docker.sh` is used to make a fresh new download of the ropository and run the statistics over it. In the process or calculating statistics, the other `sh` files inside of `scripts` are used.
 
-### Deploy the cron image
-
-The cron script also runs in its own container. This helps when running this periodically like in a cron schedule, using AWS Batch
-
-- Build the image
-
-  `docker build -t thewca/statistics-cron .`
-
-- Deploy the image
-
-  `docker push thewca/statistics-cron`
-
-### Run the image locally
-
 You can also run this image locally. This image will download the export, update the database and calculate all the statistics.
 
 `docker run thewca/statistics-cron`

client/.env

@@ -1 +1,6 @@
-REACT_APP_BASE_URL=https://statistics-api.worldcubeassociation.org
+# VITE_API_URL=http://localhost:8080
+VITE_API_URL=https://statistics-api.worldcubeassociation.org
+VITE_APP_VERSION=local
+VITE_APP_DATE_VERSION=today
+VITE_APP_WCA_BASE_URL=https://www.worldcubeassociation.org
+VITE_APP_CLIENT_ID=OhWPipjYJcvFnp_1bMAWxBHyOaLm9Q1GP6C3OaPfHoY

client/.eslintrc.cjs

@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react-hooks/recommended",
+  ],
+  ignorePatterns: ["dist", ".eslintrc.cjs"],
+  parser: "@typescript-eslint/parser",
+  plugins: ["react-refresh"],
+  rules: {
+    "react-refresh/only-export-components": [
+      "warn",
+      { allowConstantExport: true },
+    ],
+  },
+};

client/.gitignore

@@ -1,23 +1,24 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# production
-/build
-
-# misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
+# Logs
+logs
+*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

client/.nvmrc

@@ -1 +1 @@
-v14.17.6
+v21.7.3

client/Dockerfile

@@ -1,19 +1,18 @@
-# pull official base image
-FROM node:14.16.0-alpine3.10
+FROM node:21-alpine as build
 
-# set working directory
 WORKDIR /app
 
-# add `/app/node_modules/.bin` to $PATH
-ENV PATH /app/node_modules/.bin:$PATH
+COPY package.json package-lock.json ./
+RUN npm install
 
-# install app dependencies
-COPY package.json ./
-COPY yarn.lock ./
-RUN yarn install
+COPY . .
 
-# add app
-COPY . ./
+RUN npm run build
 
-# start app
-CMD ["yarn", "start"]
+FROM nginx:stable-alpine
+
+COPY --from=build /app/dist /usr/share/nginx/html
+
+EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"]

client/README.md

@@ -5,9 +5,7 @@
 
 ## Requirements
 
-- [Node](https://nodejs.org/)
-
-- [Yarn](https://classic.yarnpkg.com/en/docs/install)
+- [NVM](https://github.com/nvm-sh/nvm) or [the correct node version](.nvmrc).
 
 ## How to run it
 
@@ -17,38 +15,24 @@ The commands listed here should work in Unix systems or in Windows (using GitBas
 
 `git clone https://github.com/thewca/statistics.git`
 
-- Navigate to the clients's folder
+- Navigate to the clients folder
 
 `cd statistics/client`
 
-- Install dependencies
-
-`yarn install`
-
-- Run the client
-
-`yarn start`
+- Select the correct node version (you can skip this step if your `node -v` results the same as [the expected one](.nvmrc))
 
-- Run local
+`nvm use`
 
-`yarn start:local`
+If that fails, maybe you will need to run `nvm install`
 
-## Run with docker
-
-- Build an image
-
-`docker build -t user/statistics-client .`
-
-- Run the image
-
-`docker run -d -p 3000:3000 --name statistics-client user/statistics-client:latest`
+- Install dependencies
 
-The `-d` part means "detached", so you'll have to stop by killing the process running on port 3000.
+`npm install`
 
-## Deploy
+- Run the client
 
-Deploy is made using GH Actions.
+`npm start`
 
 ## Checkstyle
 
-We use prettier for checking style. After code, you can run `yarn prettier_write` for auto formatting or `yarn prettier` for simple check.
+We use prettier for checking style. After code, you can run `npx prettier --check .` for simple check.

client/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/logo192.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>WCA Statistics</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>