npm package: @hxnova/templates
Description: CLI tool for quickly creating Vite and Next.js starter projects
Author: Hexagon
Latest version: 1.0.0

# Nova Templates

 **Nova Templates** provides pre-configured project templates for integrating the Nova Design System, enabling rapid development with Vite and Next.js
 - `vite-template` – A fast development environment with Vite.
 - `nextjs-template` – A powerful server-side rendering (SSR) and static site generation (SSG) solution with Next.js.

## Installation

Run the following command to initialize your repository:

```bash
# Install and create a Vite-based project
npx @hxnova/templates@beta vite my-vite-app

# Install and create a Next.js-based project
npx @hxnova/templates@beta nextjs my-nextjs-app
```
The command above copies the selected template to your local machine.
After that, install dependencies using your preferred package manager:

```bash
cd <project-name>
pnpm install  # Recommended
# or
npm install
# or
yarn install

```

### Enabling Husky (Git Hooks)

Husky helps maintain code quality by running Prettier and ESLint checks before each commit. To enable it:

```bash
git init  # Initialize Git (required for Husky)
npm run prepare  # Enable Husky hooks
```

## Vite Template Details

### Features

This template is configured with:

- [Vite](https://vitejs.dev) – Feature rich and highly optimized frontend tooling with TypeScript support out of the box
- [React 18](https://18.react.dev/) – A modern front-end JavaScript library for building user interfaces based on components
- [TypeScript](https://www.typescriptlang.org) – A typed superset of JavaScript designed with large scale applications in mind
- [ESLint](https://eslint.org) – Static code analysis to help find problems within a codebase
- [Prettier](https://prettier.io) – An opinionated code formatter
- [React Router 6](https://reactrouter.com/6.30.0/start/overview) – A library for managing routing and navigation in React applications
- [React Testing Library](https://testing-library.com) – A very light-weight, best practice first, solution for testing React components
- [Vitest](https://vitest.dev) – A blazing fast unit test framework powered by Vite
- [Husky & Lint Staged](https://github.com/typicode/husky#readme) – Run scripts on your staged files before they are committed
- [Nova Themes](https://zealous-bay-06c2c6503.5.azurestaticapps.net/?path=/docs/hxnova-themes-readme--docs) – A custom theme for styling Nova applications.
- [Nova Components](https://zealous-bay-06c2c6503.5.azurestaticapps.net/?path=/docs/hxnova-themes-readme--docs) – All of the essential building blocks for creating a Nova application.
- [Nova Icons](#) – A utility component for rendering Material Symbols or custom Nova icons.

### Folder Structure Conventions

```bash

├── .husky/                         # Git hooks configuration (Husky)
│   ├── pre-commit                   # Pre-commit hook for linting & formatting
├── public/                          # Public assets directory
├── src/                             # Main application source code
│   ├── App.tsx                       # Root component with global context & layout
│   ├── augment.d.ts                   # TypeScript augmentation declarations
│   ├── index.css                      # Global styles
│   ├── main.tsx                       # Application entry point
│   ├── vite-env.d.ts                   # TypeScript environment definitions
│   ├── tests/                        # Unit test setup & global mocks
│   │   ├── globalMocks.ts              # Global mocks for testing
│   │   └── setupTests.ts               # Vitest setup file
│   ├── router/                       # React Router configuration
│   │   ├── GlobalHistory.tsx           # Global navigation outside components
│   │   └── index.tsx                   # Router setup
│   ├── pages/                        # Application pages
│   │   ├── NotFound/                   # 404 Page
│   │   │   └── NotFound.tsx
│   │   ├── Home/                       # Home Page
│   │   │   ├── Home.styles.ts
│   │   │   └── Home.tsx
│   │   ├── Forbidden/                  # 403 Page
│   │   │   └── Forbidden.tsx
│   │   ├── Error/                      # Error Page
│   │   │   └── Error.tsx
│   │   ├── components/                   # Reusable UI components
│   │   │   ├── Sidebar/                     # Sidebar navigation
│   │   │   │   ├── Sidebar.test.tsx          # Unit test for Sidebar
│   │   │   │   └── index.tsx
│   │   │   ├── Loader/                      # Loading components
│   │   │   │   ├── FullScreenLoader.tsx
│   │   │   │   └── index.tsx
│   │   │   ├── ColorScheme/                 # Theme & color scheme management
│   │   │   │   ├── ColorSchemeProvider.tsx
│   │   │   │   └── ColorSchemeToggleButton.tsx
├── .editorconfig                      # Editor configuration for consistent formatting
├── .eslintignore                       # ESLint ignore file
├── .gitignore                          # Git ignore file
├── .prettierrc                         # Prettier configuration
├── .prettierignore                     # Prettier ignore file
├── README.md                           # Project documentation
├── eslint.config.mjs                   # ESLint configuration
├── index.html                          # Entry HTML file for the Vite app
├── package.json                         # Project dependencies and scripts
├── tsconfig.app.json                    # TypeScript configuration for the app
├── tsconfig.json                        # Main TypeScript configuration
├── tsconfig.node.json                   # TypeScript configuration for Node.js
└── vite.config.ts                       # Vite configuration

```


## Nextjs Template Details

### Features

This template is configured with:

- [Next.js 14 with App Router](https://nextjs.org/docs/14/getting-started) – Optimized for Server Components, SSR, and SSG
- [React 18](https://18.react.dev/) – A modern front-end JavaScript library for building user interfaces based on
  components
- [TypeScript](https://www.typescriptlang.org) – A typed superset of JavaScript designed with large scale applications
  in mind
- [ESLint](https://eslint.org) – Static code analysis to help find problems within a codebase
- [Prettier](https://prettier.io) – An opinionated code formatter
- [React Testing Library](https://testing-library.com) – A very light-weight, best practice first, solution for testing
  React components
- [Vitest](https://vitest.dev) – A blazing fast unit test framework powered by Vite
- [Husky & Lint Staged](https://github.com/typicode/husky#readme) – Run scripts on your staged files before they are
  committed
- [Nova Themes](https://zealous-bay-06c2c6503.5.azurestaticapps.net/?path=/docs/hxnova-themes-readme--docs) – A custom theme for styling Nova applications.
- [Nova Components](https://zealous-bay-06c2c6503.5.azurestaticapps.net/?path=/docs/hxnova-themes-readme--docs) – All of
  the essential building blocks for creating a Nova application.
- [Nova Icons](https://zealous-bay-06c2c6503.5.azurestaticapps.net/?path=/docs/hxnova-icons-readme--docs) – A utility component for rendering Material Symbols or custom Nova icons.


### Folder Structure Conventions

```bash

├── .husky/                         # Git hooks configuration (Husky)
│   ├── pre-commit                   # Pre-commit hook for linting & formatting
├── public/                          # Public assets directory
├── src/                             # Main application source code
│   ├── augment.d.ts                   # TypeScript augmentation declarations
│   ├── tests/                        # Unit test setup & global mocks
│   │   ├── globalMocks.ts              # Global mocks for testing
│   │   └── setupTests.ts               # Vitest setup file
│   ├── components/                   # Reusable UI components
│   │   ├── App.tsx                     # Root component with global context & layout
│   │   ├── Sidebar/                    # Sidebar navigation
│   │   │   ├── Sidebar.test.tsx          # Unit test for Sidebar
│   │   │   └── index.tsx
│   │   ├── ColorScheme/                # Theme & color scheme management
│   │   │   ├── ColorSchemeProvider.tsx
│   │   │   └── ColorSchemeToggleButton.tsx
│   ├── app/                           # Next.js App Router
│   │   ├── favicon.ico                  # Application favicon
│   │   ├── globals.css                   # Global styles
│   │   ├── layout.tsx                    # Root layout component
│   │   ├── loading.tsx                    # Loading state component
│   │   ├── (sidebar)/                     # Sidebar layout with nested routing
│   │   │   ├── layout.tsx
│   │   │   ├── page.styles.ts
│   │   │   └── page.tsx
├── .editorconfig                      # Editor configuration for consistent formatting
├── .eslintignore                       # ESLint ignore file
├── .gitignore                          # Git ignore file
├── .prettierrc                         # Prettier configuration
├── .prettierignore                     # Prettier ignore file
├── README.md                           # Project documentation
├── eslint.config.mjs                   # ESLint configuration
├── next-env.d.ts                       # TypeScript environment definitions for Next.js
├── next.config.mjs                     # Next.js configuration file
├── package.json                         # Project dependencies and scripts
├── tsconfig.json                        # TypeScript configuration
└── vitest.config.ts                     # Vitest configuration for unit testing

```