
> 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


> Containers have revolutionized the way software applications are developed, deployed, and managed. In this comprehensive introduction to Docker and containers, we will explore what they are, the problems they aim to solve, cover important high-level concepts and best practices, provide code examples, a guide to getting started with Docker, Node.js, and React, and summarize the key takeaways.

## What are Containers?

Containers are lightweight, standalone, and executable packages that encapsulate an application, along with all its dependencies and configuration files. They provide a consistent and reproducible environment for running applications, regardless of the underlying infrastructure.

## The Problems Containers Aim to Solve

Containers solve several challenges in software development and deployment:

### Consistency Across Environments

Containers ensure that applications run consistently across different environments, from development to production, avoiding the dreaded "it works on my machine" problem.

### Dependency Management

Containers encapsulate all dependencies required by an application, eliminating compatibility issues and simplifying the setup process.

### Scalability and Resource Efficiency

Containers enable the efficient utilization of resources and allow applications to scale horizontally by running multiple instances of the same container across a cluster.

## What is Docker?

<a href="https://www.docker.com/" target="_blank">Docker</a> is a platform designed to help developers build, share, and run modern applications using containers.

## Key Concepts in Docker

### Images

An image is a read-only template that contains the instructions for creating a container. It includes the application code, runtime, libraries, and dependencies.

### Containers

A container is an instance of an image. It is a runnable environment that isolates an application and its dependencies from the host system.

### Dockerfile

A Dockerfile is a text file that contains instructions for building a Docker image. It specifies the base image, application code, dependencies, and configuration.

### Docker Compose

Docker Compose is a tool for defining and running multi-container Docker applications. It allows you to define and configure multiple services and their dependencies in a single YAML file.

## Best Practices in Docker

To make the most of Docker, follow these best practices:

### Keep Containers Lightweight

Minimize the size of your containers by using lightweight base images, removing unnecessary dependencies, and optimizing the layers.

### Use Docker Layer Caching

Leverage Docker's layer caching mechanism to speed up the build process. Place frequently changing instructions at the end of your Dockerfile to utilize the cache effectively.

### Manage Container Lifecycle

Design your application to be stateless, and externalize any stateful data or configurations. This enables easy scaling, updates, and replacements of containers without impacting the application.

### Container Orchestration

Consider using container orchestration tools like Kubernetes or Docker Swarm for managing and scaling containerized applications in production environments.

## Getting Started with Docker, Node.js, and React

Let's get started with Docker by Dockerizing a Node.js backend and deploying a React frontend:

### Step 1: Install Docker

First, install Docker on your machine by following the official <a href="https://docs.docker.com/get-docker/" target="_blank">Docker installation guide</a>.

### Step 2: Create a Node.js Application

Create a new directory for your Node.js application and navigate to it in the terminal. Initialize a new Node.js project using npm:

```bash
mkdir my-node-app
cd my-node-app
npm init -y
```

### Step 3: Dockerize the Node.js Application

Create a file named `Dockerfile` in the root of your project and add the following content:

```yaml
# Use a lightweight Node.js base image
FROM node:14-alpine

# Set the working directory in the container
WORKDIR /app

# Copy package.json and package-lock.json to the container
COPY package*.json ./

# Install dependencies
RUN npm install

# Copy the application code to the container
COPY . .

# Expose a port to access the application
EXPOSE 3000

# Run the application when the container starts
CMD ["npm", "start"]
```

### Step 4: Build and Run the Docker Image

Build the Docker image by running the following command in the terminal:

```bash
docker build -t my-node-app .
```

Once the image is built, start a container based on the image:

```bash
docker run -p 3000:3000 my-node-app
```

### Step 5: Deploy a React App with Docker

To deploy a React application, create a new directory for your React project and navigate to it in the terminal. Initialize a new React project using `create-react-app`:

```bash
npx create-react-app my-react-app
cd my-react-app
```

Follow the previous steps (Step 3 and Step 4) to create a Dockerfile and build/run the Docker image for your React application.

## Summary

In this comprehensive introduction to Docker and containers, we covered what containers are and the problems they aim to solve. We explored key concepts such as images, containers, Dockerfiles, and Docker Compose. We discussed best practices for using Docker, including keeping containers lightweight, leveraging Docker layer caching, managing container lifecycles, and considering container orchestration. Additionally, we provided a step-by-step guide to getting started with Docker, Node.js, and React, enabling you to containerize and deploy your applications.

By utilizing Docker and containers, you can ensure consistent and reproducible environments, simplify dependency management, and improve scalability and resource efficiency in your software development and deployment processes.

> Note: This blog post provides a high-level introduction to Docker and containers. For more in-depth information, consult the official Docker documentation and explore advanced topics like container networking, volume management, and container security.


Posts with tag Docker

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

Introduction to Docker and Containers