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

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

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

Дополнительно:

Короче вывод один, что на данный вопрос нет ответа никакого, вообще, вы никак не соедините Yii и react.

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

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

• Сказочный д...б

Ответы:

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

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

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

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

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

  spoiler

  

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

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

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

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

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

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

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

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

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

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

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

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

  index.js

  PHP

  import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( &lt;React.StrictMode&gt; &lt;App /&gt; &lt;/React.StrictMode&gt; );

  1	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

  PHP

  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 = () =&gt; { return ( &lt;BrowserRouter&gt; &lt;Navbar /&gt; &lt;Routes&gt; &lt;Route path='/' element={&lt;Blog /&gt;}&gt;&lt;/Route&gt; &lt;Route path='/detali' element={&lt;Detali /&gt;}&gt;&lt;/Route&gt; &lt;Route path='/profile' element={&lt;Profile /&gt;}&gt;&lt;/Route&gt; &lt;Route path='/settings' element={&lt;Settings /&gt;}&gt;&lt;/Route&gt; &lt;Route path='/login' element={&lt;Login /&gt;}&gt;&lt;/Route&gt; &lt;Route path='/signup' element={&lt;Signup /&gt;}&gt;&lt;/Route&gt; &lt;Route path='/about' element={&lt;About /&gt;}&gt;&lt;/Route&gt; &lt;Route path='/policy' element={&lt;Policy /&gt;}&gt;&lt;/Route&gt; &lt;Route path='/contacts' element={&lt;Contacts /&gt;}&gt;&lt;/Route&gt; &lt;/Routes&gt; &lt;Footer/&gt; &lt;/BrowserRouter&gt; ) } export default App

  1

  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

  PHP

  { "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": [ "&gt;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" } }

  1

  {   "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 все это

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

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

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

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

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

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

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

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

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

  

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

  

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

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

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

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

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

• Shurik, Нет, потому что меня это не устраивает. С этими файлами нельзя никак работать, нет страниц на которые мне нужно будет выводить информацию. Вывести просто голый макет с которым нельзя ничего сделать, ну такое себе...
• Shurik, Мне эти файлы понятны, непонятно зачем это все закинуто в один файл и как потом пользоваться данным чудом и расширять его, если потребуется... Мне нужно оставить всю структуру как есть и подключить библиотеки, которые бы оставляли структуру всю, но при рендере страницы в браузер переводили весь этот jsx в чистый js. По другому к сожалению нельзя. Каждый раз делать build когда что то поменялась, это мягко говоря глупо, все это должно делаться на лету при рендере страницы
• RusticAnd, вы не понимаете сути.
  запускаете npm start и работаете со своим кодом, при этом все изменения отображаются тут же, за это отвечает нода. Так и работаете пока не доделаете все, либо часть функционала. По идее это надо использовать при разработке локально. Приложение при этом доступно по localhost:3000

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  1	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 сейчас это просто картинка, там не должно быть серверного кода, кроме пары строк вывода информации в цикле.

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

  { "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": [ "&gt;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" } }

  1

  {   "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"   } }

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

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

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

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

• Shurik, Нет, все равно 404
  PHP

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

  1	PS C:UsersandruРабочий стол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 это мусор