# Dashboard as First Page

{% tabs %}
{% tab title="VITE(TS)" %}
This section explains how to set the Dashboard page as the default starting page, skipping the landing page, for cases where it is not needed.

1. Update route at:-  **src/routes/index.tsx**

{% code title="src/routes/index.tsx" %}

```typescript
// import { lazy } from 'react';
import { createBrowserRouter } from 'react-router-dom';

// project import
import MainRoutes from './MainRoutes';
// import LoginRoutes from './LoginRoutes';
import ComponentsRoutes from './ComponentsRoutes';

// import { SimpleLayoutType } from 'config';
// import SimpleLayout from 'layout/Simple';
// import Loadable from 'components/Loadable';

// render - landing page
// const PagesLanding = Loadable(lazy(() => import('pages/landing')));

// ==============================|| ROUTING RENDER ||============================== //

const router = createBrowserRouter(
  [
    // {
    //   path: '/',
    //   element: <SimpleLayout layout={SimpleLayoutType.LANDING} />,
    //   children: [
    //     {
    //       index: true,
    //       element: <PagesLanding />
    //     }
    //   ]
    // },
    // LoginRoutes,
    MainRoutes,
    ComponentsRoutes
  ],
  { basename: import.meta.env.VITE_APP_BASE_NAME }
);

export default router;
```

{% endcode %}

2. Add default dashboard route: **src\routes\MainRoutes.tsx**

{% code title="src/routes/MainRoutes.tsx" %}

```typescript
....

const MainRoutes = {
  path: '/',
  children: [
    {
      path: '/',
      element: <DashboardLayout />,
      children: [
        {
          path: '/',
          element: <DashboardDefault />
        },
        {
          path: 'dashboard',
          children: [
            {
              path: 'default',
              element: <DashboardDefault />
            },
            ....
          ]
        }
        ...
      ]
  };
```

{% endcode %}

3. Comment out the `AuthGuard` wrapper for the routes within the `DashboardLayout` element:

{% code title="src/layout/Dashboard/index.tsx" %}

```typescript
// import AuthGuard from 'utils/route-guard/AuthGuard';

...
...
return (
  // <AuthGuard>
 <Box sx={{ display: 'flex', width: '100%' }}>
    <Header />
    ...
  </Box>
  // </AuthGuard>
)
```

{% endcode %}

{% hint style="warning" %}
Disabling authentication within the system would render certain applications non-functional, particularly those reliant on backend APIs. These applications require a valid token to access and load data seamlessly.
{% endhint %}
{% endtab %}

{% tab title="VITE(JS)" %}
This section explains how to set the Dashboard page as the default starting page, skipping the landing page, for cases where it is not needed.

1. Update route at:-  **src/routes/index.jsx**

{% code title=" src/routes/index.jsx" %}

```javascript
// import { lazy } from 'react';
import { createBrowserRouter } from 'react-router-dom';

// project import
import MainRoutes from './MainRoutes';
// import LoginRoutes from './LoginRoutes';
import ComponentsRoutes from './ComponentsRoutes';

// import { SimpleLayoutType } from 'config';
// import SimpleLayout from 'layout/Simple';
// import Loadable from 'components/Loadable';

// render - landing page
// const PagesLanding = Loadable(lazy(() => import('pages/landing')));

// ==============================|| ROUTING RENDER ||============================== //

const router = createBrowserRouter(
  [
    //   {
    //     path: '/',
    //     element: <SimpleLayout layout={SimpleLayoutType.LANDING} />,
    //     children: [
    //       {
    //         index: true,
    //         element: <PagesLanding />
    //       }
    //     ]
    //   },
    //   LoginRoutes,
    MainRoutes,
    ComponentsRoutes
  ],
  { basename: import.meta.env.VITE_APP_BASE_NAME }
);

export default router;
```

{% endcode %}

2. Add default dashboard route: **src\routes\MainRoutes.jsx**

{% code title="src\routes\MainRoutes.jsx" %}

```javascript
....

const MainRoutes = {
  path: '/',
  children: [
    {
      path: '/',
      element: <DashboardLayout />,
      children: [
        {
          path: '/',
          element: <DashboardDefault />
        },
        {
          path: 'dashboard',
          children: [
            {
              path: 'default',
              element: <DashboardDefault />
            },
            ....
          ]
        }
        ...
      ]
  };
```

{% endcode %}

3. Comment out the `AuthGuard` wrapper for the routes within the `DashboardLayout` element:

{% code title="src/layout/Dashboard/index.jsx" %}

```javascript
// import AuthGuard from 'utils/route-guard/AuthGuard';

...
...
return (
  // <AuthGuard>
 <Box sx={{ display: 'flex', width: '100%' }}>
    <Header />
    ...
  </Box>
  // </AuthGuard>
)
```

{% endcode %}

{% hint style="warning" %}
Disabling authentication within the system would render certain applications non-functional, particularly those reliant on backend APIs. These applications require a valid token to access and load data seamlessly.
{% endhint %}
{% endtab %}

{% tab title="NEXT(TS)" %}
This section explains how to set the Dashboard page as the default starting page, skipping the landing page, for cases where it is not needed.

1. Update route at:- src/app/page.tsx

{% code title="src/app/page.tsx" %}

```typescript
// project imports
// import SimpleLayout from 'layout/SimpleLayout';
// import Landing from 'views/landing';
import DashboardLayout from 'layout/DashboardLayout';

export default function HomePage({ children }: { children: React.ReactNode }) {
  return (
    // <SimpleLayout>
    //   <Landing />
    // </SimpleLayout>
    // <AuthGuard>

    <DashboardLayout>{children}</DashboardLayout>
  );
}

```

{% endcode %}

2. Comment out the `AuthGuard` wrapper for the routes within the `DashboardLayout` element:

{% code title="src/layout/DashboardLayout/index.tsx" %}

```typescript
// import AuthGuard from 'utils/route-guard/AuthGuard';

...
...
return (
  // <AuthGuard>
 <Box sx={{ display: 'flex', width: '100%' }}>
    <Header />
    ...
  </Box>
  // </AuthGuard>
)
```

{% endcode %}

{% hint style="warning" %}
Disabling authentication within the system would render certain applications non-functional, particularly those reliant on backend APIs. These applications require a valid token to access and load data seamlessly.
{% endhint %}
{% endtab %}

{% tab title="NEXT(JS)" %}
This section explains how to set the Dashboard page as the default starting page, skipping the landing page, for cases where it is not needed.

1. Update route at:- src/app/page.jsx

{% code title="src/app/page.jsx" %}

```typescript
// project imports
// import SimpleLayout from 'layout/SimpleLayout';
// import Landing from 'views/landing';
import DashboardLayout from 'layout/DashboardLayout';

export default function HomePage({ children } {
  return (
    // <SimpleLayout>
    //   <Landing />
    // </SimpleLayout>
    // <AuthGuard>

    <DashboardLayout>{children}</DashboardLayout>
  );
}

```

{% endcode %}

2. Comment out the `AuthGuard` wrapper for the routes within the `DashboardLayout` element:

{% code title="src/layout/DashboardLayout/index.jsx" %}

```typescript
// import AuthGuard from 'utils/route-guard/AuthGuard';

...
...
return (
  // <AuthGuard>
 <Box sx={{ display: 'flex', width: '100%' }}>
    <Header />
    ...
  </Box>
  // </AuthGuard>
)
```

{% endcode %}

{% hint style="warning" %}
Disabling authentication within the system would render certain applications non-functional, particularly those reliant on backend APIs. These applications require a valid token to access and load data seamlessly.
{% endhint %}
{% endtab %}
{% endtabs %}