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:

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:

Por:

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

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 6 Lección siguiente Introducción a Blade el motor de plantillas de Laravel 6