AdiRishi / vite-react-ts-spa

An opinionated Vite starter template for production ready Single Page Apps

Vite-React-TS-SPA

An opinionated vite starter template for production ready Single Page Apps

Features

• Vite
• Pre-configured production builds with @vitejs/plugin-legacy
• Build output analysis with rollup-plugin-visualizer
• Yarn v3 package manager
• Eslint with recommended pre-configured lint rules : Eslint, Typescript, React, React Hooks, Testing Library, JestDom Expects, Prettier
• Prettier code formatter
• Pre-configured Tailwind CSS
• Unit testing with Vitest and React Testing Library
• Pre-configured web vitals

Getting Started

Use this repository as a GitHub template or use degit to clone to your machine with an empty git history:

npx degit AdiRishi/vite-react-ts-spa my-app

Then take the following steps to run the app

cd my-app
yarn install
yarn dev # starts the dev server

Out of Scope for this template

In order to not stack too many unnecessary tools I decided to keep this repository simple and constrained in it's scope.

However modern React applications need a plethora of tools and packages to provide a good developer experience. In this section I will go over the areas out of scope for this project and suggest libraries/tools to use to solve these problems.

Server Side Rendering (SSR)

Vite has recommendations for SSR which you can read in their guide. However should you wish to build server rendered React applications I recommend using a framework like Next.js

Global State Management

State management should not be confused with state synchronization; specifically server state synchronization. Typical CRUD operations on APIs and server data falls under the category of state synchronization which will be discussed further down below.

State management in our context here refers to client state management. This typically revolves around UI state e.g is my chat window open or not? Often times react hooks are not enough and these values need to be globally accessible through the app.

• If you need complex state management, Redux is still the library to use. I recommend @reduxjs/toolkit as it simplifies a lot of the boilerplate typically associated with Redux and provides a great developer experience.
• If all you need is sparse, simple and performant state management consider using Jotai and/or Zustand
• If you need complex state machine like behavior use XState

State Synchronization

State synchronization is the process involved with querying and mutating data that typically lives on a server / database.

Back in the day this process was typically done with the help of Redux. Developers would write actions, reducers and side effects to query/mutate server data. This is an anti-pattern and results in a huge amount of boilerplate code even for simple tasks.

Luckily there are many libraries that solve this problem today. Which one you pick largely depends on the broader ecosystem your app lives in.

• If your app primarily communicates with REST APIs and does not use redux. Consider using TanStack Query (formerly known as React Query)
• If you already use Redux in your application then RTK Query (which is already a part of Redux Toolkit) is your best bet.
• If your backend is GraphQL based, Apollo Client will provide the best developer experience.