Dev-habiola

Setting up Vite with React, Sass and TypeScript

Abiola Fasanya's photo
Abiola Fasanya
·

2 min read

Table of contents

What is Vite

Vite is a build tool for modern web development, which is designed to increase the speed of development by providing instant feedback during the development process. It achieves this through its fast and efficient development server that leverages native ES modules, which allows for faster page reloading, and optimized builds at the production level.

What is React

React, is an open-source JavaScript library that was developed by Facebook for building user interfaces (UIs) and reusable UI components. It is one of the most popular and widely used front-end web frameworks.

What is TypeScript

TypeScript is a free and open-source superset of JavaScript that was developed by Microsoft. It was designed to make it easier to build and maintain large-scale applications by adding optional static typing and other features that are not part of standard JavaScript.

What is Saas

Sass (Syntactically Awesome Style Sheets) is a preprocessor scripting language that is compiled into CSS. Sass provides developers with advanced features such as variables, nesting, mixins, functions, and inheritance, which are not part of traditional CSS.

Prerequisites

  1. Node.js is installed on your machine. (https://nodejs.org/)

  2. Basic knowledge of command line interface (CLI).

  3. Familiarity with React framework.

Step 1 - Creating a new React Application

The first step is to create a new react application. You can do this with the help of npm create vite@latest package. In your terminal or command prompt, run the following code:

npm create vite@latest my-app -- --template react-ts

This will create a new React application named my-app using TypeScript template.
You can now navigate into the newly created directory:

cd my-app

Step 2 - Installing Sass and Sass loader

npm i -D sass sass-loader

Step 3 - Configuring Vite

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import sass from 'sass'


export default defineConfig({
  plugins: [react()],
  css: {
    preprocessorOptions: {
      scss: {
        implementation: sass,
      },
    },
  },
});

Congratulations! You have now successfully set up Vite with React and TypeScript.

To start the development server, run the following command in your terminal:

npm run dev

This should open up the application in your default browser.

Conclusion

And that's it! With this guide, you have learned how to set up Vite with React, Sass and TypeScript using simple steps. With the help of Vite, your development experience will be faster and more efficient.

ReactTypeScriptSassvitereact-ts