Introducci贸n a Jetstream

2/20
Recursos

Aportes 7

Preguntas 3

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

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 鈥淐oloque 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 鈥渃rt/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