13 июля 2022 г. Первоначально опубликовано на techvblogs.com・5 мин. на чтение

Laravel только что выпустил "laravel 9.19" с серьезными изменениями. В корне laravel больше нет файла webpack.mix.js вместо webpack.mix.jsфайла vite.config.js .

В этом посте мы узнаем, как установить React js 3 в laravel 9.19 с помощью vite?. В этом посте показано, как установить React в laravel 9 с последними обновлениями. Если вы хотите увидеть пример установки react 3 в laravel-vite, то вы попали по адресу. Laravel 9.19 с vite — это последняя версия фреймворка laravel на момент написания этой статьи. Как вы знаете, Laravel — самый популярный PHP-фреймворк, он прост в использовании и гибок.

React — это внешняя библиотека JavaScript с открытым исходным кодом для создания пользовательских интерфейсов или компонентов пользовательского интерфейса. Он поддерживается Facebook и сообществом отдельных разработчиков и компаний. React можно использовать как основу при разработке одностраничных или мобильных приложений.

К концу этого поста вы сможете создать приложение React и Laravel 9.19 на базе vite. Мы также узнаем, как создать компонент реакции и соединить его с блейд-файлом laravel 9.

Как установить React в Laravel 9 с помощью Vite

Используйте следующие шаги, чтобы установить React в приложении laravel 9.

  1. Установите приложение Laravel 9
  2. Установите зависимости NPM
  3. Установить реакцию
  4. Установите плагин vitejs/plugin-react
  5. Обновить vite.config.js
  6. Запуск сервера Vite Dev
  7. Создать компонент Reactjs
  8. Обновите файл app.js в папке ресурсов
  9. Создайте собственный помощник для активов Vite
  10. Подключите компонент Reactjs к блейд-файлу Laravel
  11. Обновить файл .env
  12. Запустите локальный сервер

Шаг 1: Установите приложение laravel 9

Сначала откройте терминал и выполните следующую команду, чтобы создать новый проект laravel:

composer create-project --prefer-dist laravel/laravel:^9.0 laravel9-react-vite

или, если вы установили установщик Laravel как глобальную зависимость композитора:

laravel new laravel9-react-vite

Шаг 2. Установите зависимости NPM

Выполните следующую команду, чтобы установить внешние зависимости:

npm install

Шаг 3: Установите React

Теперь, после установки узловых модулей, нам нужно установить reactjs в наше приложение, для этого выполните в терминале следующую команду: npm install react@latest react-dom@latest. Он также установит последнюю версию reactjs и react-dom. мы будем использовать его в файле jsx.

npm install react@latest react-dom@latest

Шаг 4: Установите плагин vitejs/plugin-react

В последнем выпуске laravel 9 установите плагин vitejs/plugin-react для установки reactjs в laravel. Этот плагин предоставляет необходимые зависимости для запуска приложения reactjs на vite. Vite — это команда сборки, которая связывает ваш код с Rollup и работает на порту localhost: 3000, чтобы обеспечить функцию горячего обновления.

npm i @vitejs/plugin-react --force
npm i @vitejs/plugin-react-refresh --force

Шаг 5: Обновите файл vite.config.js

Последняя версия 9.19 Предоставляет файл vite.config.js в корне приложения для настройки предустановленных ресурсов внешнего интерфейса, импорта плагина-реакции и добавления реакции() в массив плагинов в функции defineConfig().

import reactRefresh from '@vitejs/plugin-react-refresh';

export default ({ command }) => ({
    base: command === 'serve' ? '' : '/build/',
    publicDir: 'fake_dir_so_nothing_gets_copied',
    build: {
        manifest: true,
        outDir: 'public/build',
        rollupOptions: {
            input: 'resources/js/app.js',
        },
    },
    plugins: [
        reactRefresh(),
    ],
});

Шаг 6: Запуск сервера Vite Dev

Теперь, после установки reactjs, нам нужно запустить сервер разработки для vite, чтобы выполнить следующую команду, и он будет следить за вашим файлом resources/js/app.js и resources/css/app.css. Он также запускает vite-сервер на http://localhost:3000. вы не можете открыть его в браузере, так как он предназначен для горячей перезагрузки, работает в фоновом режиме и просматривает активы вашего приложения, такие как js и CSS.

npm run dev

Шаг 7: Создайте компонент Reactjs

В папке resources/js создайте имя файла App.jsx и напишите содержимое для этого примера, давайте напишем простое «Reactjs With Laravel Vite». может изменить его в соответствии с вашими требованиями.

// resources/js/App.jsx
import React from 'react';
import { createRoot } from 'react-dom/client'
export default function App(){
    return(
        <h1>How To Install React in Laravel 9 with Vite</h1>
    );
}
if(document.getElementById('root')){
    createRoot(document.getElementById('root')).render(<App />)
}

Шаг 8: Обновите файл app.js в папке ресурсов

В resources/js/app.js импортируйте компонент App.jsx.

// resources/js/app.js
import './bootstrap';
import './App.jsx'

Шаг 9: Создайте собственный помощник для активов Vite

Чтобы обойти это, мы можем пропинговать localhost:3000. Если он подключается, мы знаем, что сервер разработки работает, и мы можем отображать горячие сценарии.

Это может быть в файле helpers.php, узнайте, как его настроить здесь.

Во-первых, давайте извлечем код, который мы написали в нашем шаблоне Blade, во вспомогательную функцию. Далее мы будем использовать фасад Laravel Http для проверки связи localhost:3000. Если он подключается, мы знаем, что сервер разработки работает.

<?php
use Illuminate\Support\Facades\Http;
use Illuminate\Support\HtmlString;
function vite_assets(): HtmlString
{
    $devServerIsRunning = false;
    
    if (app()->environment('local')) {
        try {
            Http::get("http://localhost:3000");
            $devServerIsRunning = true;
        } catch (Exception) {
        }
    }
    
    if ($devServerIsRunning) {
        return new HtmlString(<<<HTML
            <script type="module" src="http://localhost:3000/@vite/client"></script>
            <script type="module" src="http://localhost:3000/resources/js/app.js"></script>
        HTML);
    }
    
    $manifest = json_decode(file_get_contents(
        public_path('build/manifest.json')
    ), true);
    
    return new HtmlString(<<<HTML
        <script type="module" src="/build/{$manifest['resources/js/app.js']['file']}"></script>
        <link rel="stylesheet" href="/build/{$manifest['resources/js/app.js']['css'][0]}">
    HTML);
}

Шаг 10. Подключите компонент Reactjs к блейд-файлу Laravel.

Теперь нам нужно создать блейд-файл, в который будет загружаться приложение reactjs. В папке resources/views откройте файл с именем welcome.blade.php. Добавьте @vite('resources/js/app.js') внизу файла в файле react.blade.php. Он загрузит все необходимые js для запуска кода Reactjs.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>How To Install React in Laravel 9 with Vite</title>
    {{ vite_assets() }}
</head>
<body>
	<div id="root"></div>
</body>
</html>

Шаг 11: Обновите файл .env

Откройте файл .env и обновите APP_URL и установите APP_URL=http://localhost:8000. Это поможет vite проверять обновления js и CSS и мгновенно менять их в браузере.

APP_URL=http://localhost:8000

Шаг 12: Запустите локальный сервер

Запустите сервер разработки

php artisan serve

и перейдите по следующей ссылке http://localhost:8000/

Спасибо за чтение этого блога.

Вы можете найти репозиторий GitHub здесь suresh-ramani/laravel-react-vite.