Step 1: Set Up Laravel Project.
Step 2: Set Up Database Details in ENV.
Step 3: Install Laravel UI.
Step 4: Step up Auth Scaffolding.
Step 5: Run npm install && npm run dev command.
Step 6: Migrate your database.
Step 7: Configuration
composer create-project --prefer-dist laravel/laravel AnyAppName
.env
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=database_name
DB_USERNAME=database_user_name
DB_PASSWORD=database_password
composer require laravel/ui
use anyone for you requirements
-
Without Auth:
php artisan ui bootstrap
php artisan ui vue
php artisan ui react
-
With Auth:
php artisan ui bootstrap --auth
php artisan ui vue --auth
php artisan ui react --auth
npm install && npm run dev
php artisan migrate
Now our Laravel 8 authentication system is ready. you can run serve
php artisan serve
import React from 'react';
import ReactDOM from 'react-dom';
function Example() {
return (
<div className="container">
<div className="row justify-content-center">
<div className="col-md-8">
<div className="card">
<div className="card-header">Example Component</div>
<div className="card-body">I'm an example component!</div>
</div>
</div>
</div>
</div>
);
}
export default Example;
if (document.getElementById('example')) {
ReactDOM.render(<Example />, document.getElementById('example'));
}
require('./bootstrap');
require('./components/Example');
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<!-- React root DOM -->
<div id="example">
</div>
<!-- React JS -->
<script src="{{ asset('js/app.js') }}" defer></script>
</body>
</html>
Route::get('/', function () {
return view('app');
});
