Jak wygląda Twój workflow w pliku react.js wraz z zapleczem?

Question

Pracuję nad prostą aplikacją CRM przy użyciu Laravel 5.2 i ReactJS. Poprzednio używałem ich niezależnie, ale teraz chcę spróbować połączyć je razem, więc Laravel będzie moim API, a front-end będzie w ReactJS.

O ile mi wiadomo, kiedy moja aplikacja jest gotowa iść na żywo będę służył mój widok główny, który zawiera główny div, bundle.js itp

Jeśli chodzi o części rozwojowej jestem trochę zdezorientowany. Uwielbiam reagować na gorące przeładowania, ale na razie musiałem zrobić mały spacer, żeby to zadziałało.

biegam dwa serwery obok siebie. Webpack-dev-server i homestead, więc mogę wykonywać połączenia z moim API. Ale muszę też mieć dodatkowy index.html dla webpack-dev-server. Kiedy zmieniam coś w moim widoku index.blade.php, muszę to również zmienić w tym index.html i to jest trochę uciążliwe.

Czy istnieją jakieś fajne sztuczki, które mogą ubiegać się poprawić swój obieg? Jeśli istnieje jakiś przykład, proszę podać link, ponieważ nie udało mi się go znaleźć. Istnieje wiele małych aplikacji todo, które tak naprawdę nie rozwiązują mojego problemu.

PS. Obecnie używam tego podejścia https://github.com/sexyoung/laravel-react-webpack

@UPDATE

Dobrze myślę odkryli akceptowalnego rozwiązania. Będę trzymać się konfiguracji serwera Webpack, którą dostarczyłem w moim pytaniu (jest naprawdę świetny, ponieważ możesz użyć hot reload + wywołania api są przekierowywane do portu zaplecza, więc zamiast localhost: 8080/api/user ... ty dzwonisz/api/user/1), ale również opracowali proste rozszerzenie eliksir, który kompiluje PHP prostej statycznej strony HTML, która rozwiązuje problem edycję dwóch plików indeksowych (wszyscy wiemy, programiści są leniwi).

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(); 
}); 

Więc w tej chwili mam dwa pliki index:

• index.blade.php w zasoby/widoki który został rozwiązany przez router na produkcji

• index.html w katalog główny mojego folderu aplikacji używanego przez serwer Webpack-dev do rozwoju

oraz c ourse teraz te pliki są sync przyczyną haustem zegarek :)

Jeżeli istnieje lepsze podejście daj mi znać facetów.

Answer 1

ja zwykle rozwiązał ten problem (powielony plik index.html/php) za pomocą tej wtyczki WebPACK: https://github.com/ampedandwired/html-webpack-plugin

Pomysł jest przeciwieństwem twojego myślę. Zamiast kompilacji plików php w html statycznej, można użyć wtyczki HtmlWebpack do wyjścia plik index.tmpl.php (lub cokolwiek przedłużacza trzeba) używając opcji filename konfiguracji. Zwykle ustawiam tę ścieżkę na folder szablonów mojego serwera aplikacji.

Wierzę, że to podejście jest zazwyczaj łatwiejsze niż robi odwrotnie. Używanie tej wtyczki ma inne zalety, takie jak automatyczne dodawanie tagów skryptów pakowania w zależności od konfiguracji wyjściowej Webpack oraz automatyczne mieszanie pliku z rozszerzeniem pamięci podręcznej do adresów URL znaczników skryptu.