diff --git a/starter-kits.md b/starter-kits.md index 9e8cd9b..0778226 100644 --- a/starter-kits.md +++ b/starter-kits.md @@ -1,5 +1,5 @@ --- -git: 8332d20b07cc639995649a335620b044151e6dd1 +git: 4b842431d1c68b4bd92200432d7c42c6bab44175 --- # Стартовые комплекты @@ -7,121 +7,373 @@ git: 8332d20b07cc639995649a335620b044151e6dd1 ## Введение -Чтобы помочь вам быстрее начать работу с новым приложением Laravel, мы предлагаем стартовые комплекты для приложения, включая аутентификацию. Эти комплекты автоматически добавят в ваше приложение маршруты, контроллеры и шаблоны, необходимые для регистрации и авторизации пользователей. +Чтобы помочь вам быстрее начать работу с новым приложением Laravel, мы рады предложить [стартовые наборы приложений](https://laravel.com/starter-kits). Эти стартовые наборы дают вам фору при создании вашего следующего приложения Laravel и включают маршруты, контроллеры и представления, необходимые для регистрации и аутентификации пользователей вашего приложения. Использование стартовых комплектов необязательно — вы можете создать приложение с нуля, просто установив свежую копию Laravel. В любом случае, мы уверены, что у вас получится что-то замечательное! - -## Laravel Breeze + +## Создание приложения с использованием стартового набора -[Laravel Breeze](https://github.com/laravel/breeze) - это минимальная и простая реализация всех функций [аутентификации](/docs/{{version}}/authentication) Laravel, включая вход в систему, регистрацию, сброс пароля, подтверждение по электронной почте и подтверждение пароля. Кроме того, Breeze включает в себя простую "страницу профиля", где пользователь может обновить свое имя, адрес электронной почты и пароль. +Чтобы создать новое приложение Laravel с помощью одного из наших стартовых наборов, вам сначала следует [установить PHP и инструмент Laravel CLI](/docs/{{version}}/installation#installing-php). Если у вас уже установлены PHP и Composer, вы можете установить инструмент Laravel installer CLI через Composer: -Представление по умолчанию в Laravel Breeze состоит из простых [шаблонов Blade](/docs/{{version}}/blade), стилизованных с использованием [Tailwind CSS](https://tailwindcss.com). Кроме того, Breeze предоставляет опции для создания каркасов на основе [Livewire](https://livewire.laravel.com) или [Inertia](https://inertiajs.com), с выбором использования Vue или React для каркаса на основе Inertia. +```shell +composer global require laravel/installer +``` + +Затем создайте новое приложение Laravel с помощью CLI установщика Laravel. Установщик Laravel предложит вам выбрать предпочитаемый вами стартовый набор: + +```shell +laravel new my-app +``` + +После создания приложения Laravel вам нужно только установить его зависимости внешнего интерфейса через NPM и запустить сервер разработки Laravel: + +```shell +cd my-app +npm install && npm run build +composer run dev +``` + +После запуска сервера разработки Laravel ваше приложение будет доступно в веб-браузере по адресу [http://localhost:8000](http://localhost:8000). + + +## Доступные стартовые наборы + + +### React -![Пример страницы регистрации Breeze](https://laravel.com/img/docs/breeze-register.png) +Наш стартовый комплект React обеспечивает надежную, современную отправную точку для создания приложений Laravel с фронтендом React, использующим [Inertia](https://inertiajs.com). -#### Laravel Bootcamp +Inertia позволяет вам создавать современные одностраничные приложения React, используя классическую маршрутизацию и контроллеры на стороне сервера. Это позволяет вам наслаждаться мощью фронтенда React в сочетании с невероятной производительностью бэкенда Laravel и молниеносной компиляцией Vite. -Если вы новичок в Laravel, не стесняйтесь присоединиться к [Laravel Bootcamp](https://bootcamp.laravel.com). Laravel Bootcamp научит вас создавать свое первое приложение на Laravel с использованием Breeze. Это отличный способ ознакомиться со всем, что Laravel и Breeze могут предложить. +Стартовый комплект React использует React 19, TypeScript, Tailwind и библиотеку компонентов [shadcn/ui](https://ui.shadcn.com). - -### Установка + +### Vue -Во-первых, вам следует [создать новое приложение Laravel](/docs/{{version}}/installation). Если вы создаете свое приложение с помощью [установщика Laravel](/docs/{{version}}/installation#creating-a-laravel-project), в процессе установки вас попросят установить Laravel Breeze. В противном случае вам придется следовать инструкциям по ручной установке ниже. +Наш стартовый комплект Vue представляет собой прекрасную отправную точку для создания приложений Laravel с интерфейсом Vue, использующим [Inertia](https://inertiajs.com). -Если вы уже создали новое приложение Laravel без стартового набора, вы можете вручную установить Laravel Breeze с помощью Composer: +Inertia позволяет вам создавать современные одностраничные приложения Vue, используя классическую маршрутизацию и контроллеры на стороне сервера. Это позволяет вам наслаждаться мощью фронтенда Vue в сочетании с невероятной производительностью бэкенда Laravel и молниеносной компиляцией Vite. + +Стартовый комплект Vue использует API Vue Composition, TypeScript, Tailwind и библиотеку компонентов [shadcn-vue](https://www.shadcn-vue.com/). + + +### Livewire + +Наш стартовый комплект Livewire представляет собой идеальную отправную точку для создания приложений Laravel с помощью интерфейса [Laravel Livewire](https://livewire.laravel.com). + +Livewire — это мощный способ создания динамических, реактивных интерфейсов frontend с использованием только PHP. Он отлично подходит для команд, которые в основном используют шаблоны Blade и ищут более простую альтернативу фреймворкам SPA на основе JavaScript, таким как React и Vue. + +Стартовый комплект Livewire использует Livewire, Tailwind и библиотеку компонентов [Flux UI](https://fluxui.dev). + + +## Настройка стартового набора + + +### React + +Наш стартовый набор React создан с использованием Inertia 2, React 19, Tailwind 4 и [shadcn/ui](https://ui.shadcn.com). Как и во всех наших стартовых наборах, весь код бэкэнда и фронтэнда находится в вашем приложении, что позволяет выполнять полную настройку. + +Большая часть кода frontend находится в каталоге `resources/js`. Вы можете свободно изменять любой код, чтобы настроить внешний вид и поведение вашего приложения: + +```text +resources/js/ +├── components/ # Повторно используемые компоненты React +├── hooks/ # React hooks +├── layouts/ # Макеты приложений +├── lib/ # Вспомогательные функции и конфигурация +├── pages/ # Компоненты страниц +└── types/ # Объявления типов +``` + +Чтобы опубликовать дополнительные компоненты shadcn, сначала [найдите компонент, который вы хотите опубликовать](https://ui.shadcn.com). Затем опубликуйте компонент с помощью `npx`: ```shell -composer require laravel/breeze --dev +npx shadcn@latest add switch ``` -После установки пакета Laravel Breeze с помощью Composer, вы должны выполнить команду Artisan `breeze:install`. Эта команда публикует представления аутентификации, маршруты, контроллеры и другие ресурсы в вашем приложении. Laravel Breeze публикует всей свой код в вашем приложении, чтобы у вас была полная контроль и видимость над его функциями и реализацией. +В этом примере команда опубликует компонент Switch в `resources/js/components/ui/switch.tsx`. После публикации компонента вы сможете использовать его на любой из своих страниц: -Команда `breeze:install` запросит у вас предпочтительный стек фронтенда и фреймворк для тестирования: +```jsx +import { Switch } from "@/components/ui/switch" -```shell -php artisan breeze:install +const MyPage = () => { + return ( +
+ +
+ ); +}; -php artisan migrate -npm install -npm run dev +export default MyPage; ``` - -### Breeze и Blade + +#### Доступные макеты React -Стандартный стек Breeze - это Blade стек, который использует простые [шаблоны Blade](/docs/{{version}}/blade) для отображения фронтенда вашего приложения. Вы можете установить Blade стек, вызвав команду `breeze:install` без дополнительных аргументов и выбрав Blade фронтенд стек. После установки структуры Breeze вам также следует скомпилировать фронтенд-ресурсы вашего приложения: +Стартовый набор React включает в себя два различных основных макета на выбор: макет "sidebar" и макет "header". Макет "sidebar" используется по умолчанию, но вы можете переключиться на макет "header", изменив макет, импортированный в верхней части файла `resources/js/layouts/app-layout.tsx` вашего приложения: -```shell -php artisan breeze:install +```js +import AppLayoutTemplate from '@/layouts/app/app-sidebar-layout'; // [tl! remove] +import AppLayoutTemplate from '@/layouts/app/app-header-layout'; // [tl! add] +``` + + +#### Варианты боковой панели React + +Макет боковой панели включает три различных варианта: вариант "sidebar" по умолчанию, "inset" и "floating". Вы можете выбрать вариант, который вам больше нравится, изменив компонент `resources/js/components/app-sidebar.tsx`: -php artisan migrate -npm install -npm run dev +```text + [tl! remove] + [tl! add] ``` -Затем, вы можете перейти в своем веб-браузере по URL-адресам вашего приложения `/login` или `/register`. Все маршруты Breeze определены в файле `routes/auth.php`. + +#### Варианты макета страницы аутентификации React -> [!NOTE] -> Чтобы узнать больше о компиляции CSS и JavaScript вашего приложения, ознакомьтесь с [документацией Laravel по Vite](/docs/{{version}}/vite#running-vite). +Страницы аутентификации, входящие в стартовый набор React, такие как страница входа и страница регистрации, также предлагают три различных варианта макета: "simple", "card" и "split". + +Чтобы изменить макет аутентификации, измените макет, импортированный в верхней части файла `resources/js/layouts/auth-layout.tsx` вашего приложения: - -### Breeze и Livewire +```js +import AuthLayoutTemplate from '@/layouts/auth/auth-simple-layout'; // [tl! remove] +import AuthLayoutTemplate from '@/layouts/auth/auth-split-layout'; // [tl! add] +``` -Laravel Breeze также предлагает шаблоны для [Livewire](https://livewire.laravel.com). Livewire - это мощный способ создания динамических, реактивных пользовательских интерфейсов (UI) на фронтенде, используя только PHP. + +### Vue -Livewire отлично подходит для команд, которые в основном используют шаблоны Blade и ищут более простую альтернативу фреймворкам для создания SPA (Single Page Application) на JavaScript, таким как Vue и React. +Наш стартовый комплект Vue создан с использованием Inertia 2, Vue 3 Composition API, Tailwind и [shadcn-vue](https://www.shadcn-vue.com/). Как и во всех наших стартовых комплектах, весь код бэкэнда и фронтэнда находится в вашем приложении, что позволяет выполнять полную настройку. -Чтобы использовать стек Livewire, вы можете выбрать Livewire при выполнении команды Artisan `breeze:install`. После установки шаблонов Breeze вам следует запустить миграции базы данных: +Большая часть кода frontend находится в каталоге `resources/js`. Вы можете свободно изменять любой код, чтобы настроить внешний вид и поведение вашего приложения: + +```text +resources/js/ +├── components/ # Повторно используемые компоненты Vue +├── composables/ # Vue composables / hooks +├── layouts/ # Макеты приложений +├── lib/ # Вспомогательные функции и конфигурация +├── pages/ # Компоненты страниц +└── types/ # Объявления типов +``` + +Чтобы опубликовать дополнительные компоненты shadcn-vue, сначала [найдите компонент, который вы хотите опубликовать](https://www.shadcn-vue.com). Затем опубликуйте компонент с помощью `npx`: ```shell -php artisan breeze:install +npx shadcn-vue@latest add switch +``` + +В этом примере команда опубликует компонент Switch в `resources/js/components/ui/Switch.vue`. После публикации компонента вы сможете использовать его на любой из своих страниц: + +```vue + -php artisan migrate + ``` - -### Breeze & React / Vue + +#### Доступные макеты Vue -Laravel Breeze также предоставляет средства сборки для React и Vue через фронтенд-реализацию [Inertia](https://inertiajs.com). Inertia позволяет создавать современные одностраничные приложения React и Vue с использованием классической маршрутизации на стороне сервера и контроллеров. +Стартовый набор Vue включает в себя два различных основных макета на выбор: макет "sidebar" и макет "header". Макет "sidebar" используется по умолчанию, но вы можете переключиться на макет "header", изменив макет, импортированный в верхней части файла `resources/js/layouts/AppLayout.vue` вашего приложения: -Inertia позволяет вам наслаждаться возможностями React и Vue на стороне фронтенда, объединенными с невероятной производительностью Laravel на стороне бэкенда и быстрой компиляцией [Vite](https://vitejs.dev). Чтобы использовать стек Inertia, вы можете выбрать стек Vue или React при выполнении команды Artisan `breeze:install`. +```js +import AppLayout from '@/layouts/app/AppSidebarLayout.vue'; // [tl! remove] +import AppLayout from '@/layouts/app/AppHeaderLayout.vue'; // [tl! add] +``` -При выборе стека фронтенда Vue или React, установщик Breeze также предложит вам определить, хотите ли вы [Inertia SSR (серверный рендеринг)](https://inertiajs.com/server-side-rendering) или поддержку TypeScript. После установки шаблонов Breeze вам также следует скомпилировать фронтенд-ресурсы вашего приложения: + +#### Варианты боковой панели Vue -```shell -php artisan breeze:install +Макет боковой панели включает три различных варианта: вариант "sidebar" по умолчанию, "inset" и "floating". Вы можете выбрать вариант, который вам больше нравится, изменив компонент `resources/js/components/AppSidebar.vue`: + +```text + [tl! remove] + [tl! add] +``` + + +#### Варианты макета страницы аутентификации Vue + +Страницы аутентификации, входящие в стартовый комплект Vue, такие как страница входа и страница регистрации, также предлагают три различных варианта макета: "simple", "card" и "split". + +Чтобы изменить макет аутентификации, измените макет, импортированный в верхней части файла `resources/js/layouts/AuthLayout.vue` вашего приложения: + +```js +import AuthLayout from '@/layouts/auth/AuthSimpleLayout.vue'; // [tl! remove] +import AuthLayout from '@/layouts/auth/AuthSplitLayout.vue'; // [tl! add] +``` + + +### Livewire + +Наш стартовый комплект Livewire создан с использованием Livewire 3, Tailwind и [Flux UI](https://fluxui.dev/). Как и во всех наших стартовых комплектах, весь код бэкэнда и фронтэнда находится в вашем приложении, что позволяет выполнять полную настройку. + +#### Livewire и Volt -php artisan migrate -npm install -npm run dev +Большая часть кода frontend находится в каталоге `resources/views`. Вы можете свободно изменять любой код, чтобы настроить внешний вид и поведение вашего приложения: + +```text +resources/views +├── components # Повторно используемые компоненты Livewire +├── flux # Индивидуальные компоненты Flux +├── livewire # Страницы Livewire +├── partials # Часто используемые представления Blade +├── dashboard.blade.php # Панель управления аутентифицированного пользователя +├── welcome.blade.php # Приветственная страница для гостей +``` + +#### Традиционные компоненты Livewire + +Код интерфейса находится в каталоге `resources/views`, а каталог `app/Livewire` содержит соответствующую внутреннюю логику для компонентов Livewire. + + +#### Доступные макеты Livewire + +Стартовый комплект Livewire включает в себя два различных основных макета на выбор: макет "sidebar" и макет "header". Макет "sidebar" используется по умолчанию, но вы можете переключиться на макет "header", изменив макет, используемый файлом `resources/views/components/layouts/app.blade.php` вашего приложения. Кроме того, вам следует добавить атрибут `container` к основному компоненту Flux: + +```blade + + + {{ $slot }} + + +``` + + +#### Варианты макета страницы аутентификации Livewire + +Страницы аутентификации, входящие в стартовый комплект Livewire, такие как страница входа и страница регистрации, также предлагают три различных варианта макета: "simple", "card" и "split". + +Чтобы изменить макет аутентификации, измените макет, используемый файлом `resources/views/components/layouts/auth.blade.php` вашего приложения: + +```blade + + {{ $slot }} + +``` + + +## Аутентификация WorkOS AuthKit + +По умолчанию стартовые наборы React, Vue и Livewire используют встроенную систему аутентификации Laravel для входа, регистрации, сброса пароля, проверки электронной почты и т. д. Кроме того, мы также предлагаем вариант каждого стартового набора на основе [WorkOS AuthKit](https://authkit.com), который предлагает: + +
+ +- Социальная аутентификация (Google, Microsoft, GitHub и Apple) +- Аутентификация с помощью пароля +- "Magic Auth" на основе электронной почты +- SSO + +
+ +Использование WorkOS в качестве поставщика аутентификации [требуется учетная запись WorkOS](https://workos.com). WorkOS предлагает бесплатную аутентификацию для приложений с ежемесячным количеством активных пользователей до 1 миллиона. + +Чтобы использовать WorkOS AuthKit в качестве поставщика аутентификации вашего приложения, выберите опцию WorkOS при создании нового приложения на базе стартового набора с помощью `laravel new`. + +### Настройка стартового комплекта WorkOS + +После создания нового приложения с использованием стартового набора WorkOS, вам следует задать переменные окружения `WORKOS_CLIENT_ID`, `WORKOS_API_KEY` и `WORKOS_REDIRECT_URL` в файле `.env` вашего приложения. Эти переменные должны соответствовать значениям, предоставленным вам на панели инструментов WorkOS для вашего приложения: + +```ini +WORKOS_CLIENT_ID=your-client-id +WORKOS_API_KEY=your-api-key +WORKOS_REDIRECT_URL="${APP_URL}/authenticate" ``` -Затем вы можете перейти по адресу `/login` или `/register` вашего приложения в веб-браузере. Все маршруты Breeze определены в файле `routes/auth.php`. +Кроме того, вам следует настроить URL домашней страницы приложения в панели управления WorkOS. Этот URL-адрес — это то место, куда будут перенаправляться пользователи после выхода из вашего приложения. + + +#### Настройка методов аутентификации AuthKit + +При использовании стартового комплекта на базе WorkOS мы рекомендуем отключить аутентификацию "Email + Password" в настройках конфигурации WorkOS AuthKit вашего приложения, что позволит пользователям проходить аутентификацию только через поставщиков социальных аутентификаций, пароли, "Magic Auth" и SSO. Это позволит вашему приложению полностью избежать обработки паролей пользователей. + + +#### Настройка тайм-аутов сеанса AuthKit - -### Breeze & Next.js / API +Кроме того, мы рекомендуем вам настроить время бездействия сеанса WorkOS AuthKit в соответствии с настроенным пороговым значением времени бездействия сеанса вашего приложения Laravel, которое обычно составляет два часа. -Laravel Breeze также может создавать структуру аутентификационного API, готовую к аутентификации современных приложений на JavaScript, таких как [Next](https://nextjs.org), [Nuxt](https://nuxt.com) и другие. Для начала выберите стек API в качестве желаемого стека при выполнении команды Artisan `breeze:install`: + +### Inertia SSR + +Стартовые наборы React и Vue совместимы с возможностями [серверного рендеринга](https://inertiajs.com/server-side-rendering) Inertia. Чтобы создать совместимый с Inertia SSR-пакет для вашего приложения, выполните команду `build:ssr`: ```shell -php artisan breeze:install +npm run build:ssr +``` -php artisan migrate +Для удобства также доступна команда `composer dev:ssr`. Эта команда запустит сервер разработки Laravel и сервер Inertia SSR после сборки SSR-совместимого пакета для вашего приложения, что позволит вам локально протестировать ваше приложение с помощью серверного движка рендеринга Inertia: + +```shell +composer dev:ssr ``` -Во время установки Breeze добавит переменную окружения `FRONTEND_URL` в файл `.env` вашего приложения. Этот URL должен быть URL вашего JavaScript-приложения. Обычно это будет `http://localhost:3000` во время локальной разработки. Кроме того, убедитесь, что ваша переменная окружения `APP_URL` установлена в `http://localhost:8000`, который является URL по умолчанию для команды Artisan `serve`. + +### Стартовые наборы, поддерживаемые сообществом + +При создании нового приложения Laravel с помощью установщика Laravel вы можете указать любой поддерживаемый сообществом стартовый набор, доступный на Packagist, в флаге `--using`: + +```shell +laravel new my-app --using=example/starter-kit +``` + + +#### Создание стартовых наборов + +Чтобы ваш стартовый набор был доступен другим, вам нужно опубликовать его на [Packagist](https://packagist.org). Ваш стартовый набор должен определять необходимые переменные среды в файле `.env.example`, а все необходимые команды после установки должны быть перечислены в массиве `post-create-project-cmd` файла `composer.json` стартового набора. + + +### Часто задаваемые вопросы + + +#### Как мне обновиться? + +Каждый стартовый набор дает вам надежную отправную точку для вашего следующего приложения. Имея полное право собственности на код, вы можете настраивать и компоновать свое приложение именно так, как вы себе представляете. Однако нет необходимости обновлять сам стартовый набор. - -#### Эталонная реализация Next.js + +#### Как включить проверку электронной почты? -Наконец, вы готовы связать этот бэкэнд с выбранным вами интерфейсом. Следующая эталонная реализация интерфейса Breeze [доступна на GitHub](https://github.com/laravel/breeze-next). Этот интерфейс поддерживается Laravel и содержит тот же пользовательский интерфейс, что и традиционные стеки Blade и Inertia, предоставляемые Breeze. +Проверку электронной почты можно добавить, раскомментировав импорт `MustVerifyEmail` в модели `App/Models/User.php` и убедившись, что модель реализует интерфейс `MustVerifyEmail`: - -## Laravel Jetstream +```php +group(function () { + Route::get('dashboard', function () { + return Inertia::render('dashboard'); + })->name('dashboard'); +}); +``` + +> [!NOTE] +> При использовании варианта стартовых наборов [WorkOS](#workos) подтверждение адреса электронной почты не требуется. + + +#### Как изменить шаблон электронной почты по умолчанию? + +Вы можете настроить шаблон электронной почты по умолчанию, чтобы он лучше соответствовал брендингу вашего приложения. Чтобы изменить этот шаблон, вам следует опубликовать представления электронной почты в вашем приложении с помощью следующей команды: + +``` +php artisan vendor:publish --tag=laravel-mail +``` -Полное описание по установке Laravel Jetstream можно найти в [официальной документации Jetstream](https://jetstream.laravel.com). +Это сгенерирует несколько файлов в `resources/views/vendor/mail`. Вы можете изменить любой из этих файлов, а также файл `resources/views/vendor/mail/themes/default.css`, чтобы изменить внешний вид и внешний вид шаблона электронной почты по умолчанию.