NexioReactTemplate

A small React + TypeScript + Tailwind + shadcn template focused on a clear routing and layout pattern.

Routing and Layouts — Overview

This template separates route definitions from route-to-UI wiring and groups routes by layout. Routes are lazy-loaded and rendered via React Router using a small helper that maps logical route config into route objects.

Key files

• src/config/routes.tsx — central route definitions (path, lazy component import, optional layout, children).
• src/helpers/route.helper.tsx — converts route config into React Router route objects and wires layouts.
• src/config/layout.config.ts — maps layout names to layout components (lazy-loaded).
• src/config/app.config.ts — application-level defaults (including defaultLayout).
• src/layouts/* — layout components (each exposes an Outlet for nested routes).
• src/App.tsx — mounts React Router and uses the generated routes.

How Routing Works

1. Define routes in src/config/routes.tsx as an array of objects with these fields:

   • path: the route path (e.g. /, /about).
   • component: a function returning a lazy import: () => import('@/views/Home').
   • layout (optional): name of the layout to render this route with. If omitted, APP_CONFIG.defaultLayout is used.
   • children (optional): nested route configs.

2. createRoutes in src/helpers/route.helper.tsx groups routes by layout and returns React Router RouteObjects. Each layout becomes a parent route whose element is the layout component and whose children are the grouped routes.

3. Routes' element values are lazy-wrapped with React.lazy + Suspense (there's a LoadingFallback) so each view is code-split and loaded on demand.

4. src/App.tsx calls createRoutes(routeConfig) and renders them via useRoutes inside a BrowserRouter.

Example route entry

{
	path: '/properties',
	component: () => import('@/views/Properties'),
	layout: 'Default', // optional — if omitted, default from app.config is used
}

Layouts

• Layouts live under src/layouts/ and should export a default React component that renders an Outlet from react-router-dom.
• src/layouts/default/index.tsx (Default layout) composes Header, Footer, and an Outlet for page content.
• src/layouts/plain/index.tsx (Plain layout) is a minimal container that just renders an Outlet.
• The layout mapping lives in src/config/layout.config.ts where each layout is associated with a lazy import.

Adding a new layout

1. Create src/layouts/YourLayout/index.tsx and make sure it renders <Outlet /> where page content should appear.
2. Add an entry to src/config/layout.config.ts mapping your layout name (e.g. MyLayout) to a lazy import: MyLayout: lazy(() => import('@/layouts/mylayout')).
3. Use layout: 'MyLayout' on route entries that should use it.

Nested Routes

Nested children in a route config will be converted recursively by createRoutes so you can define nested URL structures and nested layouts as needed. Example:

{
	path: '/account',
	component: () => import('@/views/Account'),
	children: [
		{ path: 'settings', component: () => import('@/views/AccountSettings') },
	],
}

Quick Steps: Add a new page

1. Add a view file under src/views/YourPage.tsx.
2. Add a route to src/config/routes.tsx with a lazy component import and optional layout.
3. If using a new layout, register it in src/config/layout.config.ts.

Where to look in the code

• Routes: src/config/routes.tsx
• Route helper: src/helpers/route.helper.tsx
• Layout mapping: src/config/layout.config.ts
• Default config: src/config/app.config.ts
• Layouts: src/layouts/

If you'd like, I can also add a short example page and a sample custom layout to the template — want me to add those now?

App configuration (APP_CONFIG)

The main application configuration lives in src/config/app.config.ts as the APP_CONFIG constant. This file centralizes defaults and environment-driven values used across the app.

Key uses and fields:

• defaultLayout: the layout name used when a route doesn't explicitly set layout. The routing helper uses this to group routes.
• landingPage: the default landing route (e.g. /).
• defaultAuthenticatedRoute: where authenticated users are redirected by default (e.g. /properties).
• baseUrl: API base URL; often sourced from import.meta.env.VITE_API_BASE_URL.
• timeout, apiKey, and analytics fields: useful for centralizing API/timeouts and third-party integrations.

Example: import and use APP_CONFIG in a component or util

import { APP_CONFIG } from '@/config/app.config'

console.log('API base:', APP_CONFIG.baseUrl)

// use default layout name
const defaultLayout = APP_CONFIG.defaultLayout

Environment variables

• Prefix environment variables with VITE_ in Vite (e.g. VITE_API_BASE_URL) and reference them in app.config.ts as shown in the template.

Customizing defaults

• To change the default layout for the app, set defaultLayout to the layout key you added to src/config/layout.config.ts.
• To change API endpoints or keys per-environment, define VITE_API_BASE_URL and other VITE_* vars in your .env files.

Where it matters

• Routing falls back to APP_CONFIG.defaultLayout when a route has no explicit layout.
• Any global helpers, services, or components can import APP_CONFIG to read app-level settings.