En esta lección aprenderás 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.
Accede a los archivos estáticos que usaremos para este curso, los cuales debes copiar al 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.
Ahora en routes/web.php en vez de retornar una cadena, retornaremos la vista que corresponda a cada ruta. Observa que no hace falta colocar la extensión .blade.php:
<?php
Route::get('/', function () {
return view('notes.index');
});
Para asegurarte de que podrás ver los estilos de forma correcta, cambia:
<!-- HTML --> <link rel="stylesheet" href="css/app.css"/>
Por:
<!-- HTML -->
<link rel="stylesheet" href="{{ asset('css/app.css') }}"/>
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 estás ejecutando tu aplicación.
Puedes usar el helper asset para enlazar tanto archivos de CSS como archivos de JavaScript.
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 10 Lección siguiente Introducción a Blade el motor de plantillas de Laravel 10