Come si presenta il tuo flusso di lavoro con react.js insieme al backend?

Question

Sto sviluppando una semplice applicazione CRM che utilizza Laravel 5.2 e ReactJS. In precedenza li stavo usando in modo indipendente, ma ora voglio provare a combinarli insieme in modo che Laravel sia la mia API e il front-end sarà tutto in ReactJS.

Per quanto ne so, quando la mia app è pronta per andare a vivere servirò mio punto di vista master, che comprende div radice, bundle.js ecc

Quando si tratta di una parte di sviluppo Sono un po 'confuso. Mi piace davvero molto reagire alla ricarica, ma per ora ho dovuto fare un piccolo giro per farlo funzionare.

Eseguo due server affiancati. Webpack-dev-server e homestead, quindi sono in grado di effettuare chiamate alla mia API. Ma devo anche avere index.html aggiuntivo per webpack-dev-server. Quando cambio qualcosa nella mia vista index.blade.php ho anche bisogno di cambiare questo in index.html e questo è un po 'di dolore.

C'è qualche trucco interessante che posso applicare per migliorare il mio flusso di lavoro? Se c'è qualche esempio per favore forniscimi un link, perché non ero in grado di trovarne uno. Ci sono molte piccole app di Todo che in realtà non risolvono il mio problema.

PS. Attualmente sto usando questo approccio https://github.com/sexyoung/laravel-react-webpack

@UPDATE

Beh credo di aver trovato una soluzione accettabile. Continuerò con la configurazione del server webpack che ho fornito nella mia domanda (è davvero grande perché puoi usare hot ricaricare + le chiamate API vengono reindirizzate alla porta backend, quindi invece di localhost: 8080/api/utente ... chiami/api/user/1), ma ho anche sviluppato una semplice estensione elisir che compila php in una semplice pagina HTML statica che risolve il problema della modifica di due file indice (tutti sappiamo che i programmatori sono pigri).

var php2html = require("gulp-php2html"); 
var gulp = require("gulp"); 
var rename = require("gulp-rename"); 
var Task = elixir.Task; 

elixir.extend("php2html", function (message) { 
    new Task("php2html", function() { 
     return gulp.src("./resources/views/index.blade.php") 
      .pipe(php2html()) 
      .pipe(rename('index.html')) 
      .pipe(gulp.dest("./")); 
    }) 
    .watch("resources/views/index.blade.php"); 
}); 

elixir(function (mix) { 
    mix.sass('app.scss'); 
    mix.php2html(); 
}); 

Quindi al momento ho due file di indice:

• index.blade.php di risorse/punti di vista che viene risolto mediante il router sulla produzione

• index.html in root della mia cartella applicativa utilizzata da webpack-dev-server per lo sviluppo

e di c ora questi file sono causa di sincronizzazione dell'orologio :)

Se c'è un approccio migliore fammi sapere ragazzi.

Answer 1

solito ho risolto questo problema (duplicato file index.html/PHP) utilizzando questo plugin webpack: https://github.com/ampedandwired/html-webpack-plugin

L'idea è l'opposto del tuo credo. Invece di compilare i file php in html statico, puoi utilizzare il plugin HtmlWebpack per generare un file index.tmpl.php (o qualsiasi estensione tu abbia bisogno) usando l'opzione di configurazione filename. Normalmente ho impostato tale percorso come cartella dei template del mio application server.

Credo che questo approccio sia generalmente più semplice rispetto al contrario. L'utilizzo di questo plug-in ha altri vantaggi, come l'iniezione di tag script bundle automatici in base alla configurazione di output Webpack e l'hash del file di bursting automatico della cache aggiunto agli URL dei tag di script.