Let's say we need to create a kind of framework for our future application with an already implemented authentication and authorization system in php, where a certain functionality in the project will be available for each confirmed user based on certain roles assigned to him later. This will allow you to build logic for each category of superadmin, admin, client, etc. during the development process.
That is, for example, for admins to draw their interface with the appropriate functionality, and for clients their own personal account with their own functions.
The best option for a quick solution to this problem is a starter kit based on the Laravel php framework and its Breeze ecosystem, as well as Inertia.js , Vue 3 and Tailwind CSS , which will quickly create a flexible access control platform for all registered users, as well as minimize the time for initial project configuration.
The advantages of such a stack:
1. Modern technologies
Laravel: This is one of the most popular PHP frameworks, which is actively used to create robust web applications. It offers a variety of tools and libraries to simplify development.
Inertia.js: Allows you to create single-page applications (SPA) using familiar server-side development methods, which makes it convenient for developers familiar with Laravel.
Vue 3: The modern version of Vue.js with new functionality (for example, script setup), which simplifies component development and improves performance.
Tailwind CSS: This CSS framework is finding more and more fans due to its flexibility and convenience in styling applications, allowing you to quickly create adaptive interfaces.
2. Minimum setting
Using Laravel Breeze for authentication and user management minimizes the time for initial project setup. This is especially true for startups and small teams that need to enter the market quickly.
3. Current development practices
The project corresponds to modern development practices, such as:
SPA (single-page applications): JavaScript does most of the work on the client, which makes interaction with the server faster and more responsive.
Responsive Design: Tailwind CSS makes the process of creating responsive interfaces easier and more efficient.
Installing the platform for the project
Technologies
- Laravel Breeze - easy authentication on Laravel
- Inertia.js - for communication between the client and the server
- Vue 3 using
script setup
- TailwindCSS is a utilitarian CSS framework
Step 1: Installing Laravel
First, you need to install Laravel. Make sure that you already have installed Composer, which is a package manager for PHP. If you don't know how to install it, visit Composer's official website.
Now open the terminal and run the following command:
composer create-project --prefer-dist laravel/laravel my-project
Replace my-project
with the name of your project. This will create a new folder with Laravel installed.
Step 2: Configuring the database
Now create a database in your database management system, for example, in MySQL. You can do this through the phpMyAdmin interface or using the command:
CREATE DATABASE your_database_name;
After creating the database, open the .env
file in the root of your project and change the following lines, specifying your database data:
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=your_database_name
DB_USERNAME=your_database_user
DB_PASSWORD=your_database_password
Replace your_database_name
, your_database_user
, and your_database_password
with your own values.
Step 3: Installing Laravel Breeze
Laravel Breeze is a simple solution to implement authentication. Install it by running the following commands in the terminal:
composer require laravel/breeze --dev
php artisan breeze:install
These commands will install Breeze and create the necessary routes and views for authentication.
Step 4: Install Vue and Inertia.js
Now install Vue and Inertia.js . Make sure that the Node.you have js and npm installed. After that, run the following commands:
npm install
npm install vue@next
npm install @inertiajs/inertia @inertiajs/inertia-vue3
npm install -D tailwindcss
These commands install all the necessary dependencies to work with Vue and Inertia.
Step 5: Setting up TailwindCSS
Create a configuration file for TailwindCSS with the command:
npx tailwindcss init
After that, open the filetailwind.config.js
and add the paths to the files of your project:
module.exports = {
content: [
'./resources/**/*.blade.php',
'./resources/**/*.js',
'./resources/**/*.vue',
],
theme: {
extend: {},
},
plugins: [],
}
Step 6: Connecting TailwindCSS
Create a style file, for example resources/css/app.css
, and add to it:
@tailwind base;
@tailwind components;
@tailwind utilities;
Step 7: Compile your CSS
Now you need to compile your CSS using TailwindCSS. To do this, run the following command:
npx tailwindcss -i ./resources/css/app.css -o ./public/css/app.css --watch
This command will track changes in your app.css
and update the compiled public/css/app.css
file in real time.
Step 8: Setting up Inertia.js in your project
Now create a file to initialize your application with Vue and Inertia.js . Open the fileresources/js/app.js
and add the following code:
import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/inertia-vue3';
import { InertiaProgress } from '@inertiajs/progress';
import '../css/app.css';
createInertiaApp({
resolve: name => require(`./Pages/${name}`),
setup({ el, App, props, plugin }) {
createApp({ render: () => h(App, props) })
.use(plugin)
.mount(el);
},
});
InertiaProgress.init();
This code creates a new Vue application and connects Inertia.js, allowing you to use it to route and display pages. InertiaProgress.init()
is responsible for displaying the loading indicator when navigating between pages.
Step 9: Create routes and views for authentication
Now let's create routes and views for authentication. Open the fileroutes/web.php
and add the following code:
use App\Http\Controllers\HomeController;
Route::get('/', [HomeController::class, 'index'])->name('home');
Route::middleware(['auth'])->group(function () {
// Protected routes for registered users
});
Now create a controller to handle routes. Run the command:
php artisan make:controller HomeController
Open the fileapp/Http/Controllers/HomeController.php
and add the following code:
<?php
namespace App\Http\Controllers;
use Inertia\Inertia;
class HomeController extends Controller
{
public function index()
{
return Inertia::render('Home');
}
}
This controller is responsible for displaying the main page.
Step 10: Create a Home Page
Now create a Vue file for the main page using the following path: resources/js/Pages/Home.vue
and add the following code to it:
<template>
<div>
lt;h1>Welcome to the main page!</h1>
<p>This is your first page using Inertia and Vue.</p>
</div>
</template>
<script setup>
// The logic of the component may be located here
</script>
<style scoped>
/* Component styles (if necessary) */
</style>
Step 11: Start Migrations
Now you need to run migrations to create the necessary tables in the database. In the terminal, run the following command:
php artisan migrate
This command will create tables for users that are required for authentication in your application.
Step 12: Launch the application
Now you are ready to launch your application. To do this, run the command:
php artisan serve
After that, open your browser and go to http://localhost:8000
. You should see your home page.
Step 13: Authentication verification
Now, to test the authentication, you need to register a new user and log in. Laravel Breeze automatically creates pages for registration and login.
Open your browser and go to http://localhost:8000/register
to register a new user. Fill in the fields with your name, email address and password, and then click the "Register" button.
After successful registration, you will be redirected to the main page. Try also going to http://localhost:8000/login
to log in with a previously registered user.
This is a basic setup. You can continue to develop your application by adding new components, pages, and functionality. Use the capabilities of Vue to create interactive interfaces and Tailwind to customize styles.
Later, on our already installed platform, by migrating the additional role field to the users table and the facade Gate we implement a mechanism for checking all users for their assigned roles. This will allow us to build a certain logic in our CRM system during development.