Effortlessly Kickstart Your next React Project with Vite and TypeScript: Rapid Development, Enhanced Scalability, and Seamless Tooling. Learn how to set up a project in under 2 minutes, leveraging Vite's speed, TypeScript's type safety, and a custom boilerplate for optimized build workflows, testing, linting, and Docker integration.

Introduction

React, combined with TypeScript, offers a powerful way to develop scalable and maintainable web applications. TypeScript brings static typing to the world of JavaScript, making it easier to write error-free code. Meanwhile, Vite is a fast and lightweight build tool for modern web development, providing a rapid development experience focused on speed and simplicity.

Facing the complexities of tooling while striving to deliver code can often be less than enjoyable. The ideal scenario involves tools seamlessly working without becoming an obstacle. In this article, we will delve into the process of initiating your upcoming React project effortlessly using Vite and TypeScript, along with several other technologies, all in under 2 minutes, completely free from any setup concerns.

Traditionally, you might have considered turning to Create-React-App (CRA) for this purpose. However, imagine having access to a superior alternative that not only assists in establishing the initial structure but also configures your project with essential tools for optimized build and dev workflows, unit testing, integration testing, code formatting, linting, styling, docker configuration and more!

What is Vite?

Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects including 2 parts:

• A dev server that provides fast Hot module replacement
• A build command that bundles your code, pre-configured to output highly optimized static assets for production

Why Vite

For years Create React App (CRA) and Webpack have been the go-to method for starting a React project. Then Vite came along. I started using Vite for building my React projects and I quickly realized that it’s much better in many ways. One of the reasons I really like Vite is because it resolves the unreasonably long wait time to spin up a dev server which affects developers’ productivity and happiness. This is where Vite really shines.

Why combine TypeScript and Vite?

TypeScript and Vite are two powerful tools that have gained widespread popularity in the web development community. While TypeScript provides type safety and a strong foundation for building scalable applications, Vite offers a fast and efficient development experience. So, why combine these two technologies? Let’s take a look.

• Improved type safety: TypeScript provides optional type annotations that can catch type-related errors during development. This helps developers to write more robust and maintainable code and reduces the likelihood of bugs and unexpected behavior. With TypeScript and Vite, developers can ensure the code they write is high quality and free from type-related errors.
• Faster development experience: Vite was designed with speed and simplicity in mind. It offers instant reloading and optimized build times, making developing web applications more accessible and efficient. By combining TypeScript with Vite, developers can take advantage of TypeScript’s robust type system and Vite’s fast development experience for a more enjoyable and efficient development process.
• Scalable and maintainable code: TypeScript is a statically typed language that supports modern JavaScript features and is widely used in large-scale projects. By combining TypeScript with Vite, developers can write scalable and maintainable code that is easy to understand and modify over time.
• Improved performance: Vite is optimized for fast build times and minimal overhead, making it an excellent choice for large and complex applications. This results in improved performance and shorter load times for the end user. By combining TypeScript and Vite, developers can build high-performance web applications that deliver a fast and smooth user experience.

Enough talking. Let’s go and set up our React + Vite + TypeScript project!

Project setup and quick start

First, ensure that you have Node.js ≥v18 installed on your machine.

Pro tip: Nvm (Node.js Version Manager) makes it easier to install and manage multiple versions of Node.js on your local environment.

Next, download and install Pnpm.

curl -fsSL https://get.pnpm.io/install.sh | sh -

PNPM is an alternative package manager for Node.js which stands for “Performant NPM”.

Then, create your project by running the following commands in the terminal:

npx degit DomenicoColandrea86/react-vite-typescript-boilerplate app
cd app
git init
nvm use
pnpm install
pnpm dev

This will effectively clone the boilerplate repo, navigate into the app directory, initialize a new git repository, install project dependencies, and run the dev server.

The app will be served with Hot Reload at http://localhost:5173.

Other available commands

Build

Build the app for production.

pnpm build

Testing the app

This setup also comes with testing baked in using Vitest and Testing-library. You can run tests using the following command:

pnpm test

Code Formatting and Linting

Similarly, linting via ESLint and formatting via Prettier can be triggered by running the following commands:

pnpm lint

and

pnpm prettier

Docker and NGINX

If you would like to run the app via Docker and NGINX, you can run:

pnpm docker:build

and

pnpm docker:run

For more information on how to use this boilerplate, please visit this GitHub repo.

Conclusion

In this article, we discussed the many benefits of combining React, TypeScript, and Vite, as well as demonstrated how to quickly scaffold a new project using these technologies following a custom boilerplate, so that you can avoid analysis paralysis and focus on the important stuff — writing code and creating amazing applications!