Автор Ранее описывалась настройка docker окружения для проекта на базе Laravel и Vue. В этой статье произведем настройку web-приложения с использованием Laravel в качестве backend-части и React в качестве frontend. Так как кому-то может пригодиться создание такого приложения без docker, то начнем с настройки на машине с PHP 8.1 и NPM 8. Затем тот же код запустим в docker использованием docker compose для управления контейнерами.
Содержание
- Создание проекта прямо в Linux без docker
- Создание проекта с использование docker compose
- Сборка для production
Создание проекта прямо в Linux без docker
Итак, у нас есть Linux машина с установленными уже PHP и Node.
% php -v
PHP 8.1.18 (cli) (built: Apr 14 2023 04:39:44) (NTS)
Copyright (c) The PHP Group
Zend Engine v4.1.18, Copyright (c) Zend Technologies
with Zend OPcache v8.1.18, Copyright (c), by Zend Technologies
% node -v
v16.16.0
% npm -v
8.11.0
Laravel 10 требует PHP не менее 8.1. Для react тоже требования зависят от версии. React 18, который оказался наиболее актуален на момент написания статьи, на имеющихся версиях разворачивается успешно. При необходимости версии Laravel и React могут быть скорректированы вместе с версиями PHP и Node.js. Соответствие версий необходимо уточнять в документации.
Создаем проект на базе Laravel 10
composer create-project --prefer-dist laravel/laravel:"^10.0" laravel-reactcd laravel-react
npm install react@latest react-dom@latestnpm install @vitejs/plugin-reactДобавим первоначальные настройки Vite для React, тоесть приведем файл vite.config.js согласно документации Laravel к следующему виду:
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [
laravel(['resources/js/app.jsx']),
react(),
],
});Добавим специальные @vite директивы в шаблон welcome.blade.php:
<!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 10 vite with React</title>
@viteReactRefresh
@vite('resources/js/app.jsx')
</head>
<body>
<div id="app"></div>
</body>
</html>Затем нужно будет создать файл с компонентом-приветствием:
export default function Welcome() {
return <div>Welcome to React</div>;
}И основной файл, который мы указали в конфигурационном файле Vite.js
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import Welcome from './pages/Welcome';
const rootElement = document.getElementById('app');
const root = createRoot(rootElement);
root.render(
<StrictMode>
<Welcome />
</StrictMode>
);
Теперь запустим php-сервер и Vite:
% php artisan serve
INFO Server running on [http://127.0.0.1:8000].
Press Ctrl+C to stop the server
% npm run dev
> dev
> vite
VITE v4.3.5 ready in 334 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h to show help
LARAVEL v10.10.1 plugin v0.7.6
➜ APP_URL: http://localhost
В итоге, перейдя в браузере по адресу http://127.0.0.1:8000, мы получим страницу с текстом “Welcome to React”. При изменении этого текста в файле resources/js/pages/Welcome.jsx он мгновенно будет актуализирован в браузере за счет работы Vite.
Создание проекта с использование docker compose
Будем использовать за основу конфигурационные файлы из статьи про настройку Laravel проекта с Vue (ссылка на статью была выше) и файлы проекта с React, описанного выше. Вы можете получить код приложения на Laravel и React с настройками docker-compose.yml в репозитории с примерами.
Добавим домен в hosts
127.0.0.1 react-laravel-app.localЭтот же домен используем в файле с переменными окружения:
APP_URL=http://react-laravel-app.localСоберем и запустим контейнеры и установим необходимые зависимости composer. Находясь в папке с docker-compose.yml выполним следующие команды:
docker compose up -ddocker compose exec backend composer installТеперь по адресу http://react-laravel-app.local в браузере будет открываться страница с надписью “Welcome to React”.
Сборка для production
Для production сборки frontend-части используется команда npm run build. Чтобы подключить результат сборки на локальный сайт вместо development версии можете воспользоваться инструкциями из README.md репозитория.
Возникшие по данной теме вопросы, предложения и возражения прошу писать в комментариях. Постараюсь ответить всем.