generator-kodly-react-app 1.0.0 → 1.0.2

package/generators/app/index.js

@@ -25,11 +25,11 @@ export default class ReactAppGenerator extends BaseGenerator {
       'postcss.config.js',
       'index.html',
       'types.d.ts',
-      '.gitignore',
       '.env.example',
       'README.md',
     ];
     configFiles.forEach((file) => this._writeFile(file));
+    this._writeFileWithPaths('gitignore.template', '.gitignore');
   }
 
   _writeSourceFiles() {

package/generators/app/templates/.env.example

@@ -1,2 +1,5 @@
-# API Base URL
+# API Configuration
 VITE_API_BASE_URL=http://localhost:8181
+
+# Server Configuration
+PORT=3000

package/generators/app/templates/README.md

@@ -23,7 +23,29 @@ npm run dev
 
 ## Environment Variables
 
-- `VITE_API_BASE_URL` - Base URL for your API backend
+- `VITE_API_BASE_URL` - Base URL for your API backend (default: `http://localhost:8181`)
+- `PORT` - Port for the development server (default: `3000`)
+
+### Setting Environment Variables
+
+You can set environment variables in several ways:
+
+**Option 1: Using a `.env` file (recommended)**
+```bash
+# Create .env file
+echo "VITE_API_BASE_URL=http://localhost:8080/api" > .env
+echo "PORT=3001" >> .env
+```
+
+**Option 2: Using environment variables when running commands**
+```bash
+VITE_API_BASE_URL=http://localhost:8080/api PORT=3001 npm run dev
+```
+
+**Option 3: Using cross-env (works on all platforms)**
+```bash
+cross-env VITE_API_BASE_URL=http://localhost:8080/api PORT=3001 npm run dev
+```
 
 ## Project Structure
 

package/generators/app/templates/gitignore.template

@@ -0,0 +1,10 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+dist-electron
+*.local
+.env
+.env.local
+.env.*.local
+

package/generators/app/templates/package.json

@@ -4,8 +4,8 @@
   "type": "module",
   "version": "0.0.1",
   "scripts": {
-    "dev": "vite --port 3000",
-    "start": "vite --port 3000",
+    "dev": "vite",
+    "start": "vite",
     "build": "vite build && tsc",
     "serve": "vite preview"
   },
@@ -24,6 +24,7 @@
     "react": "<%= REACT_VERSION %>",
     "react-dom": "<%= REACT_DOM_VERSION %>",
     "react-i18next": "<%= REACT_I18NEXT_VERSION %>",
+    "sonner": "^2.0.7",
     "tailwind-merge": "^3.4.0"
   },
   "devDependencies": {
@@ -39,4 +40,3 @@
     "vite": "<%= VITE_VERSION %>"
   }
 }
-

package/generators/app/templates/src/app.tsx

@@ -1,19 +1,15 @@
-import { RouterProvider } from "@tanstack/react-router";
-import { useAtomValue } from "jotai";
-import { Loader2 } from "lucide-react";
-import { useEffect } from "react";
-import "./index.css";
-import { AuthProvider } from "./modules/auth/auth-context";
-import {
-  authTokenAtom,
-  currentUserDetailsAtom,
-  useValidateToken,
-  setLocaleInAxios,
-} from "./modules/auth/use-auth-hook";
-import { router } from "./router";
-import { getLanguage } from "./lib/i18n";
+import { RouterProvider } from '@tanstack/react-router';
+import { useAtomValue } from 'jotai';
+import { Loader2 } from 'lucide-react';
+import { useEffect } from 'react';
+import { Toaster } from 'sonner';
+import './index.css';
+import { AuthProvider } from './modules/auth/auth-context';
+import { authTokenAtom, currentUserDetailsAtom, useValidateToken, setLocaleInAxios } from './modules/auth/use-auth-hook';
+import { router } from './router';
+import { getLanguage } from './lib/i18n';
 
-declare module "@tanstack/react-router" {
+declare module '@tanstack/react-router' {
   interface Register {
     router: typeof router;
   }
@@ -22,7 +18,12 @@ declare module "@tanstack/react-router" {
 function InnerApp() {
   const token = useAtomValue(authTokenAtom);
   const data = useAtomValue(currentUserDetailsAtom);
-  return <RouterProvider router={router} context={{ token, data }} />;
+  return (
+    <RouterProvider
+      router={router}
+      context={{ token, data }}
+    />
+  );
 }
 
 export default function App() {
@@ -30,7 +31,7 @@ export default function App() {
   const token = useAtomValue(authTokenAtom);
 
   useEffect(() => {
-    const currentLanguage = getLanguage() as "en";
+    const currentLanguage = getLanguage() as 'en';
     setLocaleInAxios(currentLanguage);
   }, []);
 
@@ -43,14 +44,14 @@ export default function App() {
   if (!token || (!isPending && (isError || isSuccess))) {
     return (
       <AuthProvider>
+        <Toaster position='top-right' />
         <InnerApp />
       </AuthProvider>
     );
   }
   return (
-    <div className="flex h-screen w-screen items-center justify-center">
-      <Loader2 className="h-6 w-6 animate-spin" />
+    <div className='flex h-screen w-screen items-center justify-center'>
+      <Loader2 className='h-6 w-6 animate-spin' />
     </div>
   );
 }
-

package/generators/app/templates/src/lib/api/client.ts

@@ -1,13 +1,25 @@
-import axios from "axios";
+import axios from 'axios';
+import { handleBackendError } from '../utils/error-handler';
 
-const apiBaseUrl = import.meta.env.VITE_API_BASE_URL || "http://localhost:8181";
+const apiBaseUrl = import.meta.env.VITE_API_BASE_URL || 'http://localhost:8181';
 
 export const client = axios.create({
   baseURL: apiBaseUrl,
   headers: {
-    "Content-Type": "application/json",
+    'Content-Type': 'application/json',
   },
 });
 
-export default client;
+// Add response interceptor to handle non-2xx responses
+client.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    // Only handle non-2xx responses
+    if (error.response && error.response.status >= 300) {
+      handleBackendError(error);
+    }
+    return Promise.reject(error);
+  }
+);
 
+export default client;

package/generators/app/templates/src/lib/utils/error-handler.ts

@@ -0,0 +1,62 @@
+import { toast } from 'sonner';
+import { AxiosError } from 'axios';
+
+interface BackendErrorResponse {
+  message?: string;
+  status?: boolean;
+  data?: any;
+}
+
+/**
+ * Handles backend errors and displays appropriate toast messages.
+ *
+ * Expected error response format:
+ * {
+ *   "message": "exception.login.failed",
+ *   "status": false,
+ *   "data": null
+ * }
+ *
+ * If the response doesn't match this format, it will show the error message
+ * from the exception instead.
+ */
+export const handleBackendError = (error: unknown): void => {
+  if (error instanceof Error && 'response' in error) {
+    const axiosError = error as AxiosError<BackendErrorResponse>;
+    const response = axiosError.response;
+
+    if (response) {
+      const errorData = response.data;
+
+      // Check if the response matches the expected format
+      if (errorData && typeof errorData === 'object' && 'message' in errorData && 'status' in errorData) {
+        // Use the message from the backend response
+        const errorMessage = errorData.message || 'An error occurred';
+        toast.error(errorMessage);
+        return;
+      }
+
+      // If the response doesn't match the expected format,
+      // try to extract a message from the response data
+      if (errorData && typeof errorData === 'object') {
+        const message = (errorData as any).message || (errorData as any).error || response.statusText || 'An error occurred';
+        toast.error(message);
+        return;
+      }
+    }
+
+    // Fallback to the error message from the exception
+    const errorMessage = axiosError.message || 'An error occurred';
+    toast.error(errorMessage);
+    return;
+  }
+
+  // If it's not an axios error, show a generic message
+  if (error instanceof Error) {
+    toast.error(error.message || 'An error occurred');
+    return;
+  }
+
+  // Final fallback
+  toast.error('An unexpected error occurred');
+};

package/generators/app/templates/src/locales/en.json

@@ -7,8 +7,12 @@
     "passwordPlaceholder": "Enter your password",
     "submit": "Sign In"
   },
+  "welcome": {
+    "title": "Welcome",
+    "message": "You have successfully logged in!",
+    "logout": "Logout"
+  },
   "notFound": {
     "message": "Page not found"
   }
 }
-

package/generators/app/templates/src/modules/auth/use-auth-hook.ts

@@ -1,32 +1,27 @@
-import { Route as LoginRoute } from "@/routes/auth/login";
-import { Route as AppRoute } from "@/routes/index";
-import { useMutation } from "@tanstack/react-query";
-import { useNavigate } from "@tanstack/react-router";
-import { atom, useAtomValue, useSetAtom } from "jotai";
-import { atomWithStorage } from "jotai/utils";
-import { client } from "@/lib/api/client";
+import { Route as LoginRoute } from '@/routes/auth/login';
+import { Route as AppRoute } from '@/routes/index';
+import { useMutation } from '@tanstack/react-query';
+import { useNavigate } from '@tanstack/react-router';
+import { atom, useAtomValue, useSetAtom } from 'jotai';
+import { atomWithStorage } from 'jotai/utils';
+import { client } from '@/lib/api/client';
 
-export const authTokenAtom = atomWithStorage<string>(
-  "authTokenAtom",
-  "",
-  undefined,
-  {
-    getOnInit: true,
-  }
-);
+export const authTokenAtom = atomWithStorage<string>('authTokenAtom', '', undefined, {
+  getOnInit: true,
+});
 
 export const currentUserDetailsAtom = atom<any>();
 
 export const setTokenInAxios = (token?: string | null) => {
   if (token) {
-    client.defaults.headers.common["x-auth-token"] = token;
+    client.defaults.headers.common['x-auth-token'] = token;
   } else {
-    delete client.defaults.headers.common["x-auth-token"];
+    delete client.defaults.headers.common['x-auth-token'];
   }
 };
 
-export const setLocaleInAxios = (locale: "en") => {
-  client.defaults.headers.common["Accept-Language"] = locale;
+export const setLocaleInAxios = (locale: 'en') => {
+  client.defaults.headers.common['Accept-Language'] = locale;
 };
 
 export const useLogin = () => {
@@ -35,18 +30,19 @@ export const useLogin = () => {
   const navigate = useNavigate();
   return useMutation({
     mutationFn: async (data: { email: string; password: string }) => {
-      const response = await client.post("/auth/login", data);
+      const response = await client.post('/auth/login', data);
       return response.data;
     },
     onSuccess: (authData) => {
-      const token = authData?.token || "";
+      const token = authData?.token || '';
       setAuthToken(token);
       setCurrentUser(authData);
       setTokenInAxios(token);
       navigate({ to: AppRoute.to });
     },
     onError: (err: any) => {
-      console.error("Login failed:", err);
+      // Error is already handled by axios interceptor
+      console.error('Login failed:', err);
     },
   });
 };
@@ -58,7 +54,7 @@ export const useValidateToken = () => {
   setTokenInAxios(authToken);
   return useMutation({
     mutationFn: async () => {
-      const response = await client.get("/auth/validate");
+      const response = await client.get('/auth/validate');
       return response.data;
     },
     retry: false,
@@ -67,7 +63,7 @@ export const useValidateToken = () => {
     },
     onError: () => {
       setCurrentUser(undefined);
-      setAuthToken("");
+      setAuthToken('');
       setTokenInAxios();
     },
   });
@@ -79,14 +75,13 @@ export const useLogout = () => {
   const navigate = useNavigate();
   return useMutation({
     mutationFn: async () => {
-      await client.post("/auth/logout");
+      await client.post('/auth/logout');
     },
     onSuccess: () => {
-      setAuthToken("");
+      setAuthToken('');
       setCurrentUser(undefined);
       setTokenInAxios();
       navigate({ to: LoginRoute.to });
     },
   });
 };
-

package/generators/app/templates/src/router.tsx

@@ -1,11 +1,11 @@
-import { createRouter } from "@tanstack/react-router";
-import { routeTree } from "./routeTree.gen";
+import { createRouter } from '@tanstack/react-router';
+import { routeTree } from './routeTree.gen';
 
 export const router = createRouter({
+  basepath: import.meta.env.VITE_BASE || '/',
   routeTree,
   context: {
     token: undefined!,
     data: undefined!,
   },
 });
-

package/generators/app/templates/src/routes/app/index.tsx

@@ -1,15 +1,36 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute } from '@tanstack/react-router';
+import { Button } from '@/components/ui/button';
+import { useLogout } from '@/modules/auth/use-auth-hook';
+import { useTranslation } from 'react-i18next';
 
-export const Route = createFileRoute("/app/")({
+export const Route = createFileRoute('/app/')({
   component: AppIndex,
 });
 
 function AppIndex() {
+  const { t } = useTranslation();
+  const { mutate: logout, isPending } = useLogout();
+
+  const handleLogout = () => {
+    logout();
+  };
+
   return (
-    <div className="container mx-auto p-8">
-      <h1 className="text-3xl font-bold mb-4">Welcome</h1>
-      <p className="text-muted-foreground">This is a protected route.</p>
+    <div className='container mx-auto p-8'>
+      <div className='flex flex-col gap-6'>
+        <div>
+          <h1 className='text-3xl font-bold mb-4'>{t('welcome.title')}</h1>
+          <p className='text-muted-foreground'>{t('welcome.message')}</p>
+        </div>
+        <div>
+          <Button
+            onClick={handleLogout}
+            disabled={isPending}
+            variant='outline'>
+            {t('welcome.logout')}
+          </Button>
+        </div>
+      </div>
     </div>
   );
 }
-

package/generators/app/templates/src/vite-env.d.ts

@@ -2,9 +2,9 @@
 
 interface ImportMetaEnv {
   readonly VITE_API_BASE_URL: string;
+  readonly VITE_BASE: string;
 }
 
 interface ImportMeta {
   readonly env: ImportMetaEnv;
 }
-

package/generators/app/templates/vite.config.js

@@ -1,13 +1,14 @@
-import { defineConfig } from "vite";
-import viteReact from "@vitejs/plugin-react";
-import { tanstackRouter } from "@tanstack/router-plugin/vite";
-import tailwindcss from "@tailwindcss/vite";
-import { resolve } from "node:path";
+import { defineConfig } from 'vite';
+import viteReact from '@vitejs/plugin-react';
+import { tanstackRouter } from '@tanstack/router-plugin/vite';
+import tailwindcss from '@tailwindcss/vite';
+import { resolve } from 'node:path';
 
 export default defineConfig({
+  base: process.env.VITE_BASE || '/',
   plugins: [
     tanstackRouter({
-      target: "react",
+      target: 'react',
       autoCodeSplitting: true,
       spa: {
         enabled: true,
@@ -18,8 +19,10 @@ export default defineConfig({
   ],
   resolve: {
     alias: {
-      "@": resolve(__dirname, "./src"),
+      '@': resolve(__dirname, './src'),
     },
   },
+  server: {
+    port: parseInt(process.env.PORT || '3000', 10),
+  },
 });
-

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "generator-kodly-react-app",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "A Yeoman generator for creating React.js applications with Vite, TanStack Router, authentication, and i18n",
   "main": "index.js",
   "type": "module",