Feature/vite (#206)

* Vite initial changes Signed-off-by: Courtney Gosselin <courtney@gosselin.io> * js/ts to jsx/tsx Signed-off-by: Courtney Gosselin <courtney@gosselin.io> * Fix imports for vite Signed-off-by: Courtney Gosselin <courtney@gosselin.io> * Port proxy bug Signed-off-by: Courtney Gosselin <courtney@gosselin.io> * Port proxy bug Signed-off-by: Courtney Gosselin <courtney@gosselin.io> * Changes to port Signed-off-by: Courtney Gosselin <courtney@gosselin.io> * Fixes to make it work on my machine * Import changes Signed-off-by: Courtney Gosselin <courtney@gosselin.io> * Final import changes Signed-off-by: Courtney Gosselin <courtney@gosselin.io> * Remove change Signed-off-by: Courtney Gosselin <courtney@gosselin.io> * package-lock.json changes Signed-off-by: Courtney Gosselin <courtney@gosselin.io> * prettier fixes Signed-off-by: Courtney Gosselin <courtney@gosselin.io> --------- Signed-off-by: Courtney Gosselin <courtney@gosselin.io> Co-authored-by: fnguyen <OrdinaryNeumann@gmail.com>
CanDIG · Feb 25, 2025 · f1abb60 · f1abb60
1 parent 58bcd61
commit f1abb60
Show file tree

Hide file tree

Showing 138 changed files with 5,813 additions and 15,475 deletions.
diff --git a/.env.docker b/.env.docker
@@ -1,10 +1,10 @@
-REACT_APP_KATSU_API_SERVER='${REACT_APP_KATSU_API_SERVER}'
-REACT_APP_FEDERATION_API_SERVER='${REACT_APP_FEDERATION_API_SERVER}'
-REACT_APP_BASE_NAME=${REACT_APP_BASE_NAME}
-REACT_APP_SITE_LOCATION = '${REACT_APP_SITE_LOCATION}'
-REACT_APP_HTSGET_SERVER ='${REACT_APP_HTSGET_SERVER}'
-REACT_APP_CANDIG_VERSION='${REACT_APP_CANDIG_VERSION}'
-REACT_APP_AGGREGATE_COUNT_THRESHOLD='${AGGREGATE_COUNT_THRESHOLD}'
+VITE_KATSU_API_SERVER='${VITE_KATSU_API_SERVER}'
+VITE_FEDERATION_API_SERVER='${VITE_FEDERATION_API_SERVER}'
+VITE_BASE_NAME=${VITE_BASE_NAME}
+VITE_SITE_LOCATION = '${VITE_SITE_LOCATION}'
+VITE_HTSGET_SERVER ='${VITE_HTSGET_SERVER}'
+VITE_CANDIG_VERSION='${VITE_CANDIG_VERSION}'
+VITE_AGGREGATE_COUNT_THRESHOLD='${AGGREGATE_COUNT_THRESHOLD}'
 DISABLE_ESLINT_PLUGIN='${DISABLE_ESLINT}'
 GENERATE_SOURCEMAP=false
-REACT_APP_SUPPORT_EMAIL='${REACT_APP_SUPPORT_EMAIL}'
+VITE_SUPPORT_EMAIL='${VITE_SUPPORT_EMAIL}'
diff --git a/.eslintrc b/.eslintrc
diff --git a/.gitignore b/.gitignore
@@ -10,6 +10,8 @@
 
 # production
 /build
+/dist
+/dist-ssr
 
 # misc
 .DS_Store
@@ -18,5 +20,16 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-/.idea/
-yarn.lock
+pnpm-debug.log*
+lerna-debug.log*
+*.local
+
+# editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/README.md b/README.md
@@ -24,9 +24,9 @@ npm install
 
 The file `.env.development` is where you specify API Servers and site-specific variables.
 
--   `REACT_APP_KATSU_API_SERVER`: Path to the Katsu API.
--   `REACT_APP_BASE_NAME`: The prepending path of your server. For example, if you would like your app to be available at `/v2/data-portal`, you should specify the aforementioned value here. By default, the app will be running at root.
--   `REACT_APP_SITE_LOCATION`: If you specify `BCGSC` or `UHN`, the app will display the logo of respective institution.
+-   `VITE_KATSU_API_SERVER`: Path to the Katsu API.
+-   `VITE_BASE_NAME`: The prepending path of your server. For example, if you would like your app to be available at `/v2/data-portal`, you should specify the aforementioned value here. By default, the app will be running at root.
+-   `VITE_SITE_LOCATION`: If you specify `BCGSC` or `UHN`, the app will display the logo of respective institution.
 -   `GENERATE_SOURCEMAP`: Removes map fodlers from build when set to false
 
 After this you can start the application by running **npm start**
@@ -55,7 +55,7 @@ To create a production build, use yarn build.
 
 You would need to specify the variables required in `.env.production`, see the section above on what values are required for which variables.
 
-One thing worth noting is that the `REACT_APP_BASE_NAME` variable only affects the routes of the app. The static assets are still served from root.
+One thing worth noting is that the `VITE_BASE_NAME` variable only affects the routes of the app. The static assets are still served from root.
 
 As an example, if you would like the app's static assets to be served at `/v2/data-portal`, you would need to specify this line at `package.json`.
 

diff --git a/entrypoint.sh b/entrypoint.sh
@@ -9,5 +9,6 @@ if [[ -f "initial_setup" ]]; then
     rm initial_setup
 fi
 
-npm start
+npx vite
+# npm start
 # npm run build
diff --git a/eslint.config.jsx b/eslint.config.jsx
@@ -0,0 +1,85 @@
+import js from '@eslint/js';
+import globals from 'globals';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import tseslint from 'typescript-eslint';
+
+export default tseslint.config(
+    { ignores: ['dist'] },
+    {
+        root: true,
+        env: {
+            browser: true,
+            es2021: true
+        },
+        extends: [
+            js.configs.recommended,
+            ...tseslint.configs.recommended,
+            'airbnb',
+            'prettier',
+            'plugin:jsx-a11y/recommended',
+            'plugin:react-hooks/recommended',
+            'plugin:react/recommended',
+            'plugin:react/jsx-runtime'
+        ],
+        settings: {
+            'import/resolver': {
+                node: {
+                    moduleDirectory: ['node_modules', 'src/']
+                }
+            }
+        },
+        parser: '@babel/eslint-parser',
+        parserOptions: {
+            ecmaFeatures: {
+                experimentalObjectRestSpread: true,
+                impliedStrict: true
+            },
+            ecmaVersion: 2020
+        },
+        plugins: {
+            prettier: {},
+            react: {},
+            'react-hooks': reactHooks,
+            'react-refresh': reactRefresh
+        },
+        rules: {
+            ...reactHooks.configs.recommended.rules,
+            'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
+            'react/jsx-filename-extension': 0,
+            'no-param-reassign': 0,
+            'react/prop-types': 1,
+            'react/require-default-props': 0,
+            'react/no-array-index-key': 0,
+            'react/jsx-props-no-spreading': 0,
+            'react/forbid-prop-types': 0,
+            'import/order': 0,
+            'no-console': 0,
+            'jsx-a11y/anchor-is-valid': 0,
+            'prefer-destructuring': 0,
+            'no-shadow': 0,
+            'no-unused-vars': [
+                1,
+                {
+                    argsIgnorePattern: '^_',
+                    varsIgnorePattern: '^_',
+                    caughtErrorsIgnorePattern: '^_',
+                    ignoreRestSiblings: false
+                }
+            ],
+            'prettier/prettier': [
+                2,
+                {
+                    bracketSpacing: true,
+                    printWidth: 140,
+                    singleQuote: true,
+                    trailingComma: 'none',
+                    tabWidth: 4,
+                    useTabs: false,
+                    endOfLine: 'auto',
+                    camelcase: 'off'
+                }
+            ]
+        }
+    }
+);
diff --git a/public/index.html → index.html b/public/index.html → index.html
@@ -2,23 +2,14 @@
 <html lang="en">
     <head>
         <title>CanDIG Data Portal</title>
-        <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+        <link rel="icon" href="/favicon.ico" />
         <!-- Meta Tags-->
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <meta name="theme-color" content="#2296f3" />
         <meta name="title" content="CanDIG Data Portal" />
         <meta name="description" content="A data analytics and visualization portal for CanDIG services." />
         <meta name="keywords" content="CanDIG" />
-        <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
 
         <link rel="preconnect" href="https://fonts.gstatic.com" />
         <link
@@ -30,15 +21,6 @@
     <body>
         <noscript>You need to enable JavaScript to run this app.</noscript>
         <div id="root"></div>
-        <!--
-          This HTML file is a template.
-          If you open it directly in the browser, you will see an empty page.
-
-          You can add webfonts, meta tags, or analytics to this file.
-          The build step will place the bundled scripts into the <body> tag.
-
-          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>