Extending Neo4j: Graph Apps
Step-by-Step Tutorial for Creating Your First Graph App in Neo4j.
Following up on the previous post, where we learned how to extend Neo4j by creating user functions and procedures, in this post we’ll see how to create a graph app. We’ll build a very simple graph app—our “hello world”—to understand how to work with them.
What is a graph app?
The idea is simple: a graph app is a single-page application, developed with HTML and JavaScript, that integrates with the Neo4j Desktop IDE and allows us to interact with a database.
There’s an interesting variety of graph apps that provide different functionalities: query analysis, database profiling, visualizations, and more. You can check them out here.
It’s also possible to create a new graph app from scratch to develop a specific feature.
How can I create my own graph app?
There’s plenty of information on the Neo4j website, and I found a very helpful video. Still, it can be a bit confusing to figure out where to start, so I suggest following these steps:
Step 1 - Download the Graph App Starter Kit
On Adam Cowley’s GitHub, there’s a simple React project available with the basics to get started: connecting to a database and running a query.
Simply clone the repository and run it with: npm run start
Step 2 - Configure Neo4j Desktop
In the Neo4j Desktop IDE, under Application Settings, select “Enable Development Mode” and set the following:
Entry Point: http://localhost:3000
Root Path: /
Then, simply press Ctrl+K to open the Neo4j Desktop Action Bar and type: Open Development App. This will open a new Neo4j Desktop window with the graph app.
Step 3 - Adding the Desired Behavior
We now have our first graph app running, and we’re ready to add more functionality. This is a React application where we can add as much complexity as needed.
One important point is that the example in the repo uses a module, `use-neo4j`, which includes drivers and various hooks for executing queries. All the information about the module is here, and I also recommend a video that walks you through using this module step by step. The video demonstrates a project that you can download from here, which includes some data visualization elements.
This way, we can keep adding more and more functionality to our Graph Apps!
See you next time!