En esta lección te voy a enseñar cómo copiar archivos de HTML y CSS estáticos a tu proyecto de Laravel. Para ello nos vamos a dirigir al directorio resources/views donde vamos a colocar las plantillas que usaremos para construir nuestra aplicación de notas.

Mira el código en GitHub: actual, resultado, comparación.

En el enlace que dice «actual» debajo del video podrás ver y descargar los archivos estáticos que usaremos para este curso, los cuales se encuentran en el directorio public/static

  • Si abrimos en el navegador http://127.0.0.1:8000/static/notes.html podremos ver la plantilla para el listado de notas
  • Si abrimos en el navegador http://127.0.0.1:8000/static/add-note.html podremos ver la plantilla que usaremos para agregar o editar notas.

Recuerda colocar la URL correcta de tu proyecto y por supuesto copiar los archivos estáticos a un directorio nuevo llamado static dentro de public

Comencemos copiando notes.html y pegándolo como notes.blade.php dentro del directorio resources/views.

Ahora desde routes/web.php en vez de retornar una cadena, retornaremos la vista notes, observa que no hace falta colocar la extensión .blade.php. Aprovechemos también de renombrar notas a / para que sea el homepage de nuestra app:

<?php

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

Ahora si nos dirigimos a http://127.0.0.1:8000/ deberíamos ver nuestro listado de notas estático, aunque sin estilos.

Para asegurarte de que podrás ver los estilos de forma correcta, cambia:

<!-- HTML -->
<link rel="stylesheet" href="/static/css/app.css"/>

Por:

<!-- HTML -->
<link rel="stylesheet" href="{{ asset('static/css/app.css') }}"/>

Procede a hacer los mismos pasos para copiar add-note.html como add-note.blade.php y cambiando la ruta para crear notas.

Si inspeccionas el código fuente podrás ver que el helper asset te permite crear un enlace absoluto a un archivo estático que esté dentro del directorio público de tu aplicación. Es decir el enlace va a cambiar dependiendo del dominio, IP o virtual host con el cual se ejecute la aplicación.

Puedes usar el helper asset para enlazar tanto archivos de CSS como archivos de JavaScript.

Con esto funcionando realicemos un par de pasos adicionales:

  • Copia el directorio public/static/css a public/css
  • Copia el directorio public/static/img a public/img
  • Copia los archivos dentro de public/static/scss a resources/scss
  • Asegúrate de cambiar {{ asset('static/css/app.css') }} a {{ asset('css/app.css') }} en ambas plantillas dentro de /resources/views
  • Prueba que puedes visualizar ambas plantillas correctamente
  • Finalmente elimina el directorio public/static

¡En la lección siguiente aprenderemos más sobre Blade, el motor de plantillas de Laravel!

Regístrate hoy en Styde y obtén acceso a todo nuestro contenido.

Lección anterior Rutas con parámetros dinámicos en Laravel 9 Lección siguiente Introducción a Blade el motor de plantillas de Laravel 9