Starter for bootstrap + react + sass + typescript + vite

This is a guide on how to setup a project using vite + react + typescript + sass + bootstrap.
Here we introduce two ways to archive such a project.

One is prepared and easy to start and the other is manual and needs step by step setup.

Easy to start one

The prepared one is located at https://github.com/calidion/Vite-React-Typescript-Sass-Bootstrap-Starter

You can check updates and send pull requests.

gh repo clone calidion/Vite-React-Typescript-Sass-Bootstrap-Starter {your-project-name}
cd {your-project-name}
yarn
yarn dev

Step By Step Setup

Create a vite + bootstrap + typescript project with vite built in tool

yarn create vite

then you should fill in your project name with prompt:

? Project name: › vite-project

after filled in your project name, you should choose the framework you would like to use with prompt like this:

? Select a framework: › - Use arrow-keys. Return to submit.
❯   vanilla
    vue
    react
    preact
    lit
    svelte

here we choose react and more specifically react-ts as we will see the following variants selection section after react chosen.

? Select a variant: › - Use arrow-keys. Return to submit.
❯   react
    react-ts

Now we have a react + typescript project ready.

Then we start to add support for
bootstrap and sass.

Install bootstrap

Add dependency to package.json

yarn add bootstrap
yarn add @popperjs/core

Install node.js types

yarn add --dev @types/node

Install sass support

yarn add --dev sass

Change .css files to .scss

Change index.css to index.scss
Change App.css to App.scss

Change .css imports to .scss

Change main.tsx

import './index.css'

to

import './index.scss'

Change App.tsx

import './App.css'

to

import './App.scss'

Import Bootstrap JS when needed

import { Tooltip, Toast, Popover } from 'bootstrap';

Normally you don't need import bootstrap package. But when you need Tooltip, Toast, Popover to work properly, you need to import them into your react components.

Start to dev

yarn dev

and open the url, you will see a page similiar to the following picture: