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

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://curso-laravel-styde.local/static/notes.html podremos ver la plantilla para el listado de notas
Si abrimos en el navegador http://curso-laravel-styde.local/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. También podemos eliminar la vista welcome.blade.php puesto que no la utilizaremos.

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://curso-laravel-styde.local/ 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.

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/sass
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