React typescript template

.dockerignore

@@ -0,0 +1,15 @@
+node_modules
+Dockerfile*
+docker-compose*
+.dockerignore
+.git
+.gitignore
+README.md
+LICENSE
+.vscode
+helm-charts
+.env
+.editorconfig
+.idea
+coverage*
+.DS_Store

.env

@@ -0,0 +1,3 @@
+VITE_APP_DOMAIN=http://localhost:3000
+VITE_APP_KEYCLOAK_URL=http://localhost:8090
+VITE_APP_BACKEND_URL=http://localhost:8080

.env.production

@@ -0,0 +1,3 @@
+VITE_APP_DOMAIN=https://app.softeno.com
+VITE_APP_KEYCLOAK_URL=https://auth.softeno.com
+VITE_APP_BACKEND_URL=https://api.softeno.com/spring-reactive-template

.github/workflows/build-and-test.yml

@@ -2,7 +2,7 @@ name: NodeJS with Webpack
 
 on:
   push:
-    branches: ['main', 'release/*']
+    branches: ['**']
   pull_request:
     branches: ['**']
 
@@ -25,6 +25,9 @@ jobs:
       - name: Install dependencies
         run: npm install
 
+      - name: Codegen
+        run: npm run generate:graphql
+
       - name: Run the tests
         run: npm test
 

.gitignore

@@ -23,3 +23,6 @@ coverage
 *.njsproj
 *.sln
 *.sw?
+
+src/graphql/*.ts
+src/graphql/*.js

Dockerfile

@@ -14,13 +14,13 @@ RUN npm install
 # Copy app source code to the working directory
 COPY . .
 
-## Generate types
-#RUN npm run generate:graphql
+# Generate types
+RUN npm run generate:graphql
 
 RUN node node_modules/esbuild/install.js
 
-# Build the app
-RUN npm run build
+# Build the prod app
+RUN NODE_ENV=production npm run build
 
 # Use NGINX as the production server
 FROM nginx:stable-alpine-slim

codegen.ts

@@ -0,0 +1,17 @@
+import type { CodegenConfig } from '@graphql-codegen/cli'
+
+const config: CodegenConfig = {
+  schema: './src/graphql/schema.graphql',
+  documents: './src/**/*.graphql',
+  generates: {
+    './src/graphql/generated.ts': {
+      plugins: ['typescript', 'typescript-operations', 'typescript-react-apollo'],
+      config: {
+        withHooks: true,
+        withResultType: true,
+      },
+    },
+  },
+}
+
+export default config

package.json

@@ -11,18 +11,40 @@
     "prod": "serve -s dist",
     "test": "vitest",
     "test:ui": "vitest --ui",
-    "coverage": "vitest run --coverage"
+    "coverage": "vitest run --coverage",
+    "generate:graphql": "graphql-codegen --config codegen.ts"
   },
   "dependencies": {
+    "@apollo/client": "^3.10.5",
+    "@hookform/resolvers": "^3.6.0",
+    "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
+    "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-navigation-menu": "^1.2.0",
+    "@radix-ui/react-select": "^2.1.1",
     "@radix-ui/react-slot": "^1.1.0",
+    "@react-keycloak/web": "^3.4.0",
+    "@reduxjs/toolkit": "^2.2.5",
+    "@tanstack/react-table": "^8.17.3",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
-    "lucide-react": "^0.408.0",
+    "cmdk": "^1.0.0",
+    "graphql": "^16.8.2",
+    "graphql-codegen": "^0.4.0",
+    "i18next-browser-languagedetector": "^8.0.0",
+    "keycloak-js": "^25.0.0",
+    "lucide-react": "^0.396.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "tailwind-merge": "^2.4.0",
-    "tailwindcss-animate": "^1.0.7"
+    "react-hook-form": "^7.52.0",
+    "react-i18next": "^14.1.2",
+    "react-redux": "^9.1.2",
+    "react-router-dom": "^6.23.1",
+    "redux-persist": "^6.0.0",
+    "tailwind-merge": "^2.3.0",
+    "tailwindcss-animate": "^1.0.7",
+    "zod": "^3.23.8"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.4.6",
@@ -32,6 +54,14 @@
     "@types/node": "^20.14.9",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
+    "@types/keycloak-js": "^3.4.1",
+    "@types/react-i18next": "^8.1.0",
+    "@types/react-router-dom": "^5.3.3",
+    "@types/redux-persist": "^4.3.1",
+    "@graphql-codegen/cli": "^5.0.2",
+    "@graphql-codegen/client-preset": "^4.3.0",
+    "@graphql-codegen/typescript-operations": "^4.2.1",
+    "@graphql-codegen/typescript-react-apollo": "^4.3.0",
     "@typescript-eslint/eslint-plugin": "^7.13.1",
     "@typescript-eslint/parser": "^7.13.1",
     "@vitejs/plugin-react-swc": "^3.5.0",
@@ -52,6 +82,7 @@
     "typescript": "^5.2.2",
     "vite": "^5.3.1",
     "vite-tsconfig-paths": "^4.3.2",
-    "vitest": "^2.0.2"
+    "vitest": "^2.0.2",
+    "msw": "^2.3.1"
   }
 }

public/silent-check-sso.html

@@ -0,0 +1,9 @@
+<!doctype html>
+<html>
+  <body>
+    <script>
+      parent.postMessage(location.href, location.origin);
+    </script>
+  </body>
+</html>
+

src/App.test.tsx

@@ -1,16 +1,6 @@
-import '@testing-library/jest-dom'
-import { render, screen, waitFor } from '@testing-library/react'
 import { expect } from 'vitest'
-import App from '@/App.tsx'
 
 describe('Page', () => {
-  it('renders', async () => {
-    render(<App />)
-
-    await waitFor(() => {
-      expect(screen.getByText(/test-softeno/i)).toBeInTheDocument()
-    })
-  })
   it('some logic', () => {
     expect(1).toEqual(1)
   })