DEV Community: Brian Dillingham

Jetstream / Inertia redirect login with axios & intended

Brian Dillingham — Thu, 14 Oct 2021 10:55:29 +0000

If you have to use axios and need to catch 401 errors (unauthorized) and redirect to login but want to redirect back: simply route an inertia request to the current url and it will handle routing to login and set intended in the session

.catch(errors => {
    if (errors.response && errors.response.status === 401) {
        this.$inertia.get(window.location)
    }
})

Laravel Assert Inertia Values

Brian Dillingham — Tue, 27 Apr 2021 00:04:18 +0000

After hunting around Google and Github without finding a clear way to assert the values returned from Inertia::render the same way you can with a blade view, assertViewHas, I realized Inertia is returning a $page variable with the props. Because of this, we can drill down to the value we want to assert since assertViewHas accepts dot notation.

Post::factory(10)->create();

$this->get('/posts')
    ->assertViewHas('page.props.posts.data', function($posts) {
        return count($posts) == 10;
    });

Note: Im paginating $posts, otherwise .data is not needed

The 8th Missing Resource Route in the CRUD Pattern

Brian Dillingham — Fri, 12 Mar 2021 02:24:07 +0000

Conventions are patterns we or others have established as generally good ways of doing things. We save a lot of time when we reduce the amount of decisions we have to make and thought put into things by using conventions.

I stumbled upon Laravel early in my software career and every convention was better than what I was doing. And years later, those conventions still serve me well. Laravel was first to introduce me to the 7 resourceful routes convention.

If you're not familiar, this pattern is 7 endpoints you generally code for a "resource" to Create, Read, Update and Delete. Here is a table to illustrate a "Post" resource and the HTTP verbs following this convention:

Verb	URI	Action	Description
GET	`/posts`	index	show list of posts
GET	`/posts/create`	create	show create form
POST	`/posts`	store	process create form
GET	`/posts/{id}`	show	display single post
GET	`/posts/{id}/edit`	edit	show edit form
PUT/PATCH	`/posts/{id}`	update	process edit form
DELETE	`/posts/{id}`	destroy	process delete request

Following this convention has saved me so much time. Naming and structuring things can be a huge time eater. If the "resource" doesn't fit 100% into that convention, I usually can break out a new resource and continue the CRUD convention. Adam Wathan gave a great talk about this in Laracon 2017.

The Problem

The problem is DELETE. Every app I work on I spend time thinking of confirmations when allowing users to delete things. Each app has had slightly different UI approaches which can be a time eater because design is very subjective. So I wanted to explore this because again.. conventions save us time and I'm feeling some friction without a standardized approach.

The Missing Endpoint

What I have come to think is that maybe there is a missing endpoint in this convention and adding one might be the answer. What if the destroy action had a GET endpoint which could be used to display a confirmation page, accept a password confirmation, retrieve data related to the delete etc

Verb	URI	Action	Description
GET	`/posts/{id}/delete`	remove	show delete confirmation
DELETE	`/posts/{id}/delete`	destroy	process delete request

edit -> update | create -> store | remove -> destroy

For such a small change, it really creates a positive impact. I have implemented this in a few projects and noticed the friction not only gone, but it cleans up my code quite a bit. Here are the benefits I noticed:

Benefits

Link to the delete route from anywhere within or outside the codebase
A dedicated endpoint if any data is needed to populate confirmation message: "you're about to delete 1,253 related records"

More thought

Both the store and update actions, (the other 2 endpoints that affect change in the database) have a corresponding GET route before performing the actions. This makes sense because they need an endpoint to accept inputs. But for sensitive data, so does destroy.. a password confirmation.

Conclusion

Not every convention is going to work for everything, including this one. I think this idea has some benefits, but it really just depends about your project. I wrote this to just share an idea incase others share in my experience and want another convention to consider.

Let's connect on Twitter, I mostly tweet Laravel stuff.

https://twitter.com/im_brian_d

Laravel Jetstream: From blade to using Inertia & Vue

Brian Dillingham — Wed, 10 Mar 2021 03:43:01 +0000

Laravel Jetstream + Inertia is an amazing foundation for building modern apps using Vue (auth, basic ui kit) without the struggles of SPA. This article assumes you followed the installation steps on Laravel Jetstream's website for Inertia and you are ready to jump in but you're a little new to Inertia or Vue.

How do I work with Inertia?

Inertia may seem very different at first, but nothing actually changes with how you think about things like routes, controllers and views within Laravel. You still add a route to web.php, point it to a controller and return a view.

The main difference is that you return Inertia::render() from a controller. This response will ultimately render a Vue component and pass it data defined in our Laravel controllers.. solving a complexity of using Vue + Laravel.

Route::get('posts', 'PostsController@index')->name('posts.index');

public function index()
{
    $posts = Post::all();

    return Inertia::render('Posts/Index', [
        'posts' => $posts
    ]);
}

Where do I put views?

There is a resources/js/Pages folder created when you installed Jetstream. Add Posts/Index.vue within that folder to handle Inertia::render('Posts/Index'). Similar to view('posts.index')

Where are my changes when I refresh?

Since we are using Vue, we need to compile our vue components / pages or the changes we make in .vue files will not show in the browser. It basically just means npm install to install dependencies and npm run watch to watch files for changes and re-compile. Luckily Laravel makes this user friendly. docs

How do I access the view data?

The vue component will automatically receive the data we added to Inertia::render() within our controller just like when we say view()->with(). The key differences are we need to add each variable as a property in props so vue is aware and use vue's template syntax instead of Blade.

resources/js/Pages/Posts/Index.vue

<template>
    <app-layout>
        <template #header>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                Posts
            </h2>
        </template>

        <div>
            <div class="max-w-7xl mx-auto py-10 sm:px-6 lg:px-8">
                <div v-for="post in posts" :key="post.id">
                    {{ post.title }}
                </div>
            </div>
        </div>
    </app-layout>
</template>

<script>
import AppLayout from '@/Layouts/AppLayout'

export default {
    props: ['posts'],

    components: {
        AppLayout
    },
}
</script>

What is the @ in the import? It's an alias defined in webpack.mix.js
What is #header? Shorthand for Vue's component slot

What is `<app-layout>`?

Jetstream comes with a lot of really useful vue components for things like form elements and modals, located in resources/js/Jetstream, but <app-layout> is in resources/js/Layouts and is the main shell that renders this:

Adding your content within this vue component means you'll automatically have navigation in place and a nice starting point for your layout.

How do I link to my page?

Jetstream installs Ziggy to handle using named routes within Inertia / Vue. Using Ziggy's route method & the <inertia-link> component:

<inertia-link :href="route('posts.index')">
    Posts
</inertia-link>

To add a link to the main navigation within the <app-layout>, open the layout file within resources/js/Layouts/App.vue and add a link:

<!-- Navigation Links -->
<div class="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex">
    <jet-nav-link :href="route('dashboard')" :active="route().current('dashboard')">
        Dashboard
    </jet-nav-link>

    <jet-nav-link :href="route('posts.index')" :active="route().current('posts.index')">
        Posts
    </jet-nav-link>
</div>

(<jet-nav-link> is a component in resources/js/Jetstream)

How do I submit forms?

Inertia provides a really helpful way of using ajax to submit forms. First, use v-model to connect your inputs to the vue state defined in the data() section of your vue component and call a method using the @submit event handler.

<template>
  <form @submit.prevent="submit">
    <label for="title">Title:</label>
    <input id="title" v-model="form.title" />
    <label for="body">Body:</label>
    <input id="body" v-model="form.body" />
    <button type="submit">Submit</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        title: null,
        body: null
      },
    }
  },
  methods: {
    submit() {
      this.$inertia.post('/posts', this.form)
    },
  },
}
</script>

How does Inertia render Vue?

Laravel Jetstream sets the root view to app.blade.php in app/Http/Middleware/HandleInertiaRequests which is rendering:

<body class="font-sans antialiased">
   @inertia
</body>

Which is outputting the root div Vue will attach to and passing it data:

<div id="app" data-page="{{ json_encode($page) }}"></div>

How is resources/js/Pages defined?

This mapping happens in resources/app.js

resolveComponent: (name) => require(`./Pages/${name}`).default,

Conclusion

Hope you found that helpful. I plan to write more about Jetstream as I find it to be extremely powerful. If you have feedback, I'd love to hear it on twitter.

https://twitter.com/dillingham_dev

DEV Community: Brian Dillingham

Jetstream / Inertia redirect login with axios & intended

Laravel Assert Inertia Values

The 8th Missing Resource Route in the CRUD Pattern

The Problem

The Missing Endpoint

Benefits

More thought

Conclusion

Laravel Jetstream: From blade to using Inertia & Vue

How do I work with Inertia?

Where do I put views?

Where are my changes when I refresh?

How do I access the view data?

What is <app-layout>?

How do I link to my page?

How do I submit forms?

How does Inertia render Vue?

How is resources/js/Pages defined?

Conclusion

What is `<app-layout>`?