Copiar plantillas de HTML y CSS estáticas a Laravel 9

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