How does your workflow looks like with react.js along with backend?

Question

I am developing a simple CRM app using Laravel 5.2 and ReactJS. Previously I was using them independently, but now I want to try to combine them together so Laravel will be my API and front-end will be all in ReactJS.

As far as I know when my app is ready to go live I will serve my master view which includes root div, bundle.js etc.

When it comes to development part I am a little confused. I really love react hot reload, but for now I had to do a little walk around to make this works.

I run two servers side by side. Webpack-dev-server and homestead, so I am able to do calls to my API. But I also have to have additional index.html for webpack-dev-server. When i change something in my index.blade.php view I also need to change this in this index.html and this is a little bit of pain.

Is there any cool trick that I can apply to improve my workflow? If there is any example please provide me a link, because I wasn't able to find one. There are many small todo apps that doesn't really solve my problem.

PS. Currently I am using this approach https://github.com/sexyoung/laravel-react-webpack

@UPDATE

Well I think I have found an acceptable solution. I will stick with webpack server configuration that I have provided in my question (it is really great cause you can use hot reload + you api calls are redirected to backend port, so instead of localhost:8080/api/user... you call /api/user/1), but I have also developed a simple elixir extension that compiles php to simple static HTML page which solves the problem of editing two index files (we all know programmers are lazy).

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

So at the moment I have two index files:

• index.blade.php in resources/views which is resolved by the router on production

• index.html in root of my application folder which is used by webpack-dev-server for development

and of course now these files are sync cause of gulp watch :)

If there is any better approach let me know guys.

Answer 1

I have usually solved this problem (duplicated index.html/php file) using this webpack plugin: https://github.com/ampedandwired/html-webpack-plugin

The idea is the opposite of yours I think. Instead of compiling your php files into static html, you can use the HtmlWebpack plugin to output a index.tmpl.php file (or whatever extension you need) using the filename configuration option. Normally I set that path to be the templates folder of my application server.

I believe this approach is generally easier than doing the other way round. Using this plugin has other benefits, such as automatic bundle script tags injection depending on your Webpack output config, and automatic cache-bursting file hash added to the script tag urls.