What is SPA Vite Template

This project provides a basic dev setup intended for Single Page Application (SPA) development. It contains already configured tools and libraries providing a quick and seamless start, making the Developer Experience (DX) and scalability of your project easily manageable. It also shows a practical application of selected tools and practices in a form of a demo app.

Template versions

Bearing in mind flexibility and openness to various tools and preferences, this template allows you to adjust your workflow to your needs, assuring best practices and following opinionated frontend/React trends at the same time.

Thus, the template provides two different versions, differing in complexity and spectrum of solved problems.

Basic version - basic

The most basic config of the dev environment. It provides seamless DX and assures a legible and consistent codebase.

When to use

This version is free of any libraries. If the core version doesn’t match your preferences and expectations, the basic version will be perfect as a basis for your personalized project setup.

Key features

• Dev environment based on ViteJS 5 toolkit.
• Testing environment based on Vitest and Storybook 8.
• Static code analysis: eslint, prettier, husky.
• TypeScript support.
• Devcontainer config for VS Code.
• PNPM as a package manager.
• CI setup (automate tests, build, deploy draft) with GitHub Actions.

Extended version - core

The extension of the basic version. It contains already configured tools and libraries that aim to solve the most basic and typical problems existing in a modern frontend application (SPA).

When to use

If configured tools and overall setup meet your requirements, you should definitely choose this version as the starting point for your project.

Key features

• Everything that’s included in the basic version.
• Simple, modular, and accessible components based on Chakra UI.
• Data fetching and external state synchronization based on React Query.
• Routing based on React Router 6.
• Date formatting based on DayJS.
• Formatting tools for numbers, monetary values, and dates (easily extendable with any date library like DayJS).
• State management with Zustand.
• API mocking with MSW.
• A demo app with authentication presenting project structure, good practices, and used tooling in action (with a little help of Fake Store API).

Guideline

How to use

You may simply download a ZIP Directory and start with a clean git repository using a command git init…

… or clone this repo through git CLI.

git clone -b basic --depth 1 --single-branch https://github.com/bartstc/spa-vite-template.git [project_name]

git clone -b core --depth 1 --single-branch https://github.com/bartstc/spa-vite-template.git [project_name]

Link cloned repo with your own remote repository.

git remote set-url origin [email protected]:username/project.git

Create and push your own branch designated for development.

git checkout -b [branch_name]

git push --set-upstream origin [branch_name]

Set your newly created and pushed branch as default. You may do this in Settings -> Branches -> Default Branch.

Starting the dev environment

It’s recommended to run the dev server and tests in a docker container. Containerized environment assures compatibility and cohesion regarding launching and developing your project. Because of that, you don’t need to worry about unexpected errors or undesired mismatches of locally installed dependencies e. g. Node or Pnpm.

If you are using VS Code as your IDE, I personally recommend using already configured in this template devcontainer env.

Learn more about using this template in practice below.

Basic commands

Command	Description
pnpm dev	Runs dev server with the HMR locally on port 5173
pnpm build	Builds optimized app package
pnpm test	Runs unit tests
pnpm storybook	Runs a Storybook locally on port 6006
pnpm test-storybook	Runs integration tests (requires a running Storybook on port 6006 - more info here)
pnpm build-storybook	Builds static app with a Storybook’s content

Contributing

It is publicly open for any contribution. Bugfixes, new features, and extra modules are welcome.

• To contribute to code: Fork the repo, push your changes to your fork, and submit a pull request.
• To report a bug: If something does not work, please report it using GitHub Issues.