流明 - 服务于ReactJS项目

Question

I am working on a Lumen / React app for a project. Lumen is obviously supplying the API and React is producing the user interface. I am trying to now serve my React application through Lumen so it can then take over all the user interface work.

I wish to keep the client side section of the app as contained as possible to allow me to switch easily from Lumen to Koa, or any other backend, in the future if I wish. My application structure looks something like this:

As you can see currently the React app is a subfolder of the repo. This is something that I have done with previous Koa projects, however, due to the nature of Nodejs web serves it made it a lot easier to serve these files.

From my testing so far, I think the best way of going about serving the files is to read the contents of the index.html from the client folder, either /build or /public depending on whether production is enabled. I will then need to redirect requests for assets outside the public folder set by the web server to /build or /src in the client folder, again, depending on whether it is in production.

My questions are:

A) Is this possible in a secure and reliable way?

B) Is this the best way of going about serving the React application through Lumen?

Answer 1

Probably not the nicest solution, but I just wrote my own scripts to deploy the built version to the Lumen files after the build script is run.

Development can be done with the React proxy option.

const copydir = require('copy-dir');
const fs = require('fs');

copydir.sync('./build', '../public');

fs.readFile('./build/index.html', 'utf8', function (err, data) {
    if (err) throw err;
    fs.writeFile ('../resources/views/index.php', data, function(err) {
        if (err) throw err;
    });
});