Use vitejs for bundling

.circleci/config.yml

@@ -1,7 +1,6 @@
 version: 2.1
 orbs:
   node: circleci/node@1.1.6
-  cypress: cypress-io/cypress@1.25.0
 
 jobs:
   lint-and-build:
@@ -9,66 +8,55 @@ jobs:
       name: node/default
     environment:
       NETLIFY_SITE_ID: airboardgame.netlify.app
-      REACT_APP_SOCKET_URL: https://ricochetjs.herokuapp.com/
-      #REACT_APP_SOCKET_PATH: /wamp2/socket.io
-      #REACT_APP_GAMELIST_URL: https://airgames.netlify.app/gameList.json
-      REACT_APP_API_ENDPOINT: /api
-      REACT_APP_USE_PROXY: 0
+      VITE_SOCKET_URL: https://ricochetjs.herokuapp.com/
+      VITE_API_ENDPOINT: /api
+      VITE_USE_PROXY: 0
       CYPRESS_INSTALL_BINARY: 0
     steps:
       - checkout
       - node/with-cache:
           steps:
             - run: node --version
-            - run: npm install
+            - run: npm ci
             - run: npm run lint
-            - run: cd backend && npm install && npm run build
+            - run: cd backend && npm ci && npm run build
             - run: npm run build
             - run: |
-                cat \<<EOF > ./build/_redirects
+                cat \<<EOF > ./dist/_redirects
                 /api/*  https://ricochetjs.herokuapp.com/:splat  200
                 /*    /index.html   200
                 EOF
             - run:
                 name: Netlify Deploy
-                command: npx netlify deploy --dir=./build --site $NETLIFY_SITE_ID --auth $NETLIFY_ACCESS_TOKEN
+                command: npx netlify deploy --dir=./dist --site $NETLIFY_SITE_ID --auth $NETLIFY_ACCESS_TOKEN
 
   build-deploy:
     executor:
       name: node/default
     environment:
       NETLIFY_SITE_ID: airboardgame.netlify.app
-      REACT_APP_SOCKET_URL: https://ricochetjs.herokuapp.com/
-      #REACT_APP_SOCKET_PATH: /wamp2/socket.io
-      #REACT_APP_GAMELIST_URL: https://airgames.netlify.app/gameList.json
-      REACT_APP_USE_PROXY: 0
-      REACT_APP_API_ENDPOINT: /api
+      VITE_SOCKET_URL: https://ricochetjs.herokuapp.com/
+      VITE_USE_PROXY: 0
+      VITE_API_ENDPOINT: /api
       CYPRESS_INSTALL_BINARY: 0
     steps:
       - checkout
       - node/with-cache:
           steps:
-            - run: npm install
+            - run: npm ci
             - run: npm run lint
-            - run: cd backend && npm install && npm run build
+            - run: cd backend && npm ci && npm run build
             - run: npm run build
             - run: |
-                cat \<<EOF > ./build/_redirects
+                cat \<<EOF > ./dist/_redirects
                 /api/*  https://ricochetjs.herokuapp.com/:splat  200
                 /*    /index.html   200
                 EOF
             - run:
                 name: Netlify Deploy
-                command: npx netlify deploy --site $NETLIFY_SITE_ID --auth $NETLIFY_ACCESS_TOKEN --dir=build --prod
+                command: npx netlify deploy --site $NETLIFY_SITE_ID --auth $NETLIFY_ACCESS_TOKEN --dir=dist --prod
 
 workflows:
-  e2etest:
-    jobs:
-      - cypress/run:
-          start: REACT_APP_NO_WELCOME=1 REACT_APP_SOCKET_URL=https://ricochetjs.herokuapp.com/ REACT_APP_API_ENDPOINT=https://ricochetjs.herokuapp.com/ CI=true npm start
-          wait-on: "http-get://localhost:3000"
-          no-workspace: true
-          store_artifacts: true
   build-and-test:
     jobs:
       - lint-and-build:

.env.dist

@@ -1,14 +1,14 @@
 ##### Front ####
 
 # API URL
-REACT_APP_API_ENDPOINT=http://localhost:3001
+VITE_API_ENDPOINT=http://localhost:3001
 
 # Socket configuration
-REACT_APP_SOCKET_URL=http://localhost:3001
-REACT_APP_SOCKET_PATH=/socket.io
+VITE_SOCKET_URL=http://localhost:3001
+VITE_SOCKET_PATH=/socket.io
 
 # Set to 1 to remove Welcome dialog
-REACT_APP_NO_WELCOME=0
+VITE_NO_WELCOME=0
 
 # Proxify backend
-REACT_APP_USE_PROXY=1
+VITE_USE_PROXY=1

.eslintrc

@@ -1,41 +0,0 @@
-{
-  "root": true,
-  "parserOptions": {
-    "ecmaVersion": 6,
-    "sourceType": "module",
-    "ecmaFeatures": {
-      "jsx": true
-    }
-  },
-  "env": {
-    "browser": true,
-    "node": true,
-    "es6": true,
-    "jest": true
-  },
-  "settings": {
-    "react": {
-      "version": "detect"
-    }
-  },
-  "parser": "babel-eslint",
-  "rules": {
-    "semi": "error",
-    "react-hooks/exhaustive-deps": [
-      "warn", {
-        "additionalHooks": "useRecoilCallback"
-      }
-    ],
-    "react/prop-types": "off",
-    "jsx-a11y/anchor-is-valid": "off",
-    "no-unused-vars": "warn"
-  },
-  "plugins": ["react-hooks"],
-  "extends": [
-    "eslint:recommended",
-    "plugin:react-hooks/recommended",
-    "plugin:prettier/recommended",
-    "plugin:react-hooks/recommended",
-    "plugin:react/recommended"
-  ]
-}

.eslintrc.js

@@ -0,0 +1,35 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+    jest: true,
+    node: true,
+  },
+  extends: [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:prettier/recommended",
+  ],
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 12,
+    sourceType: "module",
+  },
+  plugins: ["react", "react-hooks"],
+  rules: {
+    indent: ["error", 2],
+    "linebreak-style": ["error", "unix"],
+    quotes: ["error", "double"],
+    semi: ["error", "always"],
+    "react/prop-types": "off",
+    "react-hooks/exhaustive-deps": [
+      "warn",
+      {
+        additionalHooks: "useRecoilCallback",
+      },
+    ],
+  },
+};

.github/workflows/main.yml

@@ -0,0 +1,38 @@
+name: End-to-end tests
+on:
+  push:
+    branches: [ master ]
+  pull_request:
+    branches: [ master ]
+jobs:
+  cypress-run:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - name: Cypress run
+        uses: cypress-io/github-action@v2
+        with:
+          build: npm run build
+          start: npm run serve
+          wait-on: http://localhost:5000
+          config: baseUrl=http://localhost:5000
+          browser: chrome
+        env:
+          VITE_NO_WELCOME: 1
+          VITE_CI: 1
+          VITE_SOCKET_URL: https://ricochetjs.herokuapp.com/
+          VITE_API_ENDPOINT: https://ricochetjs.herokuapp.com/
+          ACTIONS_ALLOW_UNSECURE_COMMANDS: true
+      - uses: actions/upload-artifact@v1
+        if: failure()
+        with:
+          name: cypress-screenshots
+          path: cypress/screenshots
+      # Test run video was always captured, so this action uses "always()" condition
+      - uses: actions/upload-artifact@v1
+        if: always()
+        with:
+          name: cypress-videos
+          path: cypress/videos

cypress/integration/item.spec.js

@@ -17,25 +17,27 @@ describe("Item interactions", () => {
   });
 
   it("should move item", () => {
-    cy.get("img[src='/games/JC.jpg']")
+    cy.get("img[src='/game_assets/JC.jpg']")
       .parents(".item")
       .parent()
       .should("have.css", "transform", "matrix(1, 0, 0, 1, 420, 400)");
 
     // Select card
-    cy.get("img[src='/games/JC.jpg']")
+    cy.get("img[src='/game_assets/JC.jpg']")
       .parents(".item")
       .click(500, 500, { force: true });
 
-    cy.get("img[src='/games/JC.jpg']").parents(".item").trigger("pointerdown", {
-      button: 0,
-      clientX: 430,
-      clientY: 430,
-      force: true,
-      pointerId: 1,
-    });
+    cy.get("img[src='/game_assets/JC.jpg']")
+      .parents(".item")
+      .trigger("pointerdown", {
+        button: 0,
+        clientX: 430,
+        clientY: 430,
+        force: true,
+        pointerId: 1,
+      });
 
-    cy.get("img[src='/games/JC.jpg']")
+    cy.get("img[src='/game_assets/JC.jpg']")
       .parents(".item")
       .trigger("pointermove", {
         button: 0,
@@ -48,7 +50,7 @@ describe("Item interactions", () => {
         force: true,
         pointerId: 1,
       });
-    cy.get("img[src='/games/JC.jpg']")
+    cy.get("img[src='/game_assets/JC.jpg']")
       .parents(".item")
       .parent()
       .should("have.css", "transform", "matrix(1, 0, 0, 1, 520, 500.5)");
@@ -56,40 +58,40 @@ describe("Item interactions", () => {
 
   it("should flip item", () => {
     // Check before
-    cy.get("img[src='/games/JC.jpg']")
-      .siblings("img[src='/games/Red_back.jpg']")
+    cy.get("img[src='/game_assets/JC.jpg']")
+      .siblings("img[src='/game_assets/Red_back.jpg']")
       .should("have.css", "opacity", "0");
-    cy.get("img[src='/games/JC.jpg']").should("have.css", "opacity", "1");
+    cy.get("img[src='/game_assets/JC.jpg']").should("have.css", "opacity", "1");
 
     // Select card
-    cy.get("img[src='/games/JC.jpg']")
+    cy.get("img[src='/game_assets/JC.jpg']")
       .parents(".item")
       .click(500, 500, { force: true });
 
     cy.get('[title = "Reveal/Hide"]').click({ force: true });
 
     // Check after
-    cy.get("img[src='/games/JC.jpg']").should("have.css", "opacity", "0");
-    cy.get("img[src='/games/JC.jpg']")
-      .siblings("img[src='/games/Red_back.jpg']")
+    cy.get("img[src='/game_assets/JC.jpg']").should("have.css", "opacity", "0");
+    cy.get("img[src='/game_assets/JC.jpg']")
+      .siblings("img[src='/game_assets/Red_back.jpg']")
       .should("have.css", "opacity", "1");
   });
 
   it("should tap item", () => {
     // Check before
-    cy.get("img[src='/games/JC.jpg']")
+    cy.get("img[src='/game_assets/JC.jpg']")
       .parents(".item")
       .should("have.css", "transform", "matrix(1, 0, 0, 1, 0, 0)");
 
     // Select card
-    cy.get("img[src='/games/JC.jpg']")
+    cy.get("img[src='/game_assets/JC.jpg']")
       .parents(".item")
       .click(500, 500, { force: true });
 
     cy.get('[title = "Tap/Untap"]').click({ force: true });
 
     // Check after
-    cy.get("img[src='/games/JC.jpg']")
+    cy.get("img[src='/game_assets/JC.jpg']")
       .parents(".item")
       .should(
         "have.css",

cypress/integration/selection.spec.js

@@ -59,13 +59,13 @@ describe("Selection action", () => {
       force: true,
     });
 
-    cy.get("img[src='/games/AS.jpg']")
+    cy.get("img[src='/game_assets/AS.jpg']")
       .parents(".item")
       .should("have.class", "selected");
-    cy.get("img[src='/games/JC.jpg']")
+    cy.get("img[src='/game_assets/JC.jpg']")
       .parents(".item")
       .should("have.class", "selected");
-    cy.get("img[src='/games/BH.jpg']")
+    cy.get("img[src='/game_assets/BH.jpg']")
       .parents(".item")
       .should("have.class", "selected");
   });

public/index.html → index.html

@@ -2,21 +2,21 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="/src/favicon.ico" />
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1, user-scalable=no"
     />
     <meta name="theme-color" content="#202b38" />
     <meta name="description" content="Play board game online" />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="apple-touch-icon" href="/src/logo192.png" />
     <link rel="stylesheet" href="https://unpkg.com/chota@latest">
     
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="manifest" href="/src/manifest.json" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -41,5 +41,6 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
+    <script type="module" src="/src/index.jsx"></script>
   </body>
 </html>

package.json

@@ -26,7 +26,7 @@
     "react": "^17.0.1",
     "react-color": "^2.18.1",
     "react-confirm-alert": "^2.6.1",
-    "react-cookie-consent": "^5.2.0",
+    "react-cookie-consent": "^6.2.3",
     "react-dom": "^17.0.1",
     "react-draggable": "^4.4.2",
     "react-dropzone": "^11.0.1",
@@ -34,7 +34,6 @@
     "react-i18next": "^11.7.0",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "^4.0.0",
     "react-toastify": "^6.1.0",
     "react-use-localstorage": "^3.4.1",
     "react-zoom-pan-pinch": "^1.6.1",
@@ -43,20 +42,16 @@
     "styled-components": "^5.1.1"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
+    "dev": "vite",
+    "start": "npm run dev -- --open",
+    "build": "vite build",
+    "serve": "vite preview --open",
     "lint": "eslint src/",
     "prettier": "prettier --write src/",
-    "eject": "react-scripts eject",
     "server": "echo 'This command is deprecated. Please, see Readme for more information.'",
     "i18n:scanner": "i18next-scanner --config i18next-scanner.config.js 'src/**/*.{js,jsx}'",
     "cypress:open": "LANGUAGE=en cypress open",
-    "cypress:run": "LANGUAGE=en cypress run",
-    "e2e": "npm start && wait-on http://localhost:3000 && LANGUAGE=en cypress run"
-  },
-  "eslintConfig": {
-    "extends": "react-app"
+    "cypress:run": "LANGUAGE=en cypress run"
   },
   "browserslist": {
     "production": [
@@ -78,15 +73,20 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
+    "@vitejs/plugin-react-refresh": "^1.3.1",
     "cypress": "^4.9.0",
+    "dotenv": "^8.2.0",
+    "eslint": "^7.21.0",
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-react": "^7.20.0",
+    "eslint-plugin-react": "^7.22.0",
     "eslint-plugin-react-hooks": "^4.0.4",
     "http-proxy-middleware": "^1.0.6",
     "i18next-scanner": "^2.11.0",
     "netlify-cli": "^3.7.1",
     "prettier": "2.0.5",
+    "rollup-plugin-analyzer": "^4.0.0",
+    "vite": "^2.0.5",
     "wait-on": "^5.2.1"
   }
 }

src/games/perfGame.js

@@ -40,7 +40,7 @@ const genGame = () => {
       materialLanguage: "Multi-lang",
       minAge: "10",
       duration: [30, 90],
-      imageUrl: "/games/testgame.png",
+      imageUrl: "/game_assets/testgame.png",
       gridSize: 1,
     },
   };

src/games/testGame.js

@@ -3,8 +3,8 @@ const genGame = () => {
 
   items.push({
     type: "image",
-    content: "/games/AS.jpg",
-    backContent: "/games/Red_back.jpg",
+    content: "/game_assets/AS.jpg",
+    backContent: "/game_assets/Red_back.jpg",
     text: "frontLabel",
     width: 100,
     x: 400,
@@ -25,8 +25,8 @@ const genGame = () => {
 
   items.push({
     type: "image",
-    content: "/games/BH.jpg",
-    backContent: "/games/Red_back.jpg",
+    content: "/game_assets/BH.jpg",
+    backContent: "/game_assets/Red_back.jpg",
     text: "frontLabel",
     backText: "backLabel",
     width: 100,
@@ -36,9 +36,9 @@ const genGame = () => {
 
   items.push({
     type: "image",
-    content: "/games/JC.jpg",
-    backContent: "/games/Red_back.jpg",
-    overlay: { content: "/games/overlay.png" },
+    content: "/game_assets/JC.jpg",
+    backContent: "/game_assets/Red_back.jpg",
+    overlay: { content: "/game_assets/overlay.png" },
     width: 100,
     x: 420,
     y: 400,
@@ -220,7 +220,7 @@ const genGame = () => {
       materialLanguage: "Multi-lang",
       minAge: "10",
       duration: [30, 90],
-      imageUrl: "/games/testgame.png",
+      imageUrl: "/game_assets/testgame.png",
       gridSize: 1,
     },
   };

src/setupProxy.js → src/setupProxy.jsx

@@ -2,14 +2,14 @@ const { createProxyMiddleware } = require("http-proxy-middleware");
 const spawnSync = require("child_process").spawnSync;
 
 module.exports = (app) => {
-  const apiEndpoint = process.env.REACT_APP_API_ENDPOINT;
-  const useProxy = process.env.REACT_APP_USE_PROXY !== "0";
+  const apiEndpoint = process.env.VITE_API_ENDPOINT;
+  const useProxy = process.env.VITE_USE_PROXY !== "0";
 
   if (useProxy) {
     if (apiEndpoint === undefined) {
       // eslint-disable-next-line no-console
       console.error(
-        "You must set your REACT_APP_API_HOST in your .env file or disable proxy"
+        "You must set your VITE_API_HOST in your .env file or disable proxy"
       );
       // Sleep to have time to read the messages.
       spawnSync("sleep", [1.5]);