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.
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.
The most basic config of the dev environment. It provides seamless DX and assures a legible and consistent codebase.
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.
- 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.
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).
If configured tools and overall setup meet your requirements, you should definitely choose this version as the starting point for your project.
- Everything that's included in the
basicversion. - 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).
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.
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.
| 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 |
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.
