jhu-sheridan-libraries / jhu-bento

Bento

A React/Redux based bento box prototype for library discovery layer.

Quick start

To set up the application, first install the docker images.

Then install nodejs and yarn. On mac, you may use brew to install both.

Install node modules

cd jhu-bento
yarn install

Start the webpack server

yarn start

Now you can look at the application at http://127.0.0.1:8080/

Set up the APIs

Create a .env file, and fill in the API root in the file. See dotenv.example for a template of the values.

Development

Start the webpack server,

cd jhu-bento
yarn start

Use your favorite editor to edit files. Any change to /src would be automatically loaded in the browser.

Add a widget

To add a new API widget, do the following:

1. Create a new file in src/widgets. The widget has to define two things:

• a Component that displays the content
• a search function that returns a Promise object.

2. Add the widget to widgets/index.js.

import MyNewWidget, { searchForMyNewWidget } from './MyNewWidget.js'
...
const widgets = {
  ...
  mywidget: { widget: MyNewWidget, search: searchForMyNewWidget },
}
export default widgets

Add the widget to components/Bento.js.

...
<div ...>
{ this.renderWidgetContainer('mywidget') }
</div>
...

That's it! If everything works as expected, the new API widget should show up at the 2nd column of the 3rd row.