Setting up React with Typescript using Vite

Introduction

Over time, react community have transitioned from relying solely on create-react-app to adopting "Vite" as an alternative for setting up React projects. One of the reasons for this shift is that create-react-app can sometimes result in larger and slower development builds, which can lead to longer build times, especially in larger projects. Additionally, managing dependencies and optimizing performance in "create-react-app" can be challenging, especially when dealing with complex applications and many more.

In this article, we will explore the challenges associated with "create-react-app" and how "Vite" has emerged as a savior to these concerns. Discover how "Vite" offers a refreshing approach to React development, with its lightning-fast setup and optimized performance. We will delve into the seamless integration of React with TypeScript using "Vite," unlocking a more efficient and productive development experience.

Challenges of using create-react-app

• create-react-app has more than 400 pull request's and there’s no recent updates for over a year

  

  

• create-react-app is not officially being used in the new react documentation anymore, the community has swiftly shifted to Next.js and is encouraging developers to adopt it, this can be the reason why there's been no new developments going on in create-react-app

• Dependency on Outdated and Insecure Packages:

  • create-react-app depends on a number of packages that have vulnerabilities of high and critical severity. Programs created with create-react-app have numerous security flaws

• Increased Bundle Size and Reduced Performance:

  • create-react-app has an unnecessary dependency on tons of other packages, which are really not necessary and this reliance has been growing over the years, effecting the overall react bundle size and so the performance

What the heck is Vite?

Vite is a fast build tool and development server designed for modern web development. It leverages native ES modules to enable rapid development and efficient hot module replacement (HMR). With its quick build times and support for various frameworks like React and Vue.js, Vite enhances developer productivity and provides an optimal development experience.

Benefits of using Vite over CRA

• Vite offers a lightning-fast development server with native ES module support and quick hot module replacement (HMR).

• Vite comes with built-in TypeScript support, enabling static typing for better code reliability.

• The plugin ecosystem allows easy extension for various features like PWA support and CSS preprocessing.

• Vite's build process generates smaller and optimized production bundles for better performance by compiling only used parts of the application, enhancing developer productivity.

• The configuration is straightforward and requires minimal setup, making it user-friendly.

Installation Procedure

Note: Vite requires Node.js version 14.18+, 16+. Please, install the version accordingly.

In this project, I will be using npm to install the packages, you can use whichever, package manager you want.

Using NPM:

npm create vite@latest

Using Yarn:

yarn create vite

Select React > Select Typescript + SWC

Why are we using React with TypeScript + SWC in Vite rather than using only Typescript 🧐?

• SWC (Speedy Web Compiler) is a fast and modern JavaScript/TypeScript compiler that aims to be a high-speed alternative to Babel and TypeScript.

• In this setup, you use TypeScript with SWC as the compiler, which provides an alternative to the TypeScript compiler (tsc) used in the standard React with TypeScript setup.

• By using SWC, the compilation process can be significantly faster, resulting in quicker development server start-up and build times.

• Additionally, SWC offers some advanced JavaScript features and optimizations that might not be available in the default TypeScript compiler.

Now, this project's initial setup is complete. Please follow the below steps to start the project.

In your browser open: http://127.0.0.1:5173/ to checkout if the dev server has started or not. You should get a screen like the below image.

Understanding the project structure

1. Root Directory:

   • This is the main directory of your Vite project.

   • It contains essential files such as package.json, vite.config.js or vite.config.ts (Vite configuration file), and any other configuration files specific to your project.

2. src Directory:

   • The src directory is where you store your source code files.

   • It typically contains your JavaScript or TypeScript files, as well as other assets like stylesheets, images, and other resources.

3. Public Directory:

   • The public directory is for public assets that don't need to be processed by Vite's build system.

   • Any files placed in this directory are directly accessible and served as-is from the root of your application.

   • Common files placed here include index.html (the main entry point of your app), favicon.ico, and other static assets.

4. Dist (or Build) Directory:

   • The dist (or build) directory is automatically generated when you build your Vite project.

   • It contains the optimized and minified production-ready files that are ready for deployment to a web server.

5. Others:

   • Apart from these main directories, you might have other files and directories depending on your project's specific needs, such as testing configuration, version control files (.git),node_modules directory, etc.

Conclusion

In this article, we learned how to set up a React with TypeScript and Vite app from scratch. Combining the power of React's declarative components, TypeScript's static typing, and Vite's fast development server makes for an efficient and enjoyable development experience.

Feel free to explore further and build upon this foundation to create robust and sophisticated React applications using TypeScript and Vite. Happy coding!