Introducción a Jetstream

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.

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

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.

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

1. Nos dirigimos a la ruta C:\xampp\apache\ y creamos la carpeta crt
2. 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
3. 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.

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.

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