Hosting JBrowse on a NodeJs Server

by Pubudu Dodangoda 11:29 AM 0 comments

JBrowse, according to its developers, is a fast, embeddable genome browser built completely with JavaScript and HTML5. You can download the source code and host it in any webserver. Often, apache2 is used to host JBrowse, as it is one of the most popular web servers among linux users. However for some of the functionalities of Jbrowse to work properly, JBrowse needs a server component. Therefore hosting Jbrowse in a NodeJs based web server can help to implement the backend logic required for such functions.

There are many frameworks built on top of NodeJs to simplify the process of implementing a sound webserver easily. Two of the leading frameworks are ExpressJs and SailsJs. In this post, I will describe how to deploy JBrowse in an express based NodeJs server.  I will compare these two frameworks and describe how to lift JBrowse with SailsJs in a separate blog post. 

Note - This process was tested in an Ubuntu 14.04 computer. You might need to do few changes if you are following this in a different operating system.

1. Creating an express application

If you are already familiar with expressJs and Nodejs, you can skip this section.

To create an express web app, first you need npm and NodeJs installed. Once you have installed these two, you can create a NodeJs application and then install express. However, you can also use the express-generator to make your life easier. To install express-generater, issue the following command,

$ npm install express-generator -g

Then to create an app with ejs as the view engine and "jBrowseExpr" as the name, issue the following command. For this tutorial and to host JBrowse, you don't need any knowledge on ejs. 

$ express jBrowseExpr --ejs

This will create a directory named jBrowse and when you go inside, you will see that express-generator has created a basic skeleton for the application. However, before you start your app, you should install the node dependencies. You can do so by,

$ npm install

Once the dependencies are installed properly, start the server by typing,

$ npm start

Then you can navigate to http://localhost:3000 to check if the server has started successfully. This page should contain the following text, if everything went smoothly so far.

Express

Welcome to Express

2. Deploying JBrowse with Express

Before deploying JBrowse inside the express app we just creted, you need to setup JBrowse in your local environment. In order to do so, follow the steps as in the official github page of JBrowse, https://github.com/GMOD/jbrowse/tree/master 

Alternatively, you can use the unpacked version of Jbrowse without having to run the pre configurations. However this approach is not recommended unless you get stuck while following the first approach. The unpacked version of JBrowse can be found at, https://github.com/pupudu/unpacked-jbrowse 

The next step is to move the required files inside to the express app. First move all the files inside the JBrowse to the public directory located inside the JBrowseExpr express app. We do so because the auto generated express application has already setup the public directory as its root for serving static files. 
Once you have copied all the files, create a copy of the index.html file of JBrowse inside the views directory inside the jBrowseExpr application and rename it as index.ejs. This will allow expressJs to use the index file as the root file for starting the application. When this index file is loaded, all the other files required by it are served from the public directory as static files. 
The run the npm start command again and you should see the volovx data suggestion page when you navigate to http://localhost:3000 

Congratulations! You just hosted JBrowse with NodeJs and ExpressJs