Elassandra with NodeJS Demo — Part Two

Connecting Elassandra to NodeJS and React

In part one, we set up Elassandra using Docker and looked at our data via Kibana and the command line. Now, let’s take a look to see what it looks like to connect Elassandra to a basic NodeJS Express app, React and Searchkit. Searchkit provides an easy way to request and display Elasticsearch data in the a React app, which fits our use case perfectly.

Installation

Install React

First, let’s setup React. I’m using Node 10 and nvm, but you use what works for you :). We’re going to do it the easy way today, using create-react-app:

npx create-react-app elassandra-demo
cd elassandra-demo
npm start

Setup Express

First let’s install our package:

npm install express — save

Next we’ll add our express server. Create app.js and add the following code:

touch ./app.js

Note that we set it up so that we have to whitelist the client url for our cors policy. If you don’t do this, your searches won’t be able to go through since Express won’t let them. Be careful for example, since the way this is written http://localhost:3000 will be fine but if you use http://127.0.0.1:3000 then Express will just block the request.

Next, we’ll use a basic routes direct reports with a single router:

mkdir routes
touch routes/index.js

How this will work is that in production we will build the React code (using npm run build which was defined for us by create-react-app) and serve it from express (via the index router). But in development, in order to take advantage of the create-react-app hot reloader, we’re just going to hit the hot reloader server via localhost:3000 for React, and for everything we will use our express server at localhost:8080.

This is preferable to having to continually rebuild our React code for every change in development. Again, this is not a perfect development environment, but will do for our use case, since really we want to just get up and running and see how we can access Elassandra via express.

We are now ready to add React and Searchkit.

Setup Searchkit

Searchkit is a UI for search based on React. We will be basically following their quickstart instructions along with their sample App.js file to make this simple.

First install the package:

npm install searchkit —save

Then, to get searchkit styles, add this link tag to your public/index.html file in the header, that create-react-app built for us before:

<link rel="stylesheet” type="text/css" href="//cdn.jsdelivr.net/searchkit/2.0.0/theme.css">

(Note that even though I’m using searchkit 2.4.1, apparently the css from 2.0.0 is what they want us to use as of the time of this writing)

Build our Searchkit Component

We’re going to just make the search view our home page, so let’s go ahead and change the src/App.js file that create-react-app generated for us to more or less what they use as a sample App.js file, but with imports, and adjusting their components to match our dataset:

Some things to point out:

• We are using our Express app as an endpoint instead of Elasticsearch directly. You can change the endpoint that Searchkit uses from http://localhost:8080/flight-search to http://localhost:9200/kibana_sample_data_flights if you want to, (kibana_sample_data_flights being the specific Elasticsearch index we want to search). Basically whatever you put here, Searchkit will hit that url and put the search query in a json body.
• If you did you can skip using Express altogether. On the other hand, it will mean that you’re exposing your Elasticsearch server to the outside world if you ever go into production, and will need to setup a CORS policy on your Elasticsearch server as well.
• Take a look at the Elasticsearch REST API docs for more options. For example, you could also specify searching multiple indices.

We added a component for the search results as well, so let’s make that real quick, I called mine src/components/FlightHit.js:

Notice that Searchkit gives us direct access to the Elasticsearch data in the props here, with each hit found at props.result._source. If you want to change what you display, you can access other data from the Elasticsearch index through the props that way.

Start the server

In one terminal, start the Express server at localhost:8080:

node app.js

Then, while that is running in another terminal start the React development server:

npm start

Now take a look at localhost:3000 in your browser. It should show something like this:

Again, not the best development set up I’ve ever seen, but just something simple to get us started. You can click around and filter by carrier, destination or origin.

To see all the code together in one place, check out the Github repository here.

Conclusion

Elassandra makes it easy to quickly and easily use Cassandra together with Elasticsearch, allowing us to take advantage of the strength of each. With a simple NodeJS server on top of that, and tools like React and Searchkit, we can access and display our data whether it originated in Cassandra or Elasticsearch. If you have a Cassandra cluster and want to add greater querying power, or on the other hand have Elasticsearch and want to pair it with the capabilities of Cassandra, it’s definitely worth giving Elassandra a look.