Preparation

Let's set up the project and prepare the environment.

The same as in the previous tutorial, here also we will use MDB Vite starter.

Step 1 - Launch the terminal and download Vite starter via MDB CLI

In the terminal, navigate to the location where you want to place the Vite starter (I chose the desktop) by typing cd + destination path.

Then enter the command:

        
            
  
      mdb init
  
      
        
    

There will be different starters and templates to choose from. Click the down arrow to scroll through the options. Select Standard + Vite and hit enter.

The latest version of the starter will download to your computer.

Step 2 - Install dependencies

In the terminal, navigate to the folder where you downloaded the Vite starter:

        
            
  
        cd mdb5-free-standard-vite
  
      
        
    

Then install all dependencies by typing the following command in the terminal:

        
            
  
      npm install
  
      
        
    

The installation of any necessary dependencies begins. This may take some time (depending on your internet speed, even several minutes).

If all goes well, you should see something like this in your terminal:

Step 3 - Launch Vite

In the terminal, type the following command:

        
            
  
        npm start
  
      
        
    

Vite will start a local server and give you a link in the terminal where a live preview of your new project will be available.

Most likely this link will be http://localhost:8080/ .

Open it in your browser. You should see a welcome message.

Now open the entire folder in the code editor.

Then go to the src/index.html and change some text in the welcome message. If after saving the file the browser will refresh automatically and you can see your changes, that means everything is working properly and we are ready to move on.