Configurazione di React in un progetto CakePHP

Question

Come posso configurare React nel webroot di CakePHP utilizzando il webpack?

Ho un progetto esistente CakePHP (con Modello, Visualizza, Controller). Voglio impostare il progetto mini React nel suo webroot (Project/Miniproject/index.html). index.html effettuerà chiamate ajax alle API definite nei controller.

- Project 
| - app 
| | - Controller 
| | - View 
| | - Model 
| | - webroot 
| | | - Miniproject 
| | | | - index.html [Mini react project] 

Ho provato a installare React Transform Boilerplate. Ma usa web dev server (e rende i file su localhost: 3000). Ma voglio i file renderizzati dal server nginx su cui è in esecuzione il mio progetto CakePHP.

Quando si visita l'URL (Project/Miniproject/index.html), non è possibile trovare dist/bundle.js perché è in memoria. Quindi, come posso configurare React nel webroot di CakePHP usando il webpack?

Answer 1

Suggerisco di esaminare https://github.com/brawlins/react-webpack-php-starter.

È ancora possibile che Webpack esegua un server di sviluppo tramite BrowserSync e si utilizzerà l'opzione proxy per ricaricare l'host virtuale di apache. (non è necessario utilizzare webpack-dev-server)

ad es. nel tuo webpack.config.js

plugins: [ 

     // reloads browser when the watched files change 
     new BrowserSyncPlugin({ 
      // use existing Apache virtual host 
      proxy: 'http://localhost:80/', 
      tunnel: false, 
      // watch the built files and the index file 
      files: ['public/assets/*', './index.php', './api/*.php'] 
     }), 

Speranza che abbia senso. Scava il codice dal repository che ho linkato e gioco un po 'con esso. Una volta ottenuta l'idea di come @brawlins ha impostato il suo progetto. Dovresti essere in grado di twittarlo o avviare la configurazione del tuo webpack da zero.

Ricorda solo che non esiste una risposta corretta, devi solo sperimentare metodi che puoi capire e che funzionano per te. Una volta raggiunto un muro di mattoni, esci ed esplori. Ma mi sembra che tu lo sappia già :)

Buona fortuna!

:)

p.s. Sono d'accordo con @azium, è meglio mantenere il front end e il back-end separati il ​​più possibile