Setup React with Vite TypeScript & Storybook in 2023

Vite is a new breed of frontend development technology that vastly enhances the frontend development experience. It is divided into two primary sections:

• A dev server that serves your source files over native ES modules, with rich built-in features and astonishingly fast Hot Module Replacement (HMR).
• A build command that bundles your code with Rollup, pre-configured to output highly optimised static assets for production.

Vite allows you to create web apps in a variety of programming languages and frameworks, such as Vue.js, React, and Angular. Vite has a server-based development methodology, which means that it launches a local server to serve your application while it is being developed. This enables rapid and efficient builds, as well as rapid feedback loops for changes made during development.

Vite has gained popularity with web developers for several reasons:

Vite reduces dev server startup time by categorizing modules in an application into two groups: dependencies and source code.

• Most of the dependencies are ordinary JavaScript that does not change much throughout development.
• The source code frequently contains non-plain JavaScript that must be transformed (e.g., JSX, CSS, or Vue/Svelte components) and will be modified often. Also, not all source code must be loaded at the same time.
• Vite’s server-based development paradigm offers quick feedback loops for changes made during development as well as speedy and effective builds.
• A growing community of developers are working on Vite and contributing to its upkeep. As a result, there is a tonne of resources accessible, such as tutorials, documentation, and open-source plugins, that may assist developers in getting up and running quickly.

In general, Vite’s success can be ascribed to its emphasis on offering a quick and effective development experience, its use of contemporary web technologies, its adaptability and simplicity, and the robust community support that has developed around it.

Vite and CRA are not as dissimilar as you would believe. At their heart, they all accomplish the same thing: they serve a local development server and bundle production code. The main distinction is how code is provided in development and which modules are supported.

In the hood, CRA depends on a third-party build tool called webpack to accomplish its key functionality. This is what Vite is truly up against.

CRA has a more developed ecosystem, with a significant number of plugins and extensions available to extend the build process’s capability. Vite is a younger tool with a smaller ecosystem, but it is fast expanding.

Vite uses native ES modules in addition to other speed enhancements, which results in a significantly quicker build time than CRA. CRA has a more intricate construction methodology, which results in a slower build time.

In conclusion, CRA is a more advanced and more configurable tool with broader browser compatibility, whereas Vite is a newer, quicker, and simpler tool. The decision between the two is based on the particular requirements of your project and your own preferences.

Here is a quick step-by-step guide on how to set up a React project using Vite, TypeScript, and Storybook.

1. Create a new React project using Vite

To create a new React project with Vite, use the following command:

npm init vite@latest my-react-demo-project --template react-ts

This will create a new React project with TypeScript support using the Vite bundler.

then after,

1. Install Storybook.

Installing Storybook into your project is the next step. To install the necessary dependencies, use the following command:

npm install @storybook/react @storybook/addon-actions @storybook/addon-links @storybook/addon-essentials @storybook/preset-create-react-app --save-dev

2. Configure Storybook

After installing the necessary dependencies, must configure Storybook. So may add a main.js file with the following contents to the root of the project and create a folder called “.storybook”:

module.exports = {
  stories: ['../src/**/*.stories.tsx'],
  addons: [
    '@storybook/addon-actions',
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/preset-create-react-app',
  ],
};

This instructs Storybook to use the Build React App preset and search the src directory for story files with a .stories.tsx extension.

3. Create a Storybook story

And may make a new file in the src directory with a .stories.tsx extension to start a fresh Storybook tale. as an example:

import React from 'react';
import { Meta } from '@storybook/react';
import { Button } from './Button';

export default {
  component: Button,
  title: 'Button',
} as Meta;
export const Primary = () => <Button>Primary Button</Button>;
export const Secondary = () => <Button variant="secondary">Secondary Button</Button>;

Using the primary variation and the second variant generates two stories for a Button component.

4. Run Storybook

Finally, you can run Storybook using the following command:

npm run storybook

This will start the Storybook development server, and you can view your stories in your browser at http://localhost:6006.

By now, all are likely to have Vite, TypeScript, and Storybook set up in a React project.

Now let’s talk about how to create an app in DhiWise using Vite, TypeScript, Storybook step by step :

Step 1: Login into DhiWise, and you will be on the Dashboard page where there are several tabs such as Mobile, Web, and Backend so click on a Web tab, click on New Application, fill in an Application name, next, select Technology, and in Languages, select TypeScript option.

Now provide design details of your Figma for more watch this video on how to build an application in react. Next, click on create an application.

Step 2: One model will appear with identified components from Figma and then click on Let’s Start.

Step 3: page with your screen from Figma, with its style, components, etc. is there; now you can change the components and other stuff too, and you can do the API integration as well.

Step 4: Click on Build App, and one popup will open, select With Storybook option, and next select the Vite option so that the application will build according to the selected build option.

Click on Build and then wait till the process get complete.

Step 5: A Screen with Generated code will open where you can find the code with Storybook and Vite.

Now, with this generated code, developers only have to focus on the things which matter, like custom business logic, Custom Animated designs on Screens, etc.

Isn’t it Fantastic that DhiWise helps you generate the code and saves time and effort? Well, yes absolutely.

DhiWise Provides Types of storybook components which is amazing.

Here, Storybook configuration has been added, and it detected common components and generated possible variants of them. To check the documentation of generated common components by integrating Storybook, Please follow the below steps.

Install and Initializes

npx storybook init

Run the Storybook

npm run storybook

Also, vite.config.ts file contains the configuration of Vite.

tailwind.config.js file contains all the CSS and its deceleration which is used in the entire application.

src folder contains the components, assets, pages, styles, services, etc. where a developer can directly implement their custom logic.

Find out more about DhiWise features and how it works.

Sign up for free!

A little about myself :

I am Zaiynab Mansuri, Software developer at DhiWise. Talk about Nodejs, Reactjs.

DhiWise lets you build React and Flutter Apps at blazing fast speed without compromising on code-quality and developer-experience. Check out the platform to know more.