Frontend en Laravel 6x con Bootstrap y Vue

Por Darío Rivera

Publicado el 2020-05-05 en Laravel

Una de las primeras preguntas que te pueden surgir al iniciar con Laravel es ¿ Cómo se maneja el Frontend ?. Pues te tengo buenas noticias, Laravel tiene un excelente scaffolding para CSS y JavaScript que te permite de manera rápida estructurar tus archivos del frontend con Bootstrap, React y/o Vue. Como has podido darte cuenta en el título de este post, nos centraremos en utilizar Laravel con Bootstrap y Vue, una combianación realmente fantástica.

Instalación

Para crear el scaffolding del frontend después de la Instalación de Laravel, deberás instalar laravel-ui.

composer require laravel/ui:^2.4

Una vez hecho esto podrás utilizar los siguientes comandos de artisan.

php artisan ui bootstrap
php artisan ui vue

Después de cada comando verás una salida similar a la siguiente respectivamente.

Bootstrap scaffolding installed successfully.
Please run "npm install && npm run dev" to compile your fresh scaffolding.

Vue scaffolding installed successfully.
Please run "npm install && npm run dev" to compile your fresh scaffolding.

Después de esto puedes ejecutar los comandos indicados. Para esto debes haber instalado previamente NPM.

npm install && npm run dev

Scaffolding

Como te puedes dar cuenta Laravel utiliza NPM para gestionar los paquetes del frontend. Entre el scaffolding que ha creado laravel cabe resaltar los siguientes archivos.

resources/sass/app.scss: Este archivo SASS es el punto de entrada en donde se agregan los demás recursos CSS. En el puedes importar fuentes u otros archivos SASS creados por ti.

// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Variables
@import 'variables';

// Bootstrap
@import '~bootstrap/scss/bootstrap';

resources/js/components/ExampleComponent.vue: Este es un archivo de ejemplo de cómo puedes crear un componente en Vue. Lo ideal es que tus componentes estén situados en la misma carpeta en donde está este archivo.

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Example Component</div>

                    <div class="card-body">
                        I'm an example component.
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

public/mix-manifest.json: Este archivo indica los archivo que serán generados por el NPM RUN. Es debido a esto que más abajo sugiero colocar estas carpetas en el archivo .gitignore. Cada vez que ejecutes npm run se generarán nuevamente estos archivos.

{
    "/js/app.js": "/js/app.js",
    "/css/app.css": "/css/app.css"
}

Sube tus cambios al VCS

Antes de subir los cambios a tu repositorio asegurate de agregar la siguientes líneas al archivo .gitignore.

/public/css/
/public/js/

Recuerda que estos archivos son generados con run dev y no con run prod, por tal motivo es algo que debes agregar al procedimiento de deployment de tu proyecto. Los demás archivos podrás agregarlos a tu VCS.

git add .gitignore
git add composer.json
git add composer.lock
git add package.json
git add package-lock.json
git add resources
git add public/mix-manifest.json

Una vez hecho esto, tendrás un scaffolding perfecto para trabajar con tus dependencias frontend con NPM utilizando bootstrap y Vue. Hasta pronto!.

Instalación

Scaffolding

Sube tus cambios al VCS

Categorías