Skip to main content

Installation

Vivid is essentially just a custom tailored Vite project.

tip

Use the Quick Guide to try out Vivid quickly.

Requirements​

  • Node.js version 16.14 or higher
  • (Optional) Yarn version 1.22 or higher

Project Scaffold​

To start, you need to clone the repository:

git clone https://github.com/vivid-ts/vivid.git
info

Currently, that is the only way to get started with Vivid.

Vivid project requires you to use TypeScript for better type safety and linting.

tip

Read more about TypeScript in Vivid.

File Structure​

vivid
├── index.html
├── LICENSE
├── package.json
├── postcss.config.js
├── public
│   └── vivid.svg
├── README.md
├── src
│   ├── components
│   │   ├── Head
│   │   ├── Metadata
│   │   ├── Navbar
│   │   └── ThemeSwitch
│   ├── config.tsx
│   ├── hooks
│   │   ├── useCurrentPage.ts
│   │   ├── useGlobalState.ts
│   │   └── useUser.ts
│   ├── index.css
│   ├── layouts                       # Built-in Layouts
│   │   ├── admin
│   │   ├── blank
│   │   ├── index.tsx
│   │   ├── not-available
│   │   └── splash
│   ├── lib
│   │   ├── acl
│   │   ├── core
│   │   └── theme
│   ├── main.tsx                      # Entry point
│   ├── @mock                         # Mock API for axios
│   │   ├── handlers                  # Mock handlers
│   │   └── index.ts
│   ├── pages                         # File based routing
│   │   ├── 404.tsx
│   │   ├── _app.tsx
│   │   ├── data
│   │   ├── index.tsx
│   │   └── login.tsx
│   ├── plugins                       # Usable Plugins
│   │   ├── auth.ts
│   │   ├── axios.ts
│   │   └── casl.ts
│   ├── router                        # Router functions
│   │   └── index.tsx
│   ├── types
│   │   └── global.d.ts
│   └── vite-env.d.ts
├── tailwind.config.js
├── tsconfig.json
├── tsconfig.node.json
├── vite.config.ts
└── yarn.lock

Running the development server​

Since Vivid is built on top of Vite, you can use the following command to start the development server to preview your changes.

cd vivid
npm run dev

Open http://localhost:3000 in your browser to see running instance.

Building for production​

To build the application for production, use the following command:

npm run build

This will create a dist folder with all the static files that you can deploy to your server.