Many developers know that full-stack apps with a Vue frontend can be quickly spun up with Laravel Jetstream. What many don’t know is that recently, the Laravel team made it easy to make an Inertia app with Laravel Breeze. In this article, we'll make a simple Discord-like app called Twilcord” that will let multiple users join a room via a phone number or username. Instead of the default Vue frontend, we’ll be using React.
The Gist:
- After downloading and setting up Breeze in our project, we'll install the Inertia library for React by running
$ npm install @inertiajs/inertia-react. Then we'll import it and redo our app.js file, like so:
import {InertiaApp} from '@inertiajs/inertia-react'
import React from 'react'
import {render} from 'react-dom'
const app = document.getElementById('app')
render (
<InertiaApp
initialPage={JSON.parse(app.dataset.page)}
resolveComponent={name => import(`./Pages/${name}`).then(
module => module.default
)}
/>,
app
)
- We'll need to import Twilio's SDK by running
composer require twilio/sdk and ensure that we have our Twilio phone number, account SID, and auth token. We can get these from the Console.
- In our Twilio service, we can create a new conversation, create participants, create a new message, and return an array of the messages belonging to that conversation.
- In order for us to be able to "return back" with our data to the React frontend, we'll need to share Laravel Session data with Inertia. We do this by making a few adjustments in the
AppServiceProvider.
<?php
namespace App\Providers;
use Illuminate\Support\Facades\Session;
use Illuminate\Support\ServiceProvider;
use Inertia\Inertia;
class AppServiceProvider extends ServiceProvider
{
...
public function boot()
{
Inertia::share('flash', function(){
return [
'message' => Session::get('message')
];
});
}
}
- Because we're keeping this app simple without real-time capabilities, we will "cheat" by fetching our messages every three seconds. We'll track the length of our array to see when a new message was added and update accordingly.
async function getMessages(){
const response = await fetch(`/convo/${chat.sid}/messages`)
const json = await response.json()
if (json.messages.length > arrLength){
setMessages(json.messages)
setArrLength(json.messages.length)
}
}
useEffect(() => {
const interval = setInterval(() => {
getMessages()
}, 3000)
return () => clearInterval(interval)
}, [])
This tutorial is just meant to show the basics of Laravel Breeze, Inertia, setting React up with Laravel and Inertia, and Twilio's Conversations API. A more detailed and real-world tutorial will be written up soon. But in the meantime, if you think you're up to it:
Click here for the full tutorial!
