RactJS on the BeagleBone

If you want to access a ReactJS app on the BeagleBone you will have to provided a web server. I used NodeJS for that. The idea here is to just pass every request on to the React app. You can do this after setting up the server with this command:

const app = express();

// Serve static assets; This navigates to the build folder generated by webpack
app.use(express.static(path.resolve(__dirname, '..', '..', 'build')));

// Always return the main index.html, so react-router render the route in the client
app.get('*', (req, res) => {
    // __dirname will get the directory name of the file, not the directory where React was started
    res.sendFile(path.resolve(__dirname, '..', '..', 'build', 'index.html'));

I am using expect here to achieve the desired effect. To finally run the app on the BeagleBone you can just launch the server. Make sure that webpack bundles only your client code, not your server side code. The index.html includes the bundle.js script generated by webpack, redirecting requests from the server to the client enables ReactJS to handle the routing itself.

As a side note, I use Babel with webpack to generate a backwards compatible bundle.js file. Here is the code: https://github.com/ordsen/gsoc-preparation/tree/master/reactjs_example/frontend

RactJS on the BeagleBone