start with vite

Vite Documentation

1
npm create vite@latest (project_name) -- -- template react // Then a project auto generated

create different folders

folder list at first

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
Project/
├── public
├── src/
│   ├── api
│   ├── assets
│   ├── components/
│   │   ├── logo
│   │   ├── cards
│   │   └── ScrollTop.jsx
│   ├── layout
│   ├── pages
│   ├── routes
│   ├── index.jsx
│   └── index.css
├── .gitignore
├── eslint.config.js
├── index.html
├── package.json
├── package-lock.json
└── README.md
└── vite.config.js

set the config of vite

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
export default defineConfig
  plugins: [react()],
  define: {
    global: "window",
  },
  resolve: { // set the convenient path for URL
    alias: [
      // url start with src locate to root/src
      {
        find: 'src',
        replacement: path.resolve(__dirname, "src"),
      },
      // url start with components locate to src/components
      {
        find: 'components',
        replacement: path.resolve(__dirname, "src/components"),
      }
    ],
  },
  server: { // set server object for default port and auto-start of website
    // this ensures that the browser opens upon server start
    open: true,
    // this sets a default port to 8888
    port: 8888,
  },
});

use the travel svg file from free resource website

create ScrollTop component for main App application

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import PropTypes from 'prop-types';
import { useEffect } from 'react';

// ==============================|| NAVIGATION - SCROLL TO TOP ||============================== //

const ScrollTop = ({ children }) => {
  useEffect(() => {
    window.scrollTo({
      top: 0,
      left: 0,
      behavior: 'smooth'
    });
  }, []);

  return children || null;
};

ScrollTop.propTypes = {
  children: PropTypes.node
};

export default ScrollTop;

next step is to build route

create index.jsx file under route folder

1
2
3
4
5
6
7
8
9
10
11
12
import { createBrowserRouter } from "react-router-dom";

// project import
import MainRoutes from "./MainRoutes"; //local route
import LoginRoutes from "./LoginRoutes"; //local route

// ==============================|| ROUTING RENDER ||============================== //
const router = createBrowserRouter([MainRoutes, LoginRoutes], {
  basename: undefined,
});

export default router;

use the routerProvider

1
2
3
4
import { RouterProvider } from "react-router-dom";

<RouterProvider router={router} />

setup login page

set loginRoute File

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
const LoginRoutes = [
  {
    path: "/login",
    element: <LoginPage />,
  },
  {
    path: "/404",
    element: <NotFound />,
  },
  { path: "*", element: <NotFound /> },
];

// set main Route
const MainRoutes = {
  path: "/",
  element: <Layout />,
  children: [
    {
      index: true,
      element: <a href="/dashboard">Welcome to Home</a>,
    },
    {
      path: "dashboard",
      element: <Dashboard />,
    },
  ],
};


// layout
import { Outlet } from "react-router-dom";
<Outlet />  // nested router rendered here