Introducción a Jetstream

Clase 2 de 20 • Curso de Single Page Applications en Laravel con Inertia y Vue.js

María Sierra

student•

Introducción a Jetstream 🚀

Jetstream es un componente que nos permite incorporar el inicio de sesión, registro, verificación de email, etc, dentro de Laravel.

Y además podemos utilizar un sistema llamado Inertia.js que usa como motor de vista componentes de Vue.js. Todo diseñado con el Framework CSS de Tailwind.

laravel new peoject --jet

# Si queremos instalar después Jetstream
composer require laravel/jetstream

Dependiendo de que sistema utilicemos vamos a trabajar en una carpeta diferente:

Livewire → resources/views (trabajamos con Blade)
Inerta → resources/js (trabajamos con Vue)

Si utilizamos Inerta.js vamos a contar con el manejador de packages npm, y con estos comandos:

npm install → Para que se instalen todas las dependencias-
npm run dev → Con este creamos un solo JS con sus componentes.
npm run watch → Y si estamos haciendo cambios constantemente a ese JS utilizamos este comando.

Andrés Felipe Lopez gomez

student•

Muchas gracias

Carlos Eduardo Gomez García

teacher•

Blade es hermoso sí, Blade está bien... pero es que Vue ufff... en serio siento que Vue para front-end es algo único jaja, sobre todo por su sistema de componentes reactivos, se puede aplicar reactividad a un componente de Vue! . Por cierto, al igual que en el curso anterior, aquí les dejo la documentación oficial de Tailwind CSS: . https://tailwindcss.com/docs

Abel da Cunha

student•

gracias

RAYMUNDO ISAU CHAVEZ QUINTANA

student•

Carlos Roberto Villatoro Barrios

student•

Si estás trabajando en Windows y Xampp vamos a crear un dominio personalizado con SLL para tener un sitio seguro

Nos dirigimos a la ruta C:\xampp\apache\ y creamos la carpeta crt
dentro de la carpeta crt vamos a pegar archivo: -! -! 3.Editamos el archivo cert.conf, remplazando todos los {{DOMAIN}} por el dominio que deseamos en este caso site.test
Ejecutamos el archivo make-cert.bat dando doble clic y en el nombre del dominio que es la primera opción que aparece colocamos el mismo que configuramos en el archivo cert.conf (site.tes) todas las demás opciones las podemos dejar igual dando simplemente enter hasta finalizar NOTA: no debe modificar nada de make-cert.bat 5.Veremos que se a creado una carpeta nueva con el nombre de nuestro dominio, ingresamos a esta y encontremos 2 archivos, debemos ejecutar server.cert: -Damos clic en instalar certificado -Elegimos la opción de maquina local -Elegimos la opción de "Coloque todo el certificado en la siguiente tienda" y examinamos hasta encontrar "Autoridades de certificación raíz de confianza. -Damos clic en siguiente y finalizar Vamos a configurar nuestro dominio en Windows 6.nos dirigimos a C:\Windows\System32\drivers\etc\hosts el archivo hosts no lleva extensión como recomendación debemos modificar este archivo en Visual Studio Code para que no se agregue extensión, aquí únicamente en la parte de hasta abajo agregamos el localhost seguido de nuestro dominio -127.0.0.1 site.test 7.Añadimos el dominio a xampp conf. para esto nos dirigimos a C:\xampp\apache\conf\extra\httpd-xampp.conf y añadimos las siguientes lineas:

site.test

<VirtualHost *:80> DocumentRoot "C:/xampp/htdocs/site/public" ServerName site.test ServerAlias *.site.test </VirtualHost> <VirtualHost *:443> DocumentRoot "C:/xampp/htdocs/site/public" ServerName site.test ServerAlias *.site.test SSLEngine on SSLCertificateFile "crt/site.test/server.crt" SSLCertificateKeyFile "crt/site.test/server.key" </VirtualHost>

(Aquí debemos de remplazar site.test y las rutas de los archivos)

8.Reiniciamos xampp deteniendo el modulo de apache y MySQL detenemos y volvemos a correr.

y listo nuestro dominio personalizado ya estara corriendo con su certificado SSL dentro de nuestro entorno local. (recuerda en el archivo .env camiar la url del sitio por site.test) si aun así te sale sitio no seguro, pueba colocando https://site.test podras agregar cuantos dominios personalizados desees.

Paula Abad

student•

Super wow muchas gracias no sabia esto.

Edgar Ramón González Contreras

student•

Si alguien le muestra este error:

Class 'Inertia\Inertia' not found

Pueden ejecutar este comando

php artisan jetstream:install inertia

y les descargara de nuevo el paquete de inertia js.

Adrian Bautista Orozco

student•

Por eso me he enamorado de Laravel por la facil integracion con Vue, aunque he trabajaado Inertia con Breeze que un componente mas ligero que Jetstream.

Andrés Felipe Lopez gomez

student•

Si es verdad

Iván Palencia

student•

tengo laravel 9.49. Puedo relizar el curso con esta version? al correr el comando
$ laravel new project --jet me indica que el comando no se encuetra.

Luciano Javier Costa Peralta

student•

Hola uso WSL2 , tengo un problema. instalo el proyecto con

laravel new inertia --jet

Selecciono la opcion > 1 inertia

me instala correctamente, pero me salta este warning

Al realizar el comando

php artisan serve

E ir al localhost:8000

Me devuelve esta salida , el navegador , como que no soporta a vite . Y me trabo en el curso La migraciones , como base de datos esta todo correcto . Pero la ui no la puedo levantar .

Carlos Eduardo Gomez García

teacher•

¡Hola! Intenta esto:

Primero, instala Vite junto con su plugin para Laravel:

npm install --save-dev vite laravel-vite-plugin
npm install --save-dev @vitejs/plugin-vue

Por último, instala el resto de dependencias y mira si tu proyecto ya funciona :D

npm install
  
npm run dev
php artisan migrate

Luciano Javier Costa Peralta

student•

Me SALTA ESTO

Anyami Cornieles

student•

Una pregunta, ¿entonces no es posible integrar vue a un proyecto que ya está con blade?

Leonardo Gastelum Arce

student•

Cómo definimos el uso de Inertia y Vue sobre Livewire? Soy nuevo en todo esto :)

Rolando Natan Recinos Urrutia

student•

Haber si no me perdí. Cuando este trabajando en un proyecto para que me renderice los cambios basta con usar desde el principio el comando npm run watch? y asi no estaria corriendo por cada cambio npm run dev?

Carlos Eduardo Gomez García

teacher•

Así es, esto es porque Vue tiene que compilar todos los archivos .vue hacia archivo html normal, entonces, el comando npm run dev compila esto, pero tienes que ejecutarlo por cada vez que necesites cambiar algo, en cambio, npm run watch hace lo mismo, pero este se queda "observando" cada cambio que hagas para que no tengas que preocuparte de ejecutar el comando en cada cambio :D

Rolando Natan Recinos Urrutia

student•

Ohh algo tan sencillo, pero si no lo sabes, toca que estar corriendo npm run dev por cada cambio, como me pasaba en las practicas 😄. Gracias por responder.

Olivia Suarez Toribio

student•

¿como puedo indicarle "--jet" cuando creo el proyecto usando el composer?.....ejemplo: composer create-project laravel/laravel condor-app --jet

Juan David Gonzalez Revelo

student•

Primero creas tu proyecto Laravel de forma normal

composer create-project laravel/laravel condor-app

y cuando termine te mueves al proyecto e instalas jetstream

cd condor-app
composer require laravel/jetstream

Y en este caso despues indicas que quieres usar inertia

php artisan jetstream:install inertia

Pudes ver la documentacion de Jetstream

Olivia Suarez Toribio

student•

Muchas gracias

Dany Pascual Gomez Sanchez

student•

Deberían actualizar este curso con este docente.

HANSI HERNANDEZ LOPEZ

student•

Apenas he comenzado el curso, aunque ya conozco un poco del tema y la verdad es que explicas bastante bien.. Felicidades

Introducción a Jetstream

Introducción

Cómo aprenderás a crear SPAs en Laravel

Introducción a Jetstream

Proyecto

Conoce qué SPA vas a construir

Configuración inicial

Sistema basado en componentes

Jetstream: configuración inicial

Jetstream: personalización

Listado de notas: configuración inicial

Listado de notas: personalización

Vista detalle de nota

Formulario de editar

Código de actualizar

Formulario de crear

Código de guardar

Función de eliminar

Flash message

Buscador

Conclusión

Repaso final

Despedida

Clase bonus: nunca parar de aprender