Merge pull request #61 from HSLdevcom/DT-6515

DT-6515 Start using vite and fix subpath issue

Author: optionsome

.eslintrc.js

@@ -19,7 +19,7 @@ module.exports = {
     // react
     'react/button-has-type': 'warn',
     'react/destructuring-assignment': 'off',
-    'react/jsx-filename-extension': ['error', { extensions: ['.js'] }],
+    'react/jsx-filename-extension': ['error', { extensions: ['.js', '.jsx'] }],
     'react/jsx-fragments': 'off',
     'react/jsx-key': 'error',
     'react/jsx-props-no-spreading': 'off',
@@ -62,8 +62,12 @@ module.exports = {
   },
   env: {
     browser: true,
-    jest: true,
   },
+  overrides: [
+    {
+      files: ['*.jsx', '*.js'],
+    },
+  ],
   plugins: ['react', 'compat', 'prettier', 'jsx-a11y'],
   settings: {
     polyfills: ['fetch', 'promises'],

.github/workflows/dev-pipeline.yml

@@ -53,5 +53,5 @@ jobs:
         env:
           DOCKER_USER: ${{ secrets.DOCKER_USER }}
           DOCKER_AUTH: ${{ secrets.DOCKER_AUTH }}
-          REACT_APP_API_SUBSCRIPTION_KEY: ${{ secrets.REACT_APP_API_SUBSCRIPTION_KEY }}
-          REACT_APP_DEV_API_SUBSCRIPTION_KEY: ${{ secrets.REACT_APP_DEV_API_SUBSCRIPTION_KEY }}
+          VITE_API_SUBSCRIPTION_KEY: ${{ secrets.VITE_API_SUBSCRIPTION_KEY }}
+          VITE_DEV_API_SUBSCRIPTION_KEY: ${{ secrets.VITE_DEV_API_SUBSCRIPTION_KEY }}

.github/workflows/prod-pipeline.yml

@@ -23,5 +23,5 @@ jobs:
         env:
           DOCKER_USER: ${{ secrets.DOCKER_USER }}
           DOCKER_AUTH: ${{ secrets.DOCKER_AUTH }}
-          REACT_APP_API_SUBSCRIPTION_KEY: ${{ secrets.REACT_APP_API_SUBSCRIPTION_KEY }}
-          REACT_APP_DEV_API_SUBSCRIPTION_KEY: ${{ secrets.REACT_APP_DEV_API_SUBSCRIPTION_KEY }}
+          VITE_API_SUBSCRIPTION_KEY: ${{ secrets.VITE_API_SUBSCRIPTION_KEY }}
+          VITE_DEV_API_SUBSCRIPTION_KEY: ${{ secrets.VITE_DEV_API_SUBSCRIPTION_KEY }}

Dockerfile

@@ -8,12 +8,12 @@ COPY . .
 
 # None of these are secrets, the env parameter can be visible in public.
 # These are for more configurability (as opposed to having keys directly in code).
-ARG REACT_APP_DEV_API_SUBSCRIPTION_KEY=""
-ARG REACT_APP_API_SUBSCRIPTION_KEY=""
-ARG REACT_APP_API_SUBSCRIPTION_KEY_PARAM=""
-ENV REACT_APP_API_SUBSCRIPTION_KEY_PARAM=$REACT_APP_API_SUBSCRIPTION_KEY_PARAM
-ENV REACT_APP_DEV_API_SUBSCRIPTION_KEY=$REACT_APP_DEV_API_SUBSCRIPTION_KEY
-ENV REACT_APP_API_SUBSCRIPTION_KEY=$REACT_APP_API_SUBSCRIPTION_KEY
+ARG VITE_DEV_API_SUBSCRIPTION_KEY=""
+ARG VITE_API_SUBSCRIPTION_KEY=""
+ARG VITE_API_SUBSCRIPTION_KEY_PARAM=""
+ENV VITE_API_SUBSCRIPTION_KEY_PARAM=$VITE_API_SUBSCRIPTION_KEY_PARAM
+ENV VITE_DEV_API_SUBSCRIPTION_KEY=$VITE_DEV_API_SUBSCRIPTION_KEY
+ENV VITE_API_SUBSCRIPTION_KEY=$VITE_API_SUBSCRIPTION_KEY
 
 RUN yarn install
 RUN yarn build

README.md

@@ -5,19 +5,19 @@ Deployment for HSL version of [GraphiQL](https://github.com/graphql/graphiql). P
 ## Start server
 
 ```sh
-REACT_APP_DEV_API_SUBSCRIPTION_KEY=key REACT_APP_API_SUBSCRIPTION_KEY=key REACT_APP_API_SUBSCRIPTION_KEY_PARAM=digitransit-subscription-key yarn start
+VITE_DEV_API_SUBSCRIPTION_KEY=key VITE_API_SUBSCRIPTION_KEY=key VITE_API_SUBSCRIPTION_KEY_PARAM=digitransit-subscription-key yarn start
 ```
 
-Environment variables `REACT_APP_DEV_API_SUBSCRIPTION_KEY`, `REACT_APP_API_SUBSCRIPTION_KEY`, and `REACT_APP_API_SUBSCRIPTION_KEY_PARAM` are set in the GraphQL request query string for the authorization gateway service.
+Environment variables `VITE_DEV_API_SUBSCRIPTION_KEY`, `VITE_API_SUBSCRIPTION_KEY`, and `VITE_API_SUBSCRIPTION_KEY_PARAM` are set in the GraphQL request query string for the authorization gateway service.
 
 ## Docker
 
 ### Build
 ```sh
 docker build \
-    --build-arg REACT_APP_DEV_API_SUBSCRIPTION_KEY=key \
-    --build-arg REACT_APP_API_SUBSCRIPTION_KEY=key \
-    --build-arg REACT_APP_API_SUBSCRIPTION_KEY_PARAM=digitransit-subscription-key \
+    --build-arg VITE_DEV_API_SUBSCRIPTION_KEY=key \
+    --build-arg VITE_API_SUBSCRIPTION_KEY=key \
+    --build-arg VITE_API_SUBSCRIPTION_KEY_PARAM=digitransit-subscription-key \
     -t graphiql .
 ```
 

index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="/static/favicon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>GraphiQL deployment</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

nginx/nginx.conf

@@ -1,8 +1,10 @@
 server {
-    listen 8080;
-    location / {
-        root /usr/share/nginx/html;
-        index index.html index.htm;
-        try_files $uri $uri/ /index.html =404;
-    }
-}
+  listen 8080;
+  root /usr/share/nginx/html;
+  index index.html;
+
+  location /graphiql {
+    rewrite ^/graphiql(/.*) $1 break;
+    try_files $uri /index.html =404;
+  }
+}

package.json

@@ -12,17 +12,14 @@
     "graphql": "^16.9.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router-dom": "^6.28.0",
-    "react-scripts": "^5.0.1",
-    "web-vitals": "^2.1.0"
+    "react-router-dom": "^6.28.0"
   },
   "scripts": {
-    "start": "PORT=8080 react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test --watchAll=false --coverage",
-    "test:watch": "react-scripts test",
-    "eject": "react-scripts eject",
-    "lint": "eslint .",
+    "start": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "test": "vitest run",
+    "lint": "eslint src",
     "lint:fix": "eslint --fix ."
   },
   "eslintConfig": {
@@ -46,15 +43,24 @@
     "@babel/eslint-parser": "^7.25.9",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/preset-env": "^7.26.0",
+    "@babel/preset-react": "^7.25.9",
+    "@vitejs/plugin-react": "^4.3.3",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-relay": "^18.1.0",
     "eslint": "8.56.0",
     "eslint-config-airbnb": "19.0.4",
     "eslint-config-prettier": "9.1.0",
-    "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-compat": "^6.0.1",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^4.3.0",
     "graphql-ws": "^5.16.0",
-    "prettier": "^3.3.3"
+    "jsdom": "^25.0.1",
+    "prettier": "^3.3.3",
+    "vite": "^5.4.11",
+    "vite-tsconfig-paths": "^5.1.2",
+    "vitest": "^2.1.5"
   }
 }

public/index.html

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { BrowserRouter, Route, Routes, Navigate } from 'react-router-dom';
 
 import { API_VERSION_1, API_VERSION_2, DEFAULT_PATH } from './config';
@@ -8,16 +8,16 @@ import Version2ApiRoute from './graphiql/Version2ApiRoute';
 
 export default () => {
   return (
-    <BrowserRouter>
+    <BrowserRouter basename="/graphiql">
       <Routes>
         <Route path="*" element={<Navigate to={DEFAULT_PATH} />} />
-        <Route path="/graphiql/:router" element={<DefaultApiRoute />}>
+        <Route path="/:router" element={<DefaultApiRoute />}>
           <Route
-            path={`/graphiql/:router/${API_VERSION_1}`}
+            path={`/:router/${API_VERSION_1}`}
             element={<Version1ApiRoute />}
           />
           <Route
-            path={`/graphiql/:router/${API_VERSION_2}/:dialect/:dialectVersion`}
+            path={`/:router/${API_VERSION_2}/:dialect/:dialectVersion`}
             element={<Version2ApiRoute />}
           />
         </Route>

public/manifest.json

@@ -1,3 +1,4 @@
+import { describe, it, expect } from 'vitest';
 import {
   addSubscriptionKey,
   buildHeaders,

serve.json

@@ -2,7 +2,7 @@ export const API_VERSION_1 = 'v1';
 export const API_VERSION_2 = 'v2';
 export const DIALECT_VERSION_1 = 'v1';
 export const PRODUCTION_API_URL = 'api.digitransit.fi';
-export const DEFAULT_PATH = '/graphiql/hsl';
+export const DEFAULT_PATH = '/hsl';
 export const API_TYPE = Object.freeze({
   DEV: 'dev',
   PROD: 'prod',

src/App.js renamed to src/App.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import * as React from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import GraphiQL from 'graphiql';
 import { ToolbarMenu } from '@graphiql/react';
@@ -113,9 +113,11 @@ const useQuery = location => {
       )
     : {};
 
-  const [query, setQuery] = useState(initial.query);
-  const [variables, setVariables] = useState(initial.variables);
-  const [operationName, setOperationName] = useState(initial.operationName);
+  const [query, setQuery] = React.useState(initial.query);
+  const [variables, setVariables] = React.useState(initial.variables);
+  const [operationName, setOperationName] = React.useState(
+    initial.operationName,
+  );
 
   return {
     query,
@@ -145,14 +147,14 @@ const CustomGraphiQLWrapper = ({
     setOperationName,
   } = useQuery(location);
 
-  const [apiType, setApiType] = useState(
+  const [apiType, setApiType] = React.useState(
     location.state?.apiType ||
       (window.location.hostname === PRODUCTION_API_URL
         ? API_TYPE.PROD
         : API_TYPE.DEV),
   );
 
-  useEffect(() => {
+  React.useEffect(() => {
     const queryString = getQueryString(query, variables, operationName);
     navigate(queryString, { replace: true });
   }, [query, variables, operationName]);
@@ -206,9 +208,9 @@ export default ({ config, configList }) => {
     <CustomGraphiQLWrapper
       configList={configList}
       config={config}
-      prodSubscriptionKey={process.env.REACT_APP_API_SUBSCRIPTION_KEY}
-      devSubscriptionKey={process.env.REACT_APP_DEV_API_SUBSCRIPTION_KEY}
-      subscriptionKeyParam={process.env.REACT_APP_API_SUBSCRIPTION_KEY_PARAM}
+      prodSubscriptionKey={import.meta.env.VITE_API_SUBSCRIPTION_KEY}
+      devSubscriptionKey={import.meta.env.VITE_DEV_API_SUBSCRIPTION_KEY}
+      subscriptionKeyParam={import.meta.env.VITE_API_SUBSCRIPTION_KEY_PARAM}
     />
   );
 };

src/App.test.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { useParams, Navigate } from 'react-router-dom';
 import {
   API_VERSION_2,

src/api/graphQLFetcher.test.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { useParams, Navigate } from 'react-router-dom';
 import { API_VERSION_1, CONFIG_LIST, DEFAULT_PATH } from '../config';
 import { getApiConfig } from './utils';

src/config.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { useParams, Navigate } from 'react-router-dom';
 import { API_VERSION_2, CONFIG_LIST, DEFAULT_PATH } from '../config';
 import { getApiConfig } from './utils';