Un “Web Stack” es una recopilación de utilidades que se usan en conjunto para la implementación de páginas web.
Vamos a ver cómo configurar manualmente un entorno para desarrollar aplicaciones web partiendo de una instalación base limpia de Laravel 7 que hará las veces de Back-End. Posteriormente instalaremos Vue como framework JavaScript para el desarrollo Front-End y por último reemplazaremos Bootstrap por Tailwind CSS como framework CSS para el diseño de la interfaz.
La razón por la que he elegido estas utilidades son principalmente:
- Laravel: Es un potente framework Back-End con el que ya estoy familiarizado y que realmente agiliza mucho el proceso de desarrollo, no es de extrañar que haya revolucionado el mundo del desarrollo de aplicaciones web en PHP.
- Vue: Viene integrado con Laravel y ha ganado tracción rápidamente frente a su principal competidor React. Es muy potente y tiene una menor curva de aprendizaje frente a dicho competidor.
- Tailwind CSS: Un framework CSS que ha ido ganando cada vez más fama por su versatilidad para diseñar interfaces muy distintas con un sistema de clases familiar para los acostumbrados a Bootstrap pero con un sistema “utility first” como él mismo se denomina.
Antes de empezar, recomiendo leer atentamente los requerimientos de la documentación de Laravel, ya que esta guía parte de una instalación base de este framework.
Creando el proyecto en Laravel
Lo primero que haremos será crear el proyecto con el comando que nos proporciona laravel:
En mi caso ya me encuentro en un directorio creado bajo el nombre ”tailwindcss-vue”
laravel new .
Si ponemos “.” laravel se instalará en el directorio actual en el que nos encontramos. Si en su lugar prefieres crear un directorio sustituye el “.” por “nombre-del-proyecto” y recuerda moverte dentro del directorio con cd nombre-del-proyecto.
Instalando Vue
Siguiendo las indicaciones de la documentación de Laravel descargamos el paquete de composer “laravel/ui” y procedemos a instalar toda la estructura de Vue integrada con Laravel.
composer require laravel/ui
Este paquete de composer genera además un componente de ejemplo que usaremos más adelante para verificar que Vue está funcionando correctamente.
Instalamos todo el paquete Vue
php artisan ui vue
e instalamos las dependencias y compilamos el código
npm install && npm run dev.
Sustituyendo Bootstrap por Tailwind
Llegados a este punto si ejecutamos el comando:
php artisan serve
veremos una pantalla como la siguiente:
Ahora mismo tenemos un proyecto totalmente funcional de Laravel y Vue. Sin embargo, la vista que vemos, que se encuentra en el fichero “welcome.blade.php”, está utilizando Bootstrap para aplicar los estilos. Nuestro siguiente paso es instalar y aplicar Tailwind y eliminar todas las referencias a Bootstrap.
# Instalando y configurando Tailwind
Empezamos por instalar Tailwind mediante node.js
npm install tailwindcss
Eliminamos las referencias a bootstrap en el CSS y añadimos las de Tailwind. En el archivo “app.scss” sustituye:
// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');
// Variables
@import 'variables';
// Bootstrap
@import '~bootstrap/scss/bootstrap';
Por:
// Tailwind CSS @import "tailwindcss/base"; @import "tailwindcss/components"; @import "tailwindcss/utilities";
A continuación creamos el archivo de configuración de Tailwind CSS, este archivo nos permite personalizar el framework de diversas formas, por ejemplo añadiendo nuevas fuentes o añadiendo temas de colores nuevos, expandiendo los que nos proporciona el framework de una forma controlada y sistematizada:
npx tailwindcss init
El comando nos habrá creado un archivo “tailwind.config.js” en la raíz del proyecto. En la documentación de Tailwind podéis ampliar información acerca de este archivo.
Añadimos Tailwind a Laravel-mix. Para ello abrimos el archivo “webpack.mix.js” y sustituimos su contenido por lo siguiente:
const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.options({
processCssUrls: false,
postCss: [tailwindcss('./tailwind.config.js')],
});
De esta manera ya tendríamos Tailwind instalado y configurado para empezar a usarlo.
# Borrando bootstrap
Por último solo nos queda eliminar todas las referencias restantes a Bootstrap en el código para que al compilarlo no provoque un error.
Primero, en el archivo “package.json” eliminamos las referencias a Bootstrap y sus dependencias (en blanco: Bootstrap, JQuery y Popper):
Y en el archivo “bootstrap.js” (ruta resources/js/bootstrap.js) eliminamos el siguiente bloque try/catch:
# Añadiendo la fuente Inter var
Para rematar todo este conjunto de utilidades, he decidido añadir la fuente que usa Tailwind en sus componentes, Inter Var. Se trata de una fuente variable y que es completamente gratuita y Open Source. Puedes encontrarla en su web o en Google Fonts.
Primero creamos un archivo llamado “style.scss” en la ruta “resources/sass/style.scss” con el siguiente contenido:
@import url('https://rsms.me/inter/inter.css');
html {
font-family: 'Inter', sans-serif;
}
@supports (font-variation-settings: normal) {
html { font-family: 'Inter var', sans-serif; }
}
Y lo importamos en el archivo “app.scss” en la misma ruta añadiendo en una nueva linea lo siguiente:
@import "style";
Viendo los resultados
Por último dejo un ejemplo para reemplazar el contenido de la vista “welcome.blade.php” con un layout hecho con Tailwind y que incluye el componente de prueba de Vue que integra Laravel para verificar que todo está funcionando correctamente.
# Ejemplo
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<link href="css/app.css" rel="stylesheet">
<link rel="stylesheet" href="{{ mix('/css/app.css') }}">
</head>
<body>
<div id="app">
<div class="flex flex-col justify-center min-h-screen py-12 bg-gray-50 sm:px-6 lg:px-8">
<div class="flex items-center justify-center">
<div class="flex flex-col justify-around">
<div class="space-y-6">
<h1 class="text-5xl font-extrabold tracking-wider text-center text-gray-600">
{{ config('app.name') }}
</h1>
<ul class="list-reset">
<li class="inline px-4">
<a href="https://tailwindcss.com"
class="font-medium text-indigo-600 hover:text-indigo-500 focus:outline-none focus:underline transition ease-in-out duration-150">Tailwind
CSS</a>
</li>
<li class="inline px-4">
<a href="https://vuejs.org/"
class="font-medium text-indigo-600 hover:text-indigo-500 focus:outline-none focus:underline transition ease-in-out duration-150">Vue</a>
</li>
<li class="inline px-4">
<a href="https://laravel.com"
class="font-medium text-indigo-600 hover:text-indigo-500 focus:outline-none focus:underline transition ease-in-out duration-150">Laravel</a>
</li>
</ul>
<example-component></example-component>
</div>
</div>
</div>
</div>
</div>
<script src="{{ mix('js/app.js') }}"></script>
</body>
</html>
Ejecutamos npm install && npm run dev para recompilar el código sin las dependencias de Bootstrap y con las nuevas fuentes importadas
Podemos ver el resultado final escribiendo en el terminal php artisan serve y accediendo a http://127.0.0.1:8000.
Si todo ha ido bien deberías ver una pantalla como esta:
Podemos ver cómo debajo de los enlaces y el logo aparece el componente de prueba de Vue que trae Laravel, así como la fuente Inter Var cargada y los estilos de Tailwind aplicándose por lo que todo está funcionando correctamente.
¡Y eso es todo! Espero que te haya resultado de utilidad y que disfrutes creando aplicaciones con este potente stack de desarrollo.
