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:

# 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:

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:

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

Vite Template Details

Features

This template is configured with:

• Vite – Feature rich and highly optimized frontend tooling with TypeScript support out of the box
• React 18 – A modern front-end JavaScript library for building user interfaces based on components
• TypeScript – A typed superset of JavaScript designed with large scale applications in mind
• ESLint – Static code analysis to help find problems within a codebase
• Prettier – An opinionated code formatter
• React Router 6 – A library for managing routing and navigation in React applications
• React Testing Library – A very light-weight, best practice first, solution for testing React components
• Vitest – A blazing fast unit test framework powered by Vite
• Husky & Lint Staged – Run scripts on your staged files before they are committed
• Nova Themes – A custom theme for styling Nova applications.
• Nova Components – 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

├── .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 – Optimized for Server Components, SSR, and SSG
• React 18 – A modern front-end JavaScript library for building user interfaces based on components
• TypeScript – A typed superset of JavaScript designed with large scale applications in mind
• ESLint – Static code analysis to help find problems within a codebase
• Prettier – An opinionated code formatter
• React Testing Library – A very light-weight, best practice first, solution for testing React components
• Vitest – A blazing fast unit test framework powered by Vite
• Husky & Lint Staged – Run scripts on your staged files before they are committed
• Nova Themes – A custom theme for styling Nova applications.
• Nova Components – 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

├── .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