catalystneuro · luiztauffer · Oct 10, 2023 · Oct 4, 2023 · Oct 4, 2023 · Oct 10, 2023
diff --git a/docker-compose-dev.yml b/docker-compose-dev.yml
@@ -7,8 +7,9 @@ services:
       dockerfile: Dockerfile
     image: si-sorting-frontend
     container_name: si-sorting-frontend
+    command: ["npm", "run", "start"]
     ports:
-      - "3000:3000"
+      - "5173:5173"
     environment:
       DEPLOY_MODE: compose
     volumes:

diff --git a/docker-compose.yml b/docker-compose.yml
@@ -4,8 +4,9 @@ services:
   frontend:
     image: ghcr.io/catalystneuro/si-sorting-frontend:latest
     container_name: si-sorting-frontend
+    command: ["npm", "run", "start"]
     ports:
-      - "3000:3000"
+      - "5173:5173"
     environment:
       DEPLOY_MODE: compose
     depends_on:
@@ -38,6 +39,7 @@ services:
       AWS_DEFAULT_REGION: ${AWS_DEFAULT_REGION}
       AWS_ACCESS_KEY_ID: ${AWS_ACCESS_KEY_ID}
       AWS_SECRET_ACCESS_KEY: ${AWS_SECRET_ACCESS_KEY}
+      DANDI_API_KEY: ${DANDI_API_KEY}
     volumes:
       - ./results:/results
       - ./logs:/logs

diff --git a/frontend/.eslintrc.cjs b/frontend/.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 },
+  //   ],
+  // },
+}
diff --git a/frontend/Dockerfile b/frontend/Dockerfile
@@ -3,12 +3,13 @@ FROM node:19.2-bullseye-slim
 
 WORKDIR /app
 
-COPY package*.json ./
-COPY yarn.lock ./
+COPY package.json yarn.lock ./
 RUN yarn install
 
 COPY . ./
+
 # RUN yarn build
-EXPOSE 3000
 
-CMD ["yarn", "start"]
+EXPOSE 5173
+
+CMD ["npm", "run", "start"]
diff --git a/frontend/index.html b/frontend/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>SpikeInterface Cloud</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./src/index.tsx"></script>
+  </body>
+</html>
diff --git a/frontend/package.json b/frontend/package.json
@@ -2,6 +2,18 @@
   "name": "sorterapp",
   "version": "0.1.0",
   "private": true,
+  "type": "module",
+  "scripts": {
+    "start": "npm run dev",
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview",
+    "react:start": "react-scripts start",
+    "react:build": "react-scripts build",
+    "react:test": "react-scripts test",
+    "react:eject": "react-scripts eject"
+  },
   "dependencies": {
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
@@ -16,22 +28,25 @@
     "@testing-library/user-event": "^13.2.1",
     "@types/jest": "^27.0.1",
     "@types/node": "^16.7.13",
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
     "axios": "^1.3.4",
     "markdown-to-jsx": "^7.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.9.0",
     "react-scripts": "5.0.1",
-    "typescript": "^4.4.2",
     "web-vitals": "^2.1.0"
   },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/parser": "^6.0.0",
+    "@vitejs/plugin-react-swc": "^3.3.2",
+    "eslint": "^8.45.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.3",
+    "typescript": "^4.4.2",
+    "vite": "^4.4.5"
   },
   "eslintConfig": {
     "extends": [
@@ -51,4 +66,4 @@
       "last 1 safari version"
     ]
   }
-}
+}
diff --git a/frontend/public/vite.svg b/frontend/public/vite.svg
diff --git a/frontend/src/common/config/environment.config.ts b/frontend/src/common/config/environment.config.ts
@@ -8,11 +8,14 @@ export interface IEnvironment {
     USE_MOCK: boolean
 }
 
+
+const global = (globalThis.process ?? import.meta)
+
 /**
  * Stores all environment variables for easier access
  */
 export const environment: IEnvironment = {
-    NODE_ENV: process.env.NODE_ENV as INodeEnv,
-    DEPLOY_MODE: process.env.DEPLOY_MODE as IApiEnv,
-    USE_MOCK: !!process.env.REACT_APP_USE_MOCK
+    NODE_ENV: global.env?.NODE_ENV as INodeEnv,
+    DEPLOY_MODE: global.env?.DEPLOY_MODE as IApiEnv,
+    USE_MOCK: !!global.env?.REACT_APP_USE_MOCK
 }
diff --git a/frontend/src/vite.config.ts b/frontend/src/vite.config.ts
@@ -0,0 +1,5 @@
+import vite from 'vite'
+
+export default vite.defineConfig({
+    base: './'
+})
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
@@ -1,26 +1,25 @@
 {
   "compilerOptions": {
-    "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
-    "allowJs": true,
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
     "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "noFallthroughCasesInSwitch": true,
-    "module": "esnext",
-    "moduleResolution": "node",
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
   },
-  "include": [
-    "src"
-  ]
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
 }
diff --git a/frontend/tsconfig.node.json b/frontend/tsconfig.node.json
@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/frontend/tsconfig.old.json b/frontend/tsconfig.old.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "src"
+  ]
+}
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
@@ -0,0 +1,15 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react-swc'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    watch: {
+      usePolling: true,
+    },
+    host: true, // needed for the Docker Container port mapping to work
+    strictPort: true,
+    port: 5173, // replace this port with any number you want
+  },
+})