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.
- Установите приложение Laravel 9
- Установите зависимости NPM
- Установить реакцию
- Установите плагин vitejs/plugin-react
- Обновить vite.config.js
- Запуск сервера Vite Dev
- Создать компонент Reactjs
- Обновите файл app.js в папке ресурсов
- Создайте собственный помощник для активов Vite
- Подключите компонент Reactjs к блейд-файлу Laravel
- Обновить файл .env
- Запустите локальный сервер
Шаг 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.