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
apublic/css
- Copia el directorio
public/static/img
apublic/img
- Copia los archivos dentro de
public/static/scss
aresources/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