- Forums
- react
- Create/deploy New Laravel/react App Login Breeze/inertia Authentication
Follow these steps to deploy a new laravel app with react and login Create New Laravel/React App Login Breeze/Inertia Authentication [5154], Last Updated: Mon Jun 24, 2024
jj
Sat Jun 10, 2023
0 Comments
759 Visits
Optional versions:
- 5112: https://www.webune.com/forums/laravel-with-login.html
- 5154: https://www.webune.com/forums/create-deploy-new-laravel-react-app-login-breeze-inertia-authentication.html
- 5293: https://www.webune.com/forums/new-mdb-laravel-inertia-breeze-to-vite-react-application-project.html
Follow these steps to deploy a new laravel app with react and login
Create the laravel application with a bash script
- Open terminal to where you want to install this app.
rm -f laravel-with-login.sh
curl -o ./laravel-with-login.sh https://www.webune.com/forums/laravel-with-login.html
chmod +x laravel-with-login.sh
./laravel-with-login.sh
New For mb version: https://www.webune.com/forums/complete-bash-script-to-create-laravel-jetstream-limewire-api-vuejs-vite-application.html
Start the Node.js and PHP servers:
npm run dev
php artisan serve
Add the page link to the navigation:
code resources/js/Layouts/AuthenticatedLayout.jsx
FIND:
<Dropdown.Link href={route('profile.edit')}>Profile</Dropdown.Link>
ADD AFTER:
<Dropdown.Link href={route('avatar')}>Avatar</Dropdown.Link>
Refresh the page and you will see the new navigation link in the dropdown
Add a new Avatar Page
code routes/web.php
ADD the following code to web.php
Route::get('/avatar', function () {
return Inertia::render('Avatar');
})->middleware(['auth', 'verified'])->name('avatar');
Add the new component for Avatar
code resources/js/Pages/Avatar.jsx
Add the following code to Avatar.jsx
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
import { Head } from '@inertiajs/react';
export default function Avatar({ auth }) {
return (
<AuthenticatedLayout
user={auth.user}
header={<h2 className="font-semibold text-xl text-gray-800 leading-tight">Avatar Header</h2>}
>
<Head title="Avatar" />
<div className="py-12">
<div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div className="bg-white overflow-hidden shadow-sm sm:rounded-lg">
<div className="p-6 text-gray-900">Avatar Component</div>
</div>
</div>
</div>
</AuthenticatedLayout>
);
}
Refresh page http://127.0.0.1:8000/avatar
Done
Resource:
hWFP9DeB7KA