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

To create a rest API from an Express NodeJS app just add a new js file to the routes folder, e.g. rest.js and add a call to to the app.js file:

var express = require('express');
var app = express();

app.use("/rest", rest.js)
app.use('/rest', rest);

To create a function which is first called on all requests add the following:

/* executed on all requests */
router.use(function(req, res, next) {
    console.log("There was a new request");

    // pass request on to our api
    next();
});

To create a GET method at /rest/yourMethod add the following to your rest.js file:

router.get('/yourMethod', function(req, res, next) {
    res.send('A return value');
});

Parameters can be read with req.params.your_param and the rest call needs to be modified for this to match something like this: ‘/yourMethod/:your_param’

To create a POST method at /rest/yourMethod:

router.post('/putPayload', function(req, res, next) {
    console.log(req.body.your_post_param);
    res.json( {result: "OK"} );
});

Note that req.body.your_post_param reads the parameter named your_post_param from the POST request.

A full example can be found on GitHub: https://github.com/ordsen/gsoc-preparation/tree/master/nodejs_server_example/interface

.

In  my last post I showed you how to call C functions from NodeJS. Now, we want to package the C functions into a shared library and call that from NodeJS. To do that we will first need to create the shared library.

Continue reading “How to call a shared C library from NodeJS” →

To call methods written in C/C++ from NodeJS you need to accomplish several tasks as stated here. I am not aware of a solution to talk directly to a C library, so I will create a C++ binding which behaves like a wrapper for the C functions. I will summarize here  how this works, please see the Github repo and the provided links for more details: https://github.com/ordsen/gsoc-preparation/tree/master/nodejs_server_example/interface

Continue reading “NodeJS to C Binding” →

To create a new express app with (creation of express apps with IntelliJ currently seems not to work properly) ejs use

express --ejs name_of_your_project
cd name_of_your_project && npm install

To give you a basic overview: In your Express project, the bin/www file starts everything up. The app.js file is where everything app related happens. in the “views” folder you can find your html pages (which are ejs now) and in your “routes” folder you can put the logic for each page (e.g. index.js for the index page). And last but not least, you can add publicly available resources to the “public” folder. To include a new page, add the .ejs file to views, include it in app.js and add a .js file for that page to the roots directory. See my repo for an example.