Building a JBrowse instance with free hosting services

Building a JBrowse instance with free hosting services

JBrowse is a fast genome browse build with JavaScript and HTML5. It can easily run on your own server (even as static site), or on free hosting services like GitHub Pages or Netlify. So start to build your personal genome browser with your tracks of favourite.

This is a step-to-step guide. For more details please refer to the JBrowse documentation and the configuration guide.

To start with, Node.js is required to compile the necessary Perl scripts. Note that the installation of node.js requires admin.

Download and installation of JBrowse

I used the minified version, which doesn’t support plugins but is enough for essential functions.

# minified version
    curl -L -O
    unzip; cd JBrowse-1.16.5/

# complete version
    git clone
    cd jbrowse

Configure your JBrowse

Add your own genome sequence

  bin/ --fasta GENOME.fa

When I used –indexed_fasta it didn’t work.

Add features / annotations and make them searchable

bin/ --gff annotations.gff --trackType CanvasFeatures --trackLabel GeneSet

“GeneSet” is the appeared label for the annotation track. After generating names, we can search genes by their names.

Add other tracks from bed files

bin/ --bed filtered_reads.bed --trackType CanvasFeatures --trackLabel filtered_reads

the bed file should contain the following columns: chr start end [name score strand] and score should be 0-1000

Note: the genome sequence, as well as the added tracks will go to the root folder “data/”, where:

    names/  # feature names for searching
    seq/    # genome sequences
    tracks/ # tracks
    trackList.json # json file containing flat file track items
    tracks.conf    # other tracks, e.g. bams

Remove a flat file track


But the script didn’t work in my hand. Need to remove the item from trackList.json and corresponding folder from tracks/.

Add a bam track

add the following to data/tracks.conf

# make a section for the new track called tracks.(unique name)
[ tracks.IsoseqBAM ]

# settings for what data is shown in the track; url relative to tracks.conf
storeClass     = JBrowse/Store/SeqFeature/BAM
urlTemplate    = merged_iso.sorted.bam
baiUrlTemplate = merged_iso.sorted.bam.bai

# settings for how the track looks
category = NGS
type = JBrowse/View/Track/Alignments2
key  = Merged Isoseq from m/f/s

Some tips:

To hide the strand arrow, add a line in trackList.json (don’t forget the “,” at the end of previous line)

         "style" : {
            "className" : "feature",
	    "strandArrow": false

To use the Faceted Track Selector, uncomment the following lines in “/jbrowse.conf”

 type = Faceted

Using the browser locally

After all the above configurations, we can simply open the index.html (recommend to use FireFox) and it will show your added genome and tracks. Bookmark that page for re-visting.

Hosting JBrowse on your own web server

We can build a JBrowse instance using free hosting services, e.g., Netlify. To do so, simply move the entire folder into a new git repo on GitHub or Bitbucket, and deploy it from Netlify. Since there is an index.html in the JBrowser folder, the genome browser will be displayed on your website.

The advantage to use JBrowse on a web server is that it’s very easy to share the view of genomic locus by just sharing the url. And it’s easy to embed the view on any html page via ““iframe”. See below for an example

Z. Lu avatar
Z. Lu
Computer biologist, amature photographer, vintage fan and web lover.
comments powered by Disqus