
> 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

<a href="https://www.codescool.io/learning/introduction-to-react" target="_blank">React</a>, combined with <a href="https://www.codescool.io/learning/introduction-to-typescript" target="_blank">TypeScript</a>, 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, <a href="https://vitejs.dev/" target="_blank">Vite</a> 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?

<a href="https://vitejs.dev/" target="_blank">Vite</a> 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?

<a href="https://www.typescriptlang.org/" target="_blank">TypeScript</a> and <a href="https://vitejs.dev/" target="_blank">Vite</a> 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: <a href="https://www.codescool.io/learning/how-to-easily-manage-different-node-versions-with-nvm">Nvm</a> (Node.js Version Manager) makes it easier to install and manage multiple versions of Node.js on your local environment.

Next, download and install <a href="https://pnpm.io/" target="_blank">Pnpm</a>.

```bash
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:

```bash
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 <a href="http://localhost:5173" target="_blank">http://localhost:5173</a>.

<img src="https://www.codescool.io/images/react-typescript-vite-starter.jpg">

## Other available commands

### Build

Build the app for production.

```bash
pnpm build
```

### Testing the app

This setup also comes with testing baked in using <a href="https://vitest.dev/" target="_blank">Vitest</a> and <a href="https://testing-library.com/" target="_blank">Testing-library</a>. You can run tests using the following command:

```bash
pnpm test
```

### Code Formatting and Linting

Similarly, linting via <a href="https://eslint.org/" target="_blank">ESLint</a> and formatting via <a href="https://prettier.io/" target="_blank">Prettier</a> can be triggered by running the following commands:

```bash
pnpm lint
```

and

```bash
pnpm prettier
```

### Docker and NGINX

If you would like to run the app via <a href="https://www.docker.com/" target="_blank">Docker</a> and <a href="https://nginx.org/" target="_blank">NGINX</a>, you can run:

```bash
pnpm docker:build
```

and

```bash
pnpm docker:run
```

For more information on how to use this boilerplate, please visit <a href="https://github.com/DomenicoColandrea86/react-vite-typescript-boilerplate" target="_blank">this</a> 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!


Create a React app with Vite + TypeScript in under 2 minutes


> Testing is a critical aspect of software development that ensures the quality and reliability of applications. In this comprehensive introduction to testing JavaScript applications, we will explore what testing is, the problems it aims to solve, cover important high-level concepts and best practices, provide code examples, a guide to getting started with testing JavaScript apps using Jest, and summarize the key takeaways.

## What is Testing?

Testing is the process of evaluating a system or a component to determine whether it meets the specified requirements and works as expected. It involves executing the code with different inputs and verifying the outputs to ensure that the application behaves correctly.

## The Problems Testing Solves

Testing aims to solve several problems in software development:

### Quality Assurance

Testing helps identify and prevent bugs and errors in the application, ensuring that it meets the desired quality standards.

### Regression Testing

As applications evolve and new features are added, there is a risk of introducing bugs that may break existing functionality. Testing helps catch regressions and ensures that the application continues to work as intended.

### Confidence in Changes

By having comprehensive tests in place, developers can make changes to the codebase with confidence, knowing that if something breaks, the tests will catch it.

## Key Concepts in Testing

### Unit Testing

Unit testing involves testing individual units of code in isolation. A unit can be a function, method, or a small piece of functionality. Unit tests are focused on verifying the correctness of a specific unit of code.

### Integration Testing

Integration testing involves testing the interaction between different components of an application to ensure they work together correctly. It validates that the integrated components function as expected.

### Test Suites and Test Cases

Tests are organized into test suites and test cases. A test suite is a collection of related test cases, while a test case is a specific scenario or condition that is being tested.

### Assertions

Assertions are statements that verify whether a given condition is true. They are used to check the expected output or behavior of the code being tested.

### Mocking and Stubbing

Mocking and stubbing involve replacing certain parts of the code with fake or dummy implementations to isolate the code being tested from its dependencies. This allows for controlled testing environments and eliminates external factors that may affect test results.

## Best Practices in Testing

To write effective tests, it is important to follow these best practices:

### Write Testable Code

Design code in a way that facilitates easy testing. Avoid tight coupling, break complex logic into smaller functions, and ensure proper separation of concerns.

### Keep Tests Independent

Ensure that tests do not rely on each other and can be run independently. This avoids potential interference and ensures accurate test results.

### Test for Edge Cases

Consider edge cases and boundary conditions when writing tests. Test scenarios that cover both expected and unexpected inputs to uncover potential issues.

### Regularly Run Tests

Run tests frequently, ideally as part of an automated testing process. Regularly running tests helps catch issues early and maintains the confidence in the codebase.

## Getting Started with Testing JavaScript Apps using Jest

<a href="https://jestjs.io/" target="_blank">Jest</a> is a popular JavaScript testing framework that provides a simple and intuitive way to write tests. Let's get started with Jest:

### Step 1: Install Jest

Install Jest as a dev dependency in your project by running the following command:

```bash
npm install --save-dev jest
```

### Step 2: Write Test Cases

Create a new file, `example.test.js`, and write your test cases using the Jest framework:

```javascript
// example.test.js

function sum(a, b) {
  return a + b;
}

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});
```

### Step 3: Run Tests

To run your tests, execute the following command:

```bash
npx jest
```

Jest will execute the test cases and provide the test results.

## Summary

In this comprehensive introduction to testing JavaScript applications, we covered what testing is and the problems it aims to solve. We explored key concepts such as unit testing, integration testing, test suites, test cases, assertions, mocking, and stubbing. Additionally, we discussed best practices, including writing testable code, keeping tests independent, testing for edge cases, and regularly running tests. We also provided a guide to getting started with testing JavaScript apps using Jest.

Testing is an essential aspect of software development that helps ensure the reliability and quality of applications. By incorporating testing into your development process, you can catch bugs early, prevent regressions, and build robust and stable applications.


Posts with tag Testing

Create a React app with Vite + TypeScript in under 2 minutes

Introduction to Testing JavaScript Applications