Jetstream: configuración inicial

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

Carlos Eduardo Gomez García

teacher•

Al parecer hubo una actualización de Laravel 8 en donde la vista "welcome.blade.php" fue convertida en un componente de Vue y ya no la podrán encontrar dentro de la carpeta Vue, pero no se preocupen por eso, para seguir el curso pueden crear el archivo index.blade.php dentro de la carpeta "views" y pegar el siguiente código (que es el código que debería de estar dentro de ese archivo, es la vista del index): . Código del index.blade.php . Cambiando de tema, por si no quedó claro, una ruta de recursos básicamente te crea 7 rutas de manera automágica para que puedas servir todas las rutas que una aplicación web debe tener: .

index: Muestra una lista de los recursos disponibles
create: Muestra la vista del formulario para la creación de un nuevo recurso
store: Crea un nuevo recurso en la base de datos
show: Muestra un recurso en específico
edit: Muestra el formulario para editar un recurso
update: Edita un recurso en la base de datos
destroy: Elimina un recurso

Franz Eduardo Tejada Valencia

student•

Cuando se crea el archivo index.blade.php en la actualización de Laravel que mencionas, dejan de funcionar los links Login y Register, ¿que se puede hacer al respecto?

Carlos Eduardo Gomez García

teacher•

Que extraño, sé que han estado metiendo algunas actualizaciones a Laravel 8, pero cuando yo hice el proyecto, dichas rutas aún funcionaban, yo te recomendaría más clonar el proyecto del profesor y hacer un git reset hacia el primer commit para ir a la par y tener los mismos archivos que el profesor 🤔

Jose Mauricio Rubio Villatoro

student•

Otra forma para colocar la ruta también puede ser

// En la parte superior
use App\Http\Controllers\PageController;


Route::get('dashboard', [PageController::class, 'dashboard'])
->middleware('auth:sanctum')
->name('dashboard');

María Sierra

student•

Jetstream: configuración inicial

El sistema de Jestream nos dice como vamos a trabajar del lado del front-end.

Por alguna razón en Laravel 8x cambiaron la vista "welcome.blade.php", y ahora está en la carpeta donde están los componentes de Vue. Para solucionarlo, puedes ir al repo de Github y copiar este archivo.

Alonso Diaz Gutierrez

student•

Hola a todos! Al parecer con laravel 10 (Estoy haciendo este curso en Abril 2023), podemos usar la siguente estructura para seguir el tutorial del profe Italo sin agregar archivos adicionales de blade:

En el archivo web.php encontraran la siguiente informacion:

Route::middleware([
    'auth:sanctum',
    config('jetstream.auth_session'),
    'verified',
])->group(function () {
    Route::get('/dashboard', function () {
        return Inertia::render('Dashboard');
    })->name('dashboard');
});

Unicamente se debera cambiar delante de Route::get de la siguiente forma:

Route::middleware([
    'auth:sanctum',
    config('jetstream.auth_session'),
    'verified',
])->group(function () {
   Route::get('/dashboard', [\App\Http\Controllers\PageController::class, 'dashboard'])
    ->name('dashboard');
});

Con esto dentro del archivo PageController debera ser la misma estructura que muestra el profesor en el video!

Lo pongo porque me revolvia un poco como debia agregarse, espero le sea util a alguien mas!

Rodolfo Rohatan Bassil

student•

hola, tambien estoy usando laravel 10, una pregunta en el cotrolador no se realiza ningun cambi?

Francisco Hernandez

student•

Pueden ordenar las rutas de esta forma que pondre abajo, así evitan ponerle ->middleware() a todas las rutas.

Route::middleware('auth:sanctum')->group(function () {

    Route::get('dashboard', [PageController::class, 'dashboard'])->name('dashboard');

    Route::resource('notes',NoteController::class);

});

David Castro

student•

Francisco gracias por el aporte. Disculpe mi desconocimiento, osea que lo que dices es que escribiendo el código con el Route::middleware en la primera línea, de alguna manera, funciona "conteniendo" a las demás rutas? y su propiedad de seguridad se le aplica automáticamente a todas?

Kenny Emmanuel Lajara Aquino

student•

No exactamente. Lo que esta haciendo es creando un middleware y dentro del metodo group (grupo) pone una funcion dentro de la cual crea las rutas. De esa manera, el middleware se aplicara a todas las rutas que envuelve.

Omar Villafuerte

student•

Inertia::render('Dashboard')

👆 tener en cuenta, el nombre del componente es sensible a las mayúsculas y minúsculas, de lo contrario puede aparecer la pantalla en blanco, el error puede ser visto en devtools de su navegador 👀

!picture

Daniela Alarcón Gamboa

student•

No importa la ruta que vaya lo único que muestra mi pantalla es un: @vite('resources/js/app.js') Alguna idea? :(

Lucero Olivos Adasme

student•

Yo estoy en la misma y no entiendo porque aparece eso : ‘resources/js/app.js

una ayuda plis!!

Dave Juanes

student•

Pudieron resolverlo?

José Reinaldo Duque Serna

student•

También se puede usar la página Welcome.vue como index del sitio. Sólo es agregar la ruta en web.php

Route::get('/', [App\Http\Controllers\PageController::class, 'index']);

Y en el controlador PageController el método index:

 public function index()
    {
        //Renderiza Resources/js/Pages/Welcome.vue
        return inertia::render('Welcome');
    }

Andreina Di Brigida

student•

Asi fue como hice la configuracion del archivo web.php para laravel 9 en abril del 2023

Rodolfo Rohatan Bassil

student•

hola, estoy usando laravel 10, no me sale la vista welcome.blade.php, cree la index.blade.php y configure todo tal cual tu lo tienes y no me funciona el login.

Nelson Stevens Boada Muñoz

student•

Cuando habilite el servidor me apareció el siguiente error:

En el router fue necesario traer el use de Inertia:

y con eso funciono. Versión de laravel 8.40

Francisco Javier Cervantes Candelario

student•

Actualmente en laravel 8 ya no es necesario hacer esta configuración mencionada en el video. Ya viene configurada. :D

Jose Luis

student•

Buenas tardes tengo este problema al acceder a Login, me podrian ayudar ??

InvalidArgumentException View [app] not found.

app was not found. Are you sure the view exists and is a .blade.php file?

deiver frank david rengifo

student•

Compañero, es porque lo eliminaste o le cambiaste de nombre al archivo que decía app.blade.php, en el primer comentario de la sección de los aportes te aparece la respuesta

Cristobal Nyram

student•

jajaj no esta la respuesta

Brian Sánchez Izquierdo

student•

Cuando se crea un controlador como "Resource" (recurso) Laravel generará 7 métodos para el controlador especificado, éstos 7 métodos son para realizar operaciones CRUD básicas y mediante formularios.

David Castro

student•

Me gustó este pequeño resumen, gracias Bro.

David Alberto Torres Suarez

student•

¿Por qué algunas veces se pone "/" en las rutas y otras veces no? Ejemplo ('/dashboard')

Santiago Velásquez Serna

student•

Cuando vamos a tener varias rutas que tienen el mismo middleware, me gusta agruparlas. En este caso quedan así:

Route::middleware(['auth:sanctum', config('jetstream.auth_session'),])->group(function () {
    Route::get('/dashboard',
        [PageController::class, 'dashboard']
        )->name('dashboard');

    Route::resource('notes', NoteController::class);
});

Shirley Marisol Ramírez Peña

student•

No carga la vista no sale error, imprimì un texto si lo muestra y no carga la vista Dashboaard, alquien sabe q puede estar pasando. Este el còdigo.

use Inertia\Inertia;

public function dashboard(){

echo "entro";

return Inertia::render('Dashboard');

}

Yadhira Darline Condori Becerra

student•

Estimados, si están llevando recién el curso, hubo cambios en la estructura de los componentes al crear un proyecto laravel 8, en el web.php no borrar la linea require DIR_.'/auth.php' para que les funcione los formularios de login y register.

<?php use Illuminate\Support\Facades\Route; Route::view('/','index'); Route::get('dashboard', [App\Http\Controller\PageController::class, 'dashboard']) ->middleware('auth:sanctum') ->name('dashboard'); require __DIR__.'/auth.php';

Mauricio Avila Beltran

student•

En mi caso fallo la ejecución de npm usando homestead. Para solucionarlo pueden ejecutar los comando usando yarn

yarn install

yarn run dev

Es practicamente lo mismo y funciona perfecto

David Castro

student•

Gracias Mauricio, pero alguna diferencia deben tener. ¿Sabes especificamente cual es la diferencia en su funcionamiento? O ¿porque el npm falla en algunos casos?

Edgar Olayo

student•

amigos tengo una pregunta. Al querer visualizar mi proyecto en el navegador no arranca hasta que inicio el servidor artisan y en localhos no arranca. Cuando lo arranco de primera vez tarda en cargar 8 segundos. esto es normal????????????

Luis Cano

student•

Pues usando solo php artisan serve la primera vez si demora algunos segundos, entre 4 y 5 en mi caso, los inicios sucesivos son más rápidos, 1 o 2 segundos. Acabo de probar dos proyectos distintos usando Laravel 9 y PHP 8.1.

Route::middleware([
    'auth:sanctum',
    config('jetstream.auth_session'),
    'verified',
])->group(function () {
    Route::get('/dashboard', function () {
        return Inertia::render('Dashboard');
    })->name('dashboard');
});

Route::middleware([
    'auth:sanctum',
    config('jetstream.auth_session'),
    'verified',
])->group(function () {
   Route::get('/dashboard', [\App\Http\Controllers\PageController::class, 'dashboard'])
    ->name('dashboard');
});

Route::middleware(['auth:sanctum', config('jetstream.auth_session'),])->group(function () {
    Route::get('/dashboard',
        [PageController::class, 'dashboard']
        )->name('dashboard');

    Route::resource('notes', NoteController::class);
});

Jetstream: configuración inicial

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