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

  1. Open terminal to where you want to install this app.
  2. rm -f laravel-with-login.sh
  3. curl -o ./laravel-with-login.sh https://www.webune.com/forums/laravel-with-login.html
  4. chmod +x laravel-with-login.sh
  5. ./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:

  1. npm run dev
  2. 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

Auto Create Script - Laravel Application Project With React Login Authentication Ready