Настройка Laravel + React с docker и без – iTelmenko. Блог о веб-разработке

Ранее описывалась настройка 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-react

cd laravel-react 
npm install react@latest react-dom@latest

npm 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 -d

docker compose exec backend composer install

Теперь по адресу http://react-laravel-app.local в браузере будет открываться страница с надписью “Welcome to React”.

Сборка для production

Для production сборки frontend-части используется команда npm run build. Чтобы подключить результат сборки на локальный сайт вместо development версии можете воспользоваться инструкциями из README.md репозитория.

Возникшие по данной теме вопросы, предложения и возражения прошу писать в комментариях. Постараюсь ответить всем.