Article App

# Quick setup the Bootstarp and Laravel 9 in few steps   🚀

### 1) Project Setup:

I am going to use the composer to setup everything here.

```
composer create-project laravel/laravel simple-project-name
``` 
This will basically setup the new laravel project in your machine.
Once the setup is complete, `cd simple-project-name` to move inside your project and
follow below code.

### 2) Setup laravel ui inside project


```
composer require laravel/ui
``` 
This add the ``laravel/ui``  package inside your project. We will further use this ui package to add the bootstrap. 

*So far so good* , Hopefully you are not facing any issue till now. 
Moving on, 

### 3) Setup the bootstrap (5) using php artisan 

```
php artisan ui bootstrap
``` 

*Before we move on to another steps, make sure you have [**nodejs**](https://nodejs.org/en/download/) setup on your machine.*

### 4) Setup up dev dependencies using NPM

```
npm install
``` 
and build everything 

```
npm run build
``` 

### 5) Update the vite.config.js

Add the ``resolve: {}`` field just below the plugins inside the vite.config.js, 


```
 resolve: {
        alias: {
            "~bootstrap": path.resolve(__dirname, "node_modules/bootstrap"),
        },
    },
``` 
**Make sure to import the path at the top**

So now your vite config file should looks something like this:


```
import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";

import path from "path";

export default defineConfig({
    plugins: [
        laravel({
            input: ["resources/sass/app.scss", "resources/js/app.js"],
            refresh: true,
        }),
    ],
    resolve: {
        alias: {
            "~bootstrap": path.resolve(__dirname, "node_modules/bootstrap"),
        },
    },
});

``` 

### 6) Update the app.js file inside the ``resource/js`` folder

Just import the  `resource/scss/app.scss` file inside the  `resource/js/app`

so now your app.js file should look like this

```
import "./bootstrap";
// add this like
import "../sass/app.scss";

``` 

### 7) Now finally include bootstrap in your blade template


```
@vite(['resources/js/app.js'])
``` 
My app.blade.php looks like this

```
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Article App</title>
// New like added here
  @vite(['resources/js/app.js'])
</head>
``` 


Everything is now done, just make sure the restart the server by doing
```
php artisan serve
```

And rebuild the npm package by
```
npm run build
```


Or or or, 
just use the [CDN](https://getbootstrap.com/docs/5.2/getting-started/introduction/) if you want to quickly start. 


**Byeeeeeeeee** 🍻


![814.jpeg](https://cdn.hashnode.com/res/hashnode/image/upload/v1669113589850/T3vqRRLzC.jpeg align="center")