Как Yii2 связать с фронт проектом на react?

Question

RusticAnd @RusticAnd

Yii

Как Yii2 связать с фронт проектом на react?

Подскажите пожалуйста как Yii2 связать с фронт проектом на react? Человек сделал фронт на реакте, теперь задача его как то натянуть на yii2. В инете вообще внятного ничего нет. Какие-то библиотеки может надо использовать, если не сложно напишите список этих библиотек.

С реактом ни разу не общался, поэтому не понимаю куда этот проект вообще закидывать в yii.

Вопрос задан 12 окт. 2023
244 просмотра

Комментировать

Подписаться 1 Простой Комментировать

Пригласить эксперта

Ответы на вопрос 1

34 комментария

RusticAnd @RusticAnd Автор вопроса

Про точку входа более менее понимаю, спасибо.

Вот смотрите, у меня есть вот такое фронт приложение написанное на реакте.

spoiler

Если я правильно понимаю, его же как то надо подключить, не только index.html. Так вот, вопрос, куда его нужно закинуть в структуре yii2, просто я работал с обычными шаблонами с такими вообще ни разу.

Может библиотеки подскажите какие нибудь, я буду благодарен.

Просто я читал где то, что для файлов jsx нужны какие то библиотеки, а какие я так и не понял

Написано 12 окт. 2023
Shurik @svisch

RusticAnd, то, что вы на скрине указали - это не совсем ваше приложение. Приложение index.html должно появиться после билда (npm run build) в то место, куда вы укажите в настройках. По-умолчанию не помню куда, но точно в корень проекта реакт.
На счет куда закинуть в структуре yii2 в принципе не важно. Главное, чтобы yii2 мог его отрендерить. К примеру в symfony по-умолчанию можно рендерить шаблоны только в папке templates. Для изменения этого поведения надо настройки менять. Не помню как в yii2 но вроде никаких ограничений нет. Но я в принципе делаю в билд в корневую папку сервера (в случае c yii2 это web), например project_folder/web/dist - в dist билдится реакт. Но можно и в frontend/dist например сбилдить и с контроллера его отрендерить.

Написано 12 окт. 2023
Shurik @svisch

RusticAnd, важно обратить внимание, если пошел по первому пути - то у тебя другой метод - renderFile

Написано 12 окт. 2023
RusticAnd @RusticAnd Автор вопроса

Shurik, ну это делал человек, не я. Этот index.html как раз относится ко всему приложению, так как в нем структура html с id скрипта который указан в index.js.

Если просто закинуть проект в веб, указать index.js в asset то 404 вылетает, видимо еще что то нужно сделать. Или какие то библиотеки нужны... Смущает еще что в этом приложении есть json типа компосера, их видимо тоже как то в структуру Yii2 надо перенести

Написано 12 окт. 2023
Shurik @svisch

RusticAnd, посмотрите внимательно тот файл, что вы приводите. Где хоть один скрипт js подключаемый, который есть реакт? Что по вашему должен выводить этот файл?

Написано 12 окт. 2023
RusticAnd @RusticAnd Автор вопроса

Shurik, там прикол в том, что вся инфа выводится в index.html по id из js, в index.js идут все подключения и передача этого id. Сейчас не у пк не могу показать код. Вот и прикол, что тебе в yii надо по идее во view прописать только эту html структуру, подключить скрипт в asset , но если я правильно понял все, то нужны какие то библиотеки для yii чтобы эти файлы возможно было загрузить. Файлы jsx. Потому что этот проект так просто в браузере без node.js не запустить.

Вот и проблема, которую я не понимаю, как все это заставить работать))) инфы почти нет, где бы по полкам что то обьяснили

Написано 12 окт. 2023
RusticAnd @RusticAnd Автор вопроса

Shurik, вот структура типа
spoiler
<body><div id="node"></div></body>

Остальной html уже подгружается через js

Написано 12 окт. 2023
Shurik @svisch

почитайте тут
Тот файл, про который вы говорите нужен для разработки, когда выполняете команду npm start. Но есть еще и билд. Там все написано.

Написано 12 окт. 2023

RusticAnd @RusticAnd Автор вопроса

Shurik, К сожалению вообще ничего не написано. Я в принципе не должен разбираться в реакте, мне нужно просто его подключить к yii2

тот файл index.html как раз тот, который и выводит всю информацию на экран, но с помощью нода. А мне нужно чтобы выводил с помощью yii2. Те инструкции которые я нашел в инете, так и делают, подключают файл скрипта с точкой входа в asset и все работает.. только проблема в том, что они подрубают только один файл, без css и прочего, которое прописано в этом приложении.

Мой файл точки входа

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

дальше по структуре идет файл

App.js

import React from 'react'
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import Navbar from './components/Navbar'
import Blog from './pages/Blog'
import Detali from './pages/Detali'
import Profile from './pages/Profile'
import Settings from './pages/Settings'
import Login from './pages/Login'
import Signup from './pages/Signup'
import About from './pages/About'
import Policy from './pages/Policy'
import Contacts from './pages/Contacts'
import Footer from './components/Footer'
import 'bootstrap/dist/css/bootstrap.min.css'


const App = () => {
  return (
    <BrowserRouter>
      <Navbar />
        <Routes>
            <Route path='/' element={<Blog />}></Route>
            <Route path='/detali' element={<Detali />}></Route>
            <Route path='/profile' element={<Profile />}></Route>
            <Route path='/settings' element={<Settings />}></Route>
            <Route path='/login' element={<Login />}></Route>
            <Route path='/signup' element={<Signup />}></Route>
            <Route path='/about' element={<About />}></Route>
            <Route path='/policy' element={<Policy />}></Route>
            <Route path='/contacts' element={<Contacts />}></Route>
        </Routes>
        <Footer/>
    </BrowserRouter>
  )
}

export default App

Мне скорее всего нужна какая то библиотека, но какая я не могу понять, и еще куда закинуть эти файлы и какие нужно взять, а какие можно не брать. Так как в этом проекте есть свои настройки зависимости, типа

package.json

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@fortawesome/free-brands-svg-icons": "^6.4.2",
    "@fortawesome/free-solid-svg-icons": "^6.4.2",
    "@fortawesome/react-fontawesome": "^0.2.0",
    "bootstrap": "^5.3.2",
    "cra-template": "1.2.0",
    "react": "^18.2.0",
    "react-bootstrap": "^2.8.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.16.0",
    "react-scripts": "5.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
    "web-vitals": "^3.4.0"
  }
}

и что с ними делать не понятно, оставить так как есть либо надо перенести в yii все это

Написано 13 окт. 2023

Shurik @svisch

тот файл index.html как раз тот, который и выводит всю информацию на экран, но с помощью нода.

все верно - этот файл работает с помощью ноды - это когда вы запускаете npm start
вам надо выполнить npm run build и вам нода сделает билд проекта в другой index.html файл (если настройки не менялись, то это будет вроде папка dist) и рядом другие js и css файлы, которые в index.html будут подключены уже. Вот для него уже нода не нужна и его то и надо рендерить в yii2. Никаких библиотек не нужно.

Написано 13 окт. 2023
RusticAnd @RusticAnd Автор вопроса

Shurik, Спасибо, теперь немного начал понимать, попробую)

Написано 13 окт. 2023
RusticAnd @RusticAnd Автор вопроса

Shurik, Сделал npm run build, и все создалось в одной папке, только теперь нет важных файлов index.js и App.js, нет страниц которые были созданы, это скорее всего совсем не то что надо.

Такой проект во первых не открывается просто по index.html, а если он стал структурированным и переведенным на чистый js, то он должен открыться в браузере без команд лишних и без сервера.

Во вторых, им к сожалению нельзя больше управлять со стороны фронта, а это нужно, как минимум получать инфу из api и выводить ее на страницы.

Сделан вывод, что все таки нужны библиотеки какие то для Yii2, чтобы запускать данное приложение и код. Тот html он точно подходит для этого, id которое там указано, зарегистрировано в приложении, для работы вывода страниц, и оно будет отрабатывать, так как js будет подключен в корень проекта, но нужна библиотека обработки тех же jsx, по другому никак.

Эта команда все таки ничего не сделала вообще. кроме как весь js скинула в один файл в кучу, и все равно без программы типа нод ее не запустить

Написано 13 окт. 2023
RusticAnd @RusticAnd Автор вопроса

Shurik, Если посмотреть по структуре, которую я вам дал, мне по сути index/html вообще не нужен, он нужен чтобы отобразить дальнейшую инфу, все страницы находятся в src/pages

продублирую иерархию с этими страницами
spoiler

А с этой командой получилось вот так
spoiler

Как видно вообще нет важных файлов, нет страниц в принципе, какие то непонятные js файлы и все...

спасибо конечно за помощь и ответы, но это вообще не то что нужно

Написано 13 окт. 2023
Shurik @svisch

RusticAnd, вы пробовали его рендерить в Yii2 этот index.html созданный?

Написано 13 окт. 2023
Shurik @svisch

Как видно вообще нет важных файлов, нет страниц в принципе, какие то непонятные js файлы и все...

Все ваши файлы компонентов и прочее теперь лежат в этих "непонятных" вам файлах. Так и должно быть. Эту работу делает Webpack при билде.

Написано 13 окт. 2023
RusticAnd @RusticAnd Автор вопроса

Shurik, Нет, потому что меня это не устраивает. С этими файлами нельзя никак работать, нет страниц на которые мне нужно будет выводить информацию. Вывести просто голый макет с которым нельзя ничего сделать, ну такое себе...

Написано 13 окт. 2023
RusticAnd @RusticAnd Автор вопроса

Shurik, Мне эти файлы понятны, непонятно зачем это все закинуто в один файл и как потом пользоваться данным чудом и расширять его, если потребуется... Мне нужно оставить всю структуру как есть и подключить библиотеки, которые бы оставляли структуру всю, но при рендере страницы в браузер переводили весь этот jsx в чистый js. По другому к сожалению нельзя. Каждый раз делать build когда что то поменялась, это мягко говоря глупо, все это должно делаться на лету при рендере страницы

Написано 13 окт. 2023
Shurik @svisch

RusticAnd, вы не понимаете сути.
запускаете npm start и работаете со своим кодом, при этом все изменения отображаются тут же, за это отвечает нода. Так и работаете пока не доделаете все, либо часть функционала. По идее это надо использовать при разработке локально. Приложение при этом доступно по localhost:3000

после того, как надо перенести все на прод, вы запускаете npm run build и проект билдится в статику. Тут уже ничего править не надо

Написано 13 окт. 2023
Shurik @svisch

Важно, при работе в режиме разработки (npm start) у вас на бэкэенд вряд ли будут посылаться запросы из за политики CORS. Надо настроить веб сервер, чтобы отдавал нужные заголовки.

Написано 13 окт. 2023
RusticAnd @RusticAnd Автор вопроса

Shurik, нет это так не работает и выглядит очень глупо. Все должно делаться в лайв. Даже если учесть то что я на локалке все делаю, мне этот способ не даёт ничего править, так как фронт и будет часть бэкенда, и туда нужно вносить коррективы. Все файлы должны быть в той иерархии как они есть сейчас и никак иначе, для этого yii обязап обрабатывать эти файлы с помощью библиотек, а не я каждую секунду перезаливать проект в систему yii.этт даже звучит бредово...

Чтобы работать с yii react надо чтобы фронт был в непонятном файле))) в который потом ничего не подключить....

Как я буду делать связь тогда с API? Нет, это точно не тот метод, который должен быть, даже чисто логически это понятно

Написано 13 окт. 2023
RusticAnd @RusticAnd Автор вопроса

Shurik, я об этом в курсе, это вроде не сложно настраивается, надо заголовки передать

Написано 13 окт. 2023
Shurik @svisch

RusticAnd, вы спорите по факту не зная сами как это должно быть. Хотите чтобы было в лайве - на проде можете также запустить npm start, у вас на хосте на порту 3000 будет работать ваше реакт приложение. Для прода однозначно то, как говорю я. Но в целом где то на сервере работать с реатом в режиме разработки имхо плохая практика. Что мешает работать локально и слать запросы к api на сервер, если знания не позволяют развернуть все локально?!

Написано 13 окт. 2023
RusticAnd @RusticAnd Автор вопроса

Shurik, я спорю исключительно из того, что знаю. Я видел как люди запускали без этого приложения, но не на yii, так же статьи где не было ни слова о том, что надо делать build. Единственное что там ни слова не сказано, как запустить целый проект таким образом. Куда его положить и т.д. я уверен yii имеет библиотеки, которые помогут работать с данными.

Еще раз повторюсь, в слепую собирать проект, потом его форматировать и если нужна правка обратно все возвращать и опять форматировать, глупо. Так точно никто не делает, уверен на 1000%. Все должно работать из одного места, с одной точкой входа index.js, и то что не запускается, проблема как раз в чтении данных файлов jsx, которым и нужна библиотека. Поэтому и вопрос , куда вставить такие проекты и какие библиотеки можно подключить, так как инфы мало по данному событию

Написано 13 окт. 2023
RusticAnd @RusticAnd Автор вопроса

Shurik, и еще раз, я хочу собрать все на локалке, потом прод, это логично, но собрать так, чтобы потом фронт не чесал голову, как исправить то или другое. Многие страницы еще не написаны, но запустить все это на локалке и посмотреть результат надо сейчас. Мне не надо сервер на фронте, мне надо сервер на yii, а вы мне предлагаете чтобы сервер держался на отдельном приложении, на проде, а yii был просто как API, зачем мне держать все это на том же хосте и подрубать вместо PHP , node.js, только для того, чтобы запустить это приложение

Написано 13 окт. 2023
Shurik @svisch

еще раз, я хочу собрать все на локалке, потом прод, это логично

не понимаю, что вам мешает работать на локалке следующим образом:
- выполняете npm start (так вы можете править на горячую)
- поднять yii локально и посылать к нему запросы
- когда заканчиваете работу и больше не предвидится изменений - заливаете на прод и делаете билд

Возможно где-то выше я вам назначение index.html трактовал не с 100% точностью, но уверяю, если сделаете по этой схеме, то вы будете видеть изменения в ваших компонентов в real-time

Написано 14 окт. 2023
RusticAnd @RusticAnd Автор вопроса

Shurik, потому что это 2 приложения, а мне нужно по сути одно.

Поддерживать такой проект будет сложно, очень. Даже маленькая правка, которую спокойно можно сделать на сервере, на проде, будет идти на локалку, и потом опять проделывать ту же работу... нет, такие приложения автоматом не подлежат поддержке и так делать категорически нельзя

Написано 14 окт. 2023
RusticAnd @RusticAnd Автор вопроса

Shurik, плюс мне надо чтобы все страницы можно было настраивать в чпу yii2, потому что смысл yii2 без этого пропадет. Все это делается из за сео, иначе можно было взять фрейм от js и все натянуть без проблем на него

Написано 14 окт. 2023
RusticAnd @RusticAnd Автор вопроса

Shurik, подключил вашим методом, все работает, НО, yii все равно дает ошибку 404... Хотя страница подгружается. Это не есть хорошо, значит поисковики так же будут считать, что страницы нет, когда она есть.. ВОт поэтому нужно подключать все это с помощью библиотек, которые будут рендерить нормально страницу и отдавать чистый html а не пустую страницу, которая подгружается уже после загрузки браузера. По сути, то что я вижу, этого нет и не будет, это мираж для браузера

Написано 14 окт. 2023
RusticAnd @RusticAnd Автор вопроса
Shurik,
public function actionIndex() { Yii::$app->response->format = Response::FORMAT_HTML; return $this->renderFile('@app/web/build/index.html'); // return $this->render('index'); }

Подключил этим способом, но этот способ и не будет работать, как и дал результат данного подключения, пустая страница. Так как скрипты подключаются в ассетах а не в каких то Html, поэтому yii их не видит...

Получается и тот и этот способ нормально не отрабатывает,а значит вывод, что я прав, так нельзя делать ни в коем случае, смысл тогда yii использовать, когда его методами и библиотеками пользоваться не будешь. Та же пагинация в Yii удобная, но тут ее не вставить никак, и придется писать костыли на каких то js.

Я как раз понимаю как работает фреймворк, поэтому и говорю факт того, что так как вы сказали работать не будет, и на практике мы в этом убедились. Поэтому я попросил названия библиотек и помощь, как этот проект именно залить, натянуть, на yii2, чтобы каждая страница была активна и ей можно было управлять с сервера yii2 а не писать код дубляж еще и на js. Js сейчас это просто картинка, там не должно быть серверного кода, кроме пары строк вывода информации в цикле.
Написано 14 окт. 2023
Shurik @svisch

RusticAnd, скорее всего что-то с подключением скриптов - не правильные пути. Покажите свой package.json

Написано 15 окт. 2023
RusticAnd @RusticAnd Автор вопроса

Shurik, чуть выше я скидывал его, сейчас на работе не могу с тел скинуть .

Написано 16 окт. 2023

RusticAnd @RusticAnd Автор вопроса

Shurik,

package.json

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@fortawesome/free-brands-svg-icons": "^6.4.2",
    "@fortawesome/free-solid-svg-icons": "^6.4.2",
    "@fortawesome/react-fontawesome": "^0.2.0",
    "bootstrap": "^5.3.2",
    "cra-template": "1.2.0",
    "react": "^18.2.0",
    "react-bootstrap": "^2.8.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.16.0",
    "react-scripts": "5.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
    "web-vitals": "^3.4.0"
  }
}

Вроде получилось

Написано 16 окт. 2023

Shurik @svisch

Попробуйте в разделе scripts заменить:
"build": "react-scripts build"
на
"build": "react-scripts build && rm -rf '../web/dist' && mv build ../web/dist",

и до dependencies вставить:
"homepage": "localhost/dist"

после этого пересоберите проект

Написано 16 окт. 2023
RusticAnd @RusticAnd Автор вопроса
Shurik, Нет, все равно 404

PS C:\Users\andru\Рабочий стол\my-app> npm run build > my-app@0.1.0 build > react-scripts build && rm -rf '../web/dist' && mv build ../web/dist Creating an optimized production build... Compiled with warnings.

ошибка такая появляется при билде, возможно из за этого... Ну да ладно, надоело мне со всякими недореактами возиться, проще самому написать нормальный шаблон без всяких гамноjs и прочей нечести и спокойно его подключить.. Еще раз убедился, js это мусор
Написано 16 окт. 2023

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

Yii

Средний
Почему не работает skipOnEmpty для required?
- 1 подписчик
- 25 апр.
- 42 просмотра
1

ответ
Yii

Простой
Можно ли сделать динамическую модель для таблиц в Yii2?
- 1 подписчик
- 14 апр.
- 38 просмотров
0

ответов
Yii

+1 ещё

Средний
Почему открывается папка (директория) вместо страницы docker yii2?
- 1 подписчик
- 12 апр.
- 72 просмотра
1

ответ
Yii

Простой
Почему приходит пустой массив?
- 1 подписчик
- 09 апр.
- 35 просмотров
0

ответов
PHP

+1 ещё

Простой
Как исправить баг со списком?
- 1 подписчик
- 09 апр.
- 82 просмотра
1

ответ
Yii

Простой
Как правильно указать путь к файлу который нужно использовать по умолчанию?
- 1 подписчик
- 04 апр.
- 40 просмотров
0

ответов
Yii

+1 ещё

Средний
Yii2 codeception REST API mock external API?
- 1 подписчик
- 03 апр.
- 74 просмотра
1

ответ
Yii

Простой
Как сделать, чтобы если пользователь сайта не загрузил свой favicon, то использовать favicon который я загрузил сам?
- 1 подписчик
- 03 апр.
- 49 просмотров
0

ответов
PHP

+1 ещё

Простой
Почему не загружаются картинки yii2?
- 1 подписчик
- 02 апр.
- 50 просмотров
1

ответ
Yii

Простой
Как подключить сохранение в базу данных картинки которую загрузил пользователь?
- 1 подписчик
- 29 мар.
- 34 просмотра
1

ответ
Показать ещё Загружается…

Backend-разработчик на Yii2 на проектную занятость

E-Produce

До 220 000 ₽

Backend-разработчик

НПО «СтарЛайн» • Санкт-Петербург

от 250 000 ₽

Senior Backend Developer (PHP, Yii2, удаленно)

Студворк

от 200 000 до 300 000 ₽

Трафик на игровой проект

27 апр. 2024, в 17:31

150000 руб./за проект

Помощь с версткой WPF/XAML

27 апр. 2024, в 16:39

1000 руб./в час

Паррсер-краулер на Go

27 апр. 2024, в 16:38

30000 руб./за проект

Answer 1 · 2023-10-12 14:40:17

у вас будет по факту два приложения: одно на бэкэнде, другое на фронте. У каждого из них своя точка входа (yii2 - index.php, react - index.html).
Суть примерно в следующем, при обращении к доменному имени делается запрос к веб серверу, а там уже в зависимости от того, какие там настройки. Можно указать смотреть на точку входа в yii2 или react. Если yii2, то в действиях котроллеров по роутам, соответствующим роутам реакта надо рендерить входную точку ректа:

public function actionIndex()
     {
         Yii::$app->response->format = Response::FORMAT_HTML;
         return $this->renderFile('@app/web/dist/index.html');
     }

т.е. веб сервер обращается к index.php, а тот уже в свою очередь рендерит реакт.

Во втором случае сразу будет загружаться SPA

Как Yii2 связать с фронт проектом на react?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт