# Dashboard as First Page

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.

{% tabs %}
{% tab title="VITE (TS)" %}

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

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

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

// project-imports
// import CommonLayout from 'layout/CommonLayout';
// import Loadable from 'components/Loadable';
import ComponentsRoutes from './ComponentsRoutes';
// import LoginRoutes from './LoginRoutes';
import MainRoutes from './MainRoutes';

// 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 `Dashboard` 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 %}
{% endtab %}

{% tab title="VITE (JS)" %}

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

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

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

// project-imports
// import CommonLayout from 'layout/CommonLayout';
// import Loadable from 'components/Loadable';
import ComponentsRoutes from './ComponentsRoutes';
// import LoginRoutes from './LoginRoutes';
import MainRoutes from './MainRoutes';

// 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 `Dashboard` 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>
j
```

{% endcode %}
{% endtab %}
{% endtabs %}

{% 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 %}