Laravel документація українською

Стартові комплекти

Вступ

Щоб надати вам перевагу у створенні вашого нового Laravel застосунку, ми раді запропонувати стартові набори застосунків. Ці стартові набори дають вам перевагу у створенні вашого наступного Laravel застосунку та включають маршрути, контролери та представлення, необхідні для реєстрації та автентифікації користувачів вашого застосунку.

Хоча ви можете використовувати ці стартові набори, вони не є обов'язковими. Ви вільні створювати свій власний застосунок з нуля, просто встановивши нову копію Laravel. У будь-якому випадку, ми знаємо, що ви створите щось чудове!

Створення Застосунку Використовуючи Стартовий Набір

Щоб створити новий Laravel застосунок, використовуючи один з наших стартових комплектів, спочатку слід встановити PHP та інструмент командного рядка Laravel. Якщо у вас вже встановлені PHP та Composer, ви можете встановити інструмент командного рядка Laravel installer через Composer:

composer global require laravel/installer

Потім створіть новий Laravel застосунок за допомогою CLI інсталятора Laravel. Інсталятор Laravel запропонує вам вибрати бажаний стартовий комплект:

laravel new my-app

Після створення вашого Laravel застосунку, вам потрібно лише встановити його фронтенд-залежності через NPM і запустити сервер розробки Laravel:

cd my-app
npm install && npm run build
composer run dev

Як тільки ви запустите сервер розробки Laravel, ваш застосунок буде доступний у вашому веб-браузері за адресою http://localhost:8000.

Доступні Стартові Набори

React

Наш стартовий набір React забезпечує надійну, сучасну відправну точку для створення Laravel-застосунків з фронтендом на React, використовуючи Inertia.

Inertia дозволяє створювати сучасні односторінкові React-застосунки, використовуючи класичну маршрутизацію та контролери на стороні сервера. Це дозволяє вам насолоджуватися потужністю фронтенду React у поєднанні з неймовірною продуктивністю бекенду Laravel та блискавично швидкою компіляцією Vite.

The React starter kit використовує React 19, TypeScript, Tailwind і бібліотеку компонентів shadcn/ui.

Vue

Наш стартовий набір Vue надає чудову відправну точку для створення Laravel застосунків з фронтендом на Vue, використовуючи Inertia.

Inertia дозволяє створювати сучасні односторінкові Vue-застосунки, використовуючи класичну маршрутизацію та контролери на стороні сервера. Це дозволяє вам насолоджуватися потужністю фронтенду Vue у поєднанні з неймовірною продуктивністю бекенду Laravel та блискавично швидкою компіляцією Vite.

Стартовий набір Vue використовує Vue Composition API, TypeScript, Tailwind і бібліотеку компонентів shadcn-vue.

Livewire

Наш стартовий комплект Livewire надає ідеальну відправну точку для створення Laravel застосунків з фронтендом Laravel Livewire.

Livewire - це потужний спосіб створення динамічних, реактивних, фронтенд інтерфейсів, використовуючи лише PHP. Це чудовий вибір для команд, які в основному використовують шаблони Blade і шукають простішу альтернативу JavaScript-фреймворкам для SPA, таким як React і Vue.

Стартовий набір Livewire використовує Livewire, Tailwind і бібліотеку компонентів Flux UI.

Налаштування Стартового Набору

React

Наш стартовий набір React побудований з використанням Inertia 2, React 19, Tailwind 4 і shadcn/ui. Як і у всіх наших стартових наборах, весь бекенд і фронтенд код існує в межах вашого застосунку, що дозволяє повністю налаштовувати його.

Більшість коду фронтенду знаходиться в каталозі resources/js. Ви можете вільно змінювати будь-який код, щоб налаштувати зовнішній вигляд і поведінку вашого застосунку:

resources/js/
├── components/    # Повторно використовувані компоненти React
├── hooks/         # React-хуки
├── layouts/       # Розташування шаблонів (layouts) застосунку
├── lib/           # Утиліти та конфігурація
├── pages/         # Компоненти сторінок
└── types/         # Типи TypeScript

Щоб опублікувати додаткові компоненти shadcn, спочатку знайдіть компонент, який ви хочете опублікувати. Потім опублікуйте компонент за допомогою npx:

npx shadcn@latest add switch

In this прикладі, команда опублікує компонент Switch до resources/js/components/ui/switch.tsx. Після того як компонент буде опубліковано, ви можете використовувати його на будь-якій зі своїх сторінок:

import { Switch } from "@/components/ui/switch"
 
const MyPage = () => {
  return (
    <div>
      <Switch />
    </div>
  );
};
 
export default MyPage;

Доступні макети

The React стартовий набір включає два різні основні макети, з яких ви можете вибрати: макет "sidebar" і макет "header". Макет sidebar є за замовчуванням, але ви можете переключитися на макет header, змінивши макет, який імпортується на початку файлу resources/js/layouts/app-layout.tsx вашого застосунку:

import AppLayoutTemplate from '@/layouts/app/app-sidebar-layout'; 
import AppLayoutTemplate from '@/layouts/app/app-header-layout';

Варіанти Бічної Панелі

Макет бічної панелі включає три різні варіанти: варіант бічної панелі за замовчуванням, варіант "вставка" та варіант "плаваючий". Ви можете вибрати варіант, який вам найбільше подобається, змінивши компонент resources/js/components/app-sidebar.tsx:

<Sidebar collapsible="icon" variant="sidebar"> 
<Sidebar collapsible="icon" variant="inset">

Варіанти макету сторінки автентифікації

Сторінки автентифікації, включені в стартовий набір React, такі як сторінка входу та сторінка реєстрації, також пропонують три різні варіанти макету: "simple", "card" та "split".

Щоб змінити макет автентифікації, змініть макет, який імпортується на початку файлу resources/js/layouts/auth-layout.tsx вашого застосунку:

import AuthLayoutTemplate from '@/layouts/auth/auth-simple-layout'; 
import AuthLayoutTemplate from '@/layouts/auth/auth-split-layout';

Vue

Наш стартовий набір Vue побудований з використанням Inertia 2, Vue 3 Composition API, Tailwind і shadcn-vue. Як і у всіх наших стартових наборах, весь бекенд і фронтенд код існує в межах вашого застосунку, що дозволяє повністю налаштувати його.

Більшість коду фронтенду знаходиться в директорії resources/js. Ви можете вільно змінювати будь-який код, щоб налаштувати зовнішній вигляд і поведінку вашого застосунку:

resources/js/
├── components/    # Повторно використовувані компоненти Vue
├── composables/   # Vue composables / Хуки
├── layouts/       # Розташування шаблонів (layouts) застосунку
├── lib/           # Утиліти та конфігурація
├── pages/         # Компоненти сторінок
└── types/         # Типи TypeScript

Щоб опублікувати додаткові компоненти shadcn-vue, спочатку знайдіть компонент, який ви хочете опублікувати. Потім опублікуйте компонент за допомогою npx:

npx shadcn-vue@latest add switch

У цьому прикладі команда опублікує компонент Switch у resources/js/components/ui/Switch.vue. Після того як компонент буде опубліковано, ви можете використовувати його на будь-якій зі своїх сторінок:

<script setup lang="ts">
import { Switch } from '@/Components/ui/switch'
</script>
 
<template>
    <div>
        <Switch />
    </div>
</template>

Доступні макети

Набір для початку роботи з Vue включає два різні основні макети, з яких ви можете вибрати: макет "sidebar" і макет "header". Макет sidebar є макетом за замовчуванням, але ви можете переключитися на макет header, змінивши макет, який імпортується на початку файлу resources/js/layouts/AppLayout.vue вашого застосунку:

import AppLayout from '@/layouts/app/AppSidebarLayout.vue'; 
import AppLayout from '@/layouts/app/AppHeaderLayout.vue';

Варіанти Бічної Панелі

Макет бічної панелі включає три різні варіанти: варіант бічної панелі за замовчуванням, варіант "вставка" та варіант "плаваючий". Ви можете вибрати варіант, який вам найбільше подобається, змінивши компонент resources/js/components/AppSidebar.vue:

<Sidebar collapsible="icon" variant="sidebar"> 
<Sidebar collapsible="icon" variant="inset">

Варіанти Макету Сторінки Аутентифікації

Сторінки автентифікації, включені в стартовий комплект Vue, такі як сторінка входу та сторінка реєстрації, також пропонують три різні варіанти макету: "simple", "card" та "split".

Щоб змінити макет автентифікації, змініть макет, який імпортується на початку файлу resources/js/layouts/AuthLayout.vue вашого застосунку:

import AuthLayout from '@/layouts/auth/AuthSimpleLayout.vue'; 
import AuthLayout from '@/layouts/auth/AuthSplitLayout.vue';

Livewire

Наш стартовий набір Livewire побудований з використанням Livewire 3, Tailwind та Flux UI. Як і у всіх наших стартових наборах, весь бекенд та фронтенд код існує в межах вашого застосунку, що дозволяє повністю налаштувати його.

Livewire та Volt

Більшість коду фронтенду знаходиться в директорії resources/views. Ви можете вільно змінювати будь-який код, щоб налаштувати зовнішній вигляд і поведінку вашого застосунку:

resources/views
├── components            # Повторно використовувані компоненти Livewire
├── flux                  # Кастомізовані компоненти Flux
├── livewire              # Сторінки Livewire
├── partials              # Повторно використовувані фрагменти Blade
├── dashboard.blade.php   # Панель користувача після автентифікації
├── welcome.blade.php     # Вітальна сторінка для гостей

Традиційні компоненти Livewire

Фронтенд код знаходиться в директорії resources/views, тоді як директорія app/Livewire містить відповідну бекенд логіку для компонентів Livewire.

Доступні макети

Набір для початку роботи з Livewire включає два різні основні макети, з яких ви можете вибрати: макет "sidebar" і макет "header". Макет sidebar є макетом за замовчуванням, але ви можете переключитися на макет header, змінивши макет, який використовується у файлі вашого застосунку resources/views/components/layouts/app.blade.php. Крім того, вам слід додати атрибут container до основного компонента Flux:

<x-layouts.app.header>
    <flux:main container>
        {{ $slot }}
    </flux:main>
</x-layouts.app.header>

Варіанти Макету Сторінки Аутентифікації

Сторінки автентифікації, що входять до стартового набору Livewire, такі як сторінка входу та сторінка реєстрації, також пропонують три різні варіанти макету: "simple", "card" та "split".

Щоб змінити макет автентифікації, змініть макет, який використовується файлом resources/views/components/layouts/auth.blade.php вашого застосунку:

<x-layouts.auth.split>
    {{ $slot }}
</x-layouts.auth.split>

WorkOS AuthKit Аутентифікація

За замовчуванням стартові комплекти React, Vue та Livewire використовують вбудовану систему аутентифікації Laravel для надання можливостей входу, реєстрації, скидання пароля, верифікації електронної пошти та іншого. Крім того, ми також пропонуємо варіант кожного стартового комплекту на базі WorkOS AuthKit, який пропонує:

  • Соціальна автентифікація (Google, Microsoft, GitHub, і Apple)
  • Аутентифікація за допомогою ключа доступу
  • Email на основі "Magic Auth"
  • SSO

Використання WorkOS як вашого провайдера автентифікації вимагає облікового запису WorkOS. WorkOS пропонує безкоштовну автентифікацію для застосунків з кількістю активних користувачів до 1 мільйона на місяць.

Щоб використовувати WorkOS AuthKit як постачальника автентифікації для вашого застосунку, виберіть опцію WorkOS при створенні вашого нового застосунку на базі стартового набору через laravel new.

Налаштування Вашого WorkOS Starter Kit

Після створення нового застосунку за допомогою стартового набору з підтримкою WorkOS, ви повинні встановити змінні середовища WORKOS_CLIENT_ID, WORKOS_API_KEY та WORKOS_REDIRECT_URL у файлі .env вашого застосунку. Ці змінні повинні відповідати значенням, наданим вам на панелі управління WorkOS для вашого застосунку:

WORKOS_CLIENT_ID=your-client-id
WORKOS_API_KEY=your-api-key
WORKOS_REDIRECT_URL="${APP_URL}/authenticate"

Крім того, вам слід налаштувати URL домашньої сторінки застосунку у вашій панелі керування WorkOS. Цей URL є тим, куди користувачі будуть перенаправлені після виходу з вашого застосунку.

Налаштування методів автентифікації AuthKit

Під час використання стартового набору з підтримкою WorkOS ми рекомендуємо вимкнути автентифікацію за допомогою "Email + Password" у налаштуваннях WorkOS AuthKit вашого застосунку. Це дозволить користувачам проходити автентифікацію лише через соціальні провайдери, ключі доступу (passkeys), "Magic Auth" або SSO. Такий підхід повністю усуває необхідність обробки паролів користувачів у вашому застосунку.

Налаштування AuthKit Часу Сесії

Крім того, ми рекомендуємо налаштувати тайм-аут неактивності сесії WorkOS AuthKit так, щоб він відповідав налаштованому порогу тайм-ауту сесії вашого Laravel застосунку, який зазвичай становить дві години.

Inertia SSR

React та Vue стартові набори сумісні з можливостями серверного рендерингу Inertia. Щоб створити сумісний з Inertia SSR пакет для вашого застосунку, виконайте команду build:ssr:

npm run build:ssr

Для зручності, також доступна команда composer dev:ssr. Ця команда запустить сервер розробки Laravel та сервер Inertia SSR після створення сумісного з SSR пакету для вашого застосунку, дозволяючи вам тестувати ваш застосунок локально за допомогою рушія серверного рендерингу Inertia:

composer dev:ssr

Спільно підтримувані стартові набори

Коли ви створюєте новий Laravel застосунок за допомогою інсталятора Laravel, ви можете надати будь-який підтримуваний спільнотою стартовий комплект, доступний на Packagist, до прапора --using:

laravel new my-app --using=example/starter-kit

Створення Стартових Наборів

Щоб ваш стартовий комплект був доступний іншим, вам потрібно опублікувати його на Packagist. Ваш стартовий комплект повинен визначати необхідні змінні середовища у файлі .env.example, а всі необхідні команди після встановлення повинні бути вказані в масиві post-create-project-cmd файлу composer.json стартового комплекту.

Часті запитання

Як оновити?

Кожен стартовий комплект надає вам надійну відправну точку для вашого наступного застосунку. З повним володінням кодом, ви можете налаштовувати, кастомізувати та будувати ваш застосунок саме так, як ви уявляєте. Однак, немає потреби оновлювати сам стартовий комплект.

Як увімкнути верифікацію електронної пошти?

Перевірку електронної пошти можна додати, розкоментувавши імпорт MustVerifyEmail у вашій моделі App/Models/User.php і переконавшись, що модель реалізує інтерфейс MustVerifyEmail:

<?php
 
namespace App\Models;
 
use Illuminate\Contracts\Auth\MustVerifyEmail;
// ...
 
class User extends Authenticatable implements MustVerifyEmail
{
    // ...
}

Після реєстрації користувачі отримають електронний лист для підтвердження. Щоб обмежити доступ до певних маршрутів, поки електронна адреса користувача не буде підтверджена, додайте проміжне програмне забезпечення verified до маршрутів:

Route::middleware(['auth', 'verified'])->group(function () {
    Route::get('dashboard', function () {
        return Inertia::render('dashboard');
    })->name('dashboard');
});

Підтвердження електронної пошти не потрібне при використанні варіанту стартових комплектів WorkOS

.

Як змінити шаблон електронної пошти за замовчуванням?

Ви можете захотіти налаштувати шаблон електронної пошти за замовчуванням, щоб краще відповідати бренду вашого застосунку. Щоб змінити цей шаблон, вам слід опублікувати уявлення електронної пошти у вашому застосунку за допомогою наступної команди:

php artisan vendor:publish --tag=laravel-mail

Це згенерує кілька файлів у resources/views/vendor/mail. Ви можете змінити будь-який з цих файлів, а також файл resources/views/vendor/mail/themes/default.css, щоб змінити вигляд і оформлення шаблону електронної пошти за замовчуванням.

Хостинг для Laravel – Ukraine