DEV Community

Cover image for Starter for bootstrap + react + sass + typescript + vite
NotFound404
NotFound404

Posted on

Starter for bootstrap + react + sass + typescript + vite

#webdev #typescript #react #beginners

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
Enter fullscreen mode Exit fullscreen mode

Step By Step Setup

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

yarn create vite
Enter fullscreen mode Exit fullscreen mode

then you should fill in your project name with prompt:

? Project name: › vite-project
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Install node.js types 

yarn add --dev @types/node
Enter fullscreen mode Exit fullscreen mode

Install sass support 

yarn add --dev sass
Enter fullscreen mode Exit fullscreen mode

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'
Enter fullscreen mode Exit fullscreen mode

to

import './index.scss'
Enter fullscreen mode Exit fullscreen mode

Change App.tsx 

import './App.css'
Enter fullscreen mode Exit fullscreen mode

to

import './App.scss'
Enter fullscreen mode Exit fullscreen mode

Import Bootstrap JS when needed 

import { Tooltip, Toast, Popover } from 'bootstrap';
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

Image description

Top comments (0)

Read next

paharihacker profile image

React Performance Optimization Techniques: Memoization, Lazy Loading, and More

Rajesh Dhiman -

msh_sayket_6a8d9f36faac8a profile image

How to Compress Image Size in Laravel 11

Msh Sayket -

tutortacademy profile image

Regrets Every Programmer Faces: Lessons for Aspiring Coders

Tutort Academy -

griseduardo profile image

Testes e2e em React com Cypress

Eduardo Henrique Gris -