Cómo crear una página Acerca de mí con capacidad de respuesta con Laravel, Sail y Tailwind CSS

Introducción

Laravel Sail es un entorno de desarrollo Docker incluido por defecto en Laravel desde la versión 8. Te permite tener rápidamente en funcionamiento un entorno de desarrollo PHP, diseñado para ejecutar aplicaciones Laravel con soporte integrado para NPM / Node.

En esta guía, crearás una nueva aplicación Laravel con Laravel Sail y una página de inicio con estilo “sobre mí” usando Tailwind CSS , un marco CSS que prioriza la utilidad y está diseñado para crear rápidamente interfaces de usuario personalizadas. Al final, tendrás una base que puedes usar para desarrollar aún más una aplicación Laravel usando Tailwind CSS para el frontend y Sail para el entorno de desarrollo.

Si prefieres seguir desde una base de código existente en lugar de crear el proyecto desde cero, puedes acceder al código de la aplicación de demostración terminada en do-community/laravel-tailwind-starter en GitHub.

Prerrequisitos

Si bien el código compartido en esta guía debería funcionar sin problemas en varios entornos y sistemas, las instrucciones explicadas aquí se probaron en un sistema local Ubuntu 20.04 que ejecuta Docker y Docker Compose. Independientemente de su sistema operativo base, esto es lo que deberá configurar para comenzar:

• Docker instalado en tu máquina local. Si estás usando Ubuntu 20.04, puedes seguir los pasos 1 y 2 de Cómo instalar y usar Docker en Ubuntu 20.04 para configurarlo. Los usuarios de Windows y MacOS deben instalar Docker Desktop .
• Docker Compose instalado en tu máquina local. Docker Compose viene incluido de forma predeterminada con Docker Desktop para sistemas Windows y MacOS, pero los usuarios de Linux deben instalar el ejecutable Compose siguiendo el Paso 1 de Cómo instalar y usar Docker Compose en Ubuntu 20.04 .
• Un editor de código para PHP (opcional). Un editor de código ayuda a que el código sea más fácil de leer y formatear, y puede mejorar tu productividad al señalar problemas antes de ejecutar el código. Puedes seguir nuestra guía sobre Cómo configurar Visual Studio Code para proyectos PHP para configurar VSCode, un editor de código gratuito, dentro de tu entorno de desarrollo local.

Paso 1: creación de una nueva aplicación Laravel mediante el script Laravel Builder

Para comenzar, deberá descargar y ejecutar el script de compilación oficial de Laravel, que extraerá las imágenes de contenedor de Docker necesarias para compilar su entorno de desarrollo y luego iniciará una nueva aplicación en su carpeta actual. Este método de instalación no requiere que tenga PHP instalado en su sistema, solo requiere que descargue y ejecute el script de compilación que configurará el entorno de Docker donde puede ejecutar el instalador real de Laravel.

Al final, el script solicita tu sudocontraseña para asegurarte de que la carpeta de la aplicación tiene los permisos correctos para el usuario de tu sistema. Puedes acceder a la URL del script desde tu navegador para verificar su contenido antes de ejecutar el siguiente comando. En este ejemplo, usamos el nombremi aplicación, pero eres libre de reemplazarlo con un nombre diferente:

curl -s https://laravel.build/myapp | bash

OutputUnable to find image 'laravelsail/php80-composer:latest' locallylatest: Pulling from laravelsail/php80-composer852e50cd189d: Pull complete 0266fc315b01: Pull complete …Application ready! Build something amazing.Sail scaffolding installed successfully. Please provide your password so we can make some final adjustments to your application's permissions. [sudo] password for sammy:  Thank you! We hope you build something incredible. Dive in with: cd myapp  ./vendor/bin/sail up

Una vez finalizada la instalación, acceda al nuevo directorio de la aplicación y active el entorno Sail con:

cd myapp
./vendor/bin/sail up

Esto activará el entorno en primer plano, de modo que puedas hacer un seguimiento de los registros de todos los contenedores en ejecución. Verás que se inician algunos servicios diferentes que utilizan distintos puertos para comunicarse entre sí:

Output...mailhog_1 | [HTTP] Binding to address: 0.0.0.0:8025...laravel.test_1 | Starting Laravel development server: http://0.0.0.0:80...meilisearch_1 | Server listening on: "http://0.0.0.0:7700"...mysql_1 | 2021-06-23T01:15:24.327234Z 0 [System] [MY-010931] [Server] /usr/sbin/mysqld: ready for connections. Version: '8.0.25' socket: '/var/run/mysqld/mysqld.sock' port: 3306 MySQL Community Server - GPL....selenium_1 | 01:14:57.417 INFO [SeleniumServer.boot] - Selenium Server is up and running on port 4444...redis_1 | 1:M 23 Jun 2021 01:14:54.243 * Running mode=standalone, port=6379.…

Se trata de servicios configurados por defecto dentro de los entornos Sail. Para más información sobre cada uno de ellos, consulta la documentación oficial de Sail .

A continuación, accede a la aplicación desde tu navegador en:

http://localhost

Si todos los pasos fueron exitosos, verás una página como esta:

La aplicación ya está iniciada.

Ahora puedes detener el entorno Sail que se está ejecutando en tu terminal escribiendo CTRL+C.

Paso 2: uso de Laravel Sail

Laravel Sail ofrece varios atajos para administrar el entorno de desarrollo. La mayoría de los comandos y argumentos se basan en la API predeterminada de Docker Compose.

Controlar el medio ambiente

Para poner el entorno en modo de segundo plano, puedes ejecutar:

./vendor/bin/sail up -d

Para detener un entorno Sail que se inició previamente en modo de segundo plano, ejecute:

./vendor/bin/sail stop

Esto no eliminará las redes o volúmenes conectados.

Para recuperar un entorno que se detuvo previamente con un sail stopcomando, puede usar:

./vendor/bin/sail start

Para detener un entorno y también eliminar todos los recursos asociados , como volúmenes y redes, puede utilizar el sail downcomando. Tenga en cuenta que este comando eliminará todos los datos que se hayan creado previamente y que solo estén disponibles dentro de los contenedores, como los registros almacenados en una base de datos.

./vendor/bin/sail down

OutputStopping laravel-tailwind-starter_laravel.test_1 ... doneStopping laravel-tailwind-starter_redis_1        ... doneStopping laravel-tailwind-starter_selenium_1     ... doneStopping laravel-tailwind-starter_mysql_1        ... doneStopping laravel-tailwind-starter_mailhog_1      ... doneStopping laravel-tailwind-starter_meilisearch_1  ... doneRemoving laravel-tailwind-starter_laravel.test_1 ... doneRemoving laravel-tailwind-starter_redis_1        ... doneRemoving laravel-tailwind-starter_selenium_1     ... doneRemoving laravel-tailwind-starter_mysql_1        ... doneRemoving laravel-tailwind-starter_mailhog_1      ... doneRemoving laravel-tailwind-starter_meilisearch_1  ... doneRemoving network laravel-tailwind-starter_sail

Comprobación de estado y registros

Si su entorno no funciona, vuelva a activarlo con:

./vendor/bin/sail up -d

Cuando su entorno esté en funcionamiento, puede comprobar el estado de todos los contenedores activos con:

./vendor/bin/sail ps

Output           Name                         Command                  State                              Ports                        ---------------------------------------------------------------------------------------------------------------------------------myapp_laravel.test_1   start-container                  Up             0.0.0.0:80-80/tcp,:::80-80/tcp, 8000/tcp          myapp_mailhog_1        MailHog                          Up             0.0.0.0:1025-1025/tcp,:::1025-1025/tcp,                                                                                        0.0.0.0:8025-8025/tcp,:::8025-8025/tcp            myapp_meilisearch_1    tini -- /bin/sh -c ./meili ...   Up (healthy)   0.0.0.0:7700-7700/tcp,:::7700-7700/tcp            myapp_mysql_1          docker-entrypoint.sh mysqld      Up (healthy)   0.0.0.0:3306-3306/tcp,:::3306-3306/tcp, 33060/tcp myapp_redis_1          docker-entrypoint.sh redis ...   Up (healthy)   0.0.0.0:6379-6379/tcp,:::6379-6379/tcp            myapp_selenium_1       /opt/bin/entry_point.sh          Up             4444/tcp                                        

El resultado del sail pscomando le indicará qué contenedores relacionados con ese entorno específico están activos actualmente, qué puertos se están redirigiendo y, lo que es más importante, en qué estado se encuentra cada contenedor. En el resultado del ejemplo anterior, todos los servicios están activos.

Para comprobar los registros de los contenedores cuando ejecuta su entorno en modo de segundo plano, puede utilizar:

./vendor/bin/sail logs

Esto le mostrará los últimos registros de todos los servicios.

Attaching to laravel-tailwind-starter_laravel.test_1, laravel-tailwind-starter_mailhog_1, laravel-tailwind-starter_mysql_1, laravel-tailwind-starter_redis_1, laravel-tailwind-starter_selenium_1, laravel-tailwind-starter_meilisearch_1...mysql_1         | 2021-06-24T15:08:06.435530Z 0 [System] [MY-010931] [Server] /usr/sbin/mysqld: ready for connections. Version: '8.0.25'  socket: '/var/run/mysqld/mysqld.sock'  port: 3306  MySQL Community Server - GPL....meilisearch_1   | [2021-06-24T15:16:38Z INFO  actix_web::middleware::logger] 127.0.0.1:60874 "GET /health HTTP/1.1" 200 22 "-" "Wget" 0.000056...laravel.test_1  | [Thu Jun 24 15:08:07 2021] PHP 8.0.7 Development Server (http://0.0.0.0:80) started... selenium_1      | 15:08:06.864 INFO [SeleniumServer.boot] - Selenium Server is up and running on port 4444...redis_1         | 1:M 24 Jun 2021 15:08:05.280 * Ready to accept connections...mailhog_1       | 2021/06/24 15:08:05 Serving under http://0.0.0.0:8025/

También puede ver registros por servicio proporcionando un argumento adicional a la llamada del comando:

./vendor/bin/sail logs redis

OutputAttaching to laravel-tailwind-starter_redis_1redis_1         | 1:C 24 Jun 2021 15:08:05.278 # oO0OoO0OoO0Oo Redis is starting oO0OoO0OoO0Ooredis_1         | 1:C 24 Jun 2021 15:08:05.278 # Redis version=6.2.4, bits=64, commit=00000000, modified=0, pid=1, just started...redis_1         | 1:M 24 Jun 2021 15:08:05.280 * RDB memory usage when created 0.77 Mbredis_1         | 1:M 24 Jun 2021 15:08:05.280 * DB loaded from disk: 0.000 secondsredis_1         | 1:M 24 Jun 2021 15:08:05.280 * Ready to accept connections

Artesano y compositor corredor

Mientras trabajas en tu aplicación Laravel, a menudo se te pedirá que ejecutes artisancomandos para compilar, probar y administrar tu aplicación. También necesitarás ejecutar composercomandos para administrar tus dependencias PHP. Además de la API de Docker Compose predeterminada, Sail ofrece atajos útiles para ejecutar estos comandos en el contenedor de tu aplicación ( myapp_laravel.test_1en la salida del ejemplo). Con una configuración normal de Docker Compose, ejecutar Artisan se vería así:

Solo con Docker Compose

docker-compose exec app php artisan

Con Sail, la llamada equivalente se acorta a:

Artesano corriendo con vela

./vendor/bin/sail artisan

Puedes ejecutar Composer de manera similar:

Compositor corriendo con vela

./vendor/bin/sail composer

Para obtener más información sobre todas las características y comandos disponibles, visita la documentación oficial de Laravel Sail .

Ya está familiarizado con la forma de administrar su entorno de desarrollo de Sail y cómo ejecutar comandos en el contenedor de la aplicación. En el siguiente paso, configurará Tailwind CSS para diseñar y dar estilo a su página de destino.

Paso 3: Configuración de Tailwind CSS con Laravel

A continuación, instalará y configurará Tailwind CSS para crear una página de destino.

Asegúrese de que su entorno Sail esté en funcionamiento, luego instale las dependencias del frontend de Laravel con el npmcomando, que se utiliza para descargar y administrar paquetes de JavaScript:

./vendor/bin/sail npm install

Output...added 1327 packages, and audited 1328 packages in 20s 99 packages are looking for funding  run `npm fund` for details... 

Luego, instale Tailwind y sus dependencias con:

./vendor/bin/sail npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

Output...added 9 packages, removed 22 packages, changed 7 packages, and audited 1315 packages in 5s 99 packages are looking for funding  run `npm fund` for details...

A continuación, deberá crear un archivo de configuración para Tailwind. Para ello, utilizará npx, que significa Node package executiver y le permite ejecutar un paquete de Node. El siguiente npxcomando generará una nueva configuración predeterminada de Tailwind para su aplicación:

./vendor/bin/sail npx tailwindcss init

Esto creará un nuevo archivo de configuración llamado tailwind.config.jsen el directorio raíz de su proyecto con el siguiente contenido:

tailwind.config.js

module.exports = {  purge: [],  darkMode: false, // or 'media' or 'class'  theme: {    extend: {},  },  variants: {    extend: {},  },  plugins: [],}

Si bien existen diferentes formas de configurar Tailwind dentro de un proyecto, en esta guía configuraremos Tailwind con Laravel Mix y webpack . Ambas bibliotecas se utilizan para compilar y generar recursos de front-end.

Abra el archivo webpack.mix.jscon su editor de código. Se verá así:

mix.js('resources/js/app.js', 'public/js')    .postCss('resources/css/app.css', 'public/css', [        //    ]);

Laravel Mix utiliza PostCSS para compilar recursos CSS. Elimine los //caracteres e incluya la siguiente línea resaltada, que agregará Tailwind CSS a la lista de recursos CSS para procesar:

Elimina los //caracteres e incluye la siguiente línea resaltada, que requiere Tailwind como complemento PostCSS:

paquete web.mix.js

  mix.js("resources/js/app.js", "public/js")    .postCss("resources/css/app.css", "public/css", [     require("tailwindcss"),    ]);

Guarde el archivo después de realizar este cambio.

A continuación, incluya Tailwind en el archivo CSS principal de la aplicación. Ábralo resources/css/app.cssen su editor de código y agregue las siguientes 3 líneas a este archivo:

recursos/css/app.css

@tailwind base;@tailwind components;@tailwind utilities;

Guardar cuando haya terminado.

A continuación, deberá crear los activos del frontend con NPM:

./vendor/bin/sail npm run dev

Recibirá un resultado similar al siguiente, con una línea como la Compiled Successfullyparte resaltada que indica que ha integrado todos los componentes en su entorno Sail:

Output                        Laravel Mix v6.0.24                         ✔ Compiled Successfully in 5515ms┌───────────────────────────────────────────────────────────────────┬──────────┐│                                                          File │ Size │├───────────────────────────────────────────────────────────────────┼──────────┤│                                                    /js/app.js │ 597 KiB  ││                                                   css/app.css │ 3.81 MiB │└───────────────────────────────────────────────────────────────────┴──────────┘webpack compiled successfully

Tailwind ya está configurado y has creado los recursos frontend para tu sitio… En el siguiente paso, crearás una nueva página de destino para tu aplicación.

Paso 4: creación de una página de destino

Una vez que hayas configurado Tailwind, ya puedes comenzar a crear las vistas frontales de tu aplicación. En Laravel, las plantillas se almacenan normalmente en el resources/viewsdirectorio . La página que viste antes al abrir la aplicación desde un navegador ( http://localhost) está definida en una única plantilla llamada welcome.blade.php, en ese directorio.

En su editor de código, abra un nuevo archivo llamado index.blade.phpen el resources/viewsdirectorio.

La siguiente plantilla de ejemplo define una página HTML “sobre mí” con algunos elementos sin estilo. Utiliza una imagen de avatar de ejemplo , pero puedes reemplazarla con una imagen propia.

Cree un nuevo imgdirectorio en la carpeta de la aplicación pública:

mkdir public/img

Guarde su imagen preferida en este nuevo directorio, con el nombre profile_image.png.

En el siguiente ejemplo, observe el uso de las {{ asset… }}líneas auxiliares resaltadas para definir rutas tanto para los archivos CSS como para los archivos de imagen. Esta función genera la ruta pública correcta para los recursos de la aplicación ubicados en el publicdirectorio.

Copia este contenido en el tuyo index.blade.php:

recursos/vistas/index.blade.php

!doctype htmlhtmlhead    meta charset="utf-8"    titleSammy the Shark - About Page/title    meta name="description" content="My Application Description"    meta name="author" content="Sammy"    meta name="viewport" content="width=device-width, initial-scale=1.0" /    link href="{{ asset('css/app.css') }}" rel="stylesheet"/headbodydiv    img src="{{ asset('img/profile_image.png') }}" alt="avatar"/    h1Sammy the Shark/h1    pContent Creator/p    pHello, I'm Sammy. I am a friendly shark interested in Linux, coding, and community.        You can find out more about me in the following links:/p    div        diva href="https://twitter.com/digitalocean"Twitter/a/div        diva href="https://www.linkedin.com/company/digitalocean"LinkedIn/a/div        diva href="https://instagram.com/thedigitalocean"Instagram/a/div    /div/div/body/html

Guarde el archivo cuando haya terminado de editar su contenido.

Ahora edita el routes/web.phparchivo para modificar la ruta principal de modo que use la plantilla recién creada. Abre ese archivo con tu editor de código y reemplaza welcomecon indexpara cambiar la vista que usa el punto final de la aplicación principal. Así es como se verá la declaración de ruta actualizada una vez que hayas terminado:

rutas/web.php

Route::get('/', function () {    return view('index');});

Guarde el archivo. Ahora puede volver a cargar la página de la aplicación en su navegador para ver la nueva página de índice. Verá una página como esta:

De forma predeterminada, Tailwind elimina todo el estilo de los elementos, lo que te da la libertad de crear tus vistas combinando y mezclando las clases de utilidad CSS de Tailwind . En la siguiente sección, aprenderás a combinar algunas de estas clases de utilidad para crear una página “sobre mí” responsiva.

Paso 5: Cómo darle estilo a tu página de destino con Tailwind CSS

La creación de páginas responsivas es un requisito importante del desarrollo frontend, ya que los usuarios pueden acceder a su sitio web o aplicación desde muchos dispositivos diferentes, cada uno con diferentes tamaños de pantalla.

Tailwind ofrece selectores que pueden aplicar estilos por tamaño de pantalla. De esta manera, puedes crear contenedores responsivos configurando el ancho más pequeño como predeterminado y agregando los tamaños responsivos adicionales para pantallas más grandes. Por ejemplo, un conjunto de elementos con class="w-3/4 lg:w-1/2"establecerá un ancho predeterminado de 3 cuartos del ancho del elemento principal, que será válido para pantallas más pequeñas, pero para pantallas más grandes ( lg:selector), utilizará la mitad del ancho del elemento principal.

Tenga en cuenta que puede combinar los selectores responsivos con cualquier clase de utilidad, no solo las asociadas con el tamaño de un elemento. Puede, por ejemplo, ocultar un elemento en un punto de interrupción determinado, cambiar sus colores o incluso convertirlo en una cuadrícula con una cantidad variable de columnas.

Puede encontrar todos los selectores responsivos disponibles y sus puntos de ruptura equivalentes en la documentación oficial de Tailwind .

La siguiente plantilla configura un área de contenido adaptable en el centro de la página, utilizando gradientes de fondo y una imagen de avatar de ejemplo. Para los botones, utiliza un sistema de flujo de cuadrícula que dividirá el contenedor en tres columnas a partir de pantallas medianas, pero hará que los botones ocupen todo el tamaño del contenedor cuando se acceda a la página desde pantallas más pequeñas.

Abra el resources/views/index.blade.phparchivo que creó en el paso anterior en su editor de código y reemplace el contenido con la siguiente plantilla:

recursos/vistas/index.blade.php

!doctype htmlhtmlhead    meta charset="utf-8"    titleSammy the Shark - About Page/title    meta name="description" content="My Application Description"    meta name="author" content="Sammy"    meta name="viewport" content="width=device-width, initial-scale=1.0" /    link href="{{ asset('css/app.css') }}" rel="stylesheet"/headbody div    img src="{{ asset('img/profile_image.png') }}" alt="avatar"/    h1Sammy the Shark/h1    pContent Creator/p    pHello, I'm Sammy. I am a friendly shark interested in Linux, coding, and community.        You can find out more about me in the following links:/p     div        diva href="https://twitter.com/digitalocean"Twitter/a/div        diva href="https://www.linkedin.com/company/digitalocean"LinkedIn/a/div        diva href="https://instagram.com/thedigitalocean"Instagram/a/div    /div /div/body/html

Esta plantilla producirá la siguiente página:

Y así es como la página se adapta a diferentes tamaños de pantalla:

En la plantilla actualizada, cada elemento HTML tiene una serie de clases y selectores de Tailwind aplicados a ellos. Tailwind utiliza una nomenclatura específica para sus clases de utilidad para crear diseños adaptables. Cada uno de los siguientes elementos se utiliza en la plantilla de ejemplo para crear el resultado final:

• bg-gradient-to-r: crea un degradado de izquierda a derecha , utilizando los colores especificados.
• w-1/3: establece el ancho del elemento en un tercio ( 1/3 ) del ancho del elemento principal. Hay muchas formas diferentes de configurar el ancho de un elemento dentro de Tailwind.
• mx-auto:centra el elemento.
• rounded-md: crea esquinas redondeadas , de tamaño “mediano” (md).
• shadow-lg: crea un efecto de sombra , de tamaño “grande” (lg).
• mr-*y otras mvariantes: se utiliza para configurar los márgenes de un elemento .
• pb-*y otras pvariantes: se utiliza para configurar el relleno de un elemento .
• hover:bg-blue-700: cambia el color de fondo del elemento seleccionado al pasar el mouse sobre él .

Consulte la documentación oficial de Tailwind para obtener una referencia completa de todas las clases de utilidad disponibles.

Conclusión

En este tutorial, creaste una nueva aplicación Laravel con Laravel Sail y Tailwind CSS. También creaste una página de inicio “sobre mí” responsiva con las potentes clases de utilidad de Tailwind.

Si desea crear una página de destino más compleja y aprender más sobre Tailwind en el proceso, puede seguir nuestra guía sobre Cómo crear una página de destino con estilo con Tailwind CSS para obtener instrucciones detalladas sobre cómo crear una página de sitio web completa con este marco.

Si desea obtener más información sobre Laravel en una guía basada en proyectos, puede consultar nuestra serie Cómo crear una página de destino con enlaces en PHP con Laravel . Para obtener más contenido sobre PHP, consulte nuestra etiqueta PHP .