kuroの覚え書き

96の個人的覚え書き

Macにnode.jsを入れてJbrowse2 webを動かす

これまでIGVをゲノムブラウザに使ってきたが、見た目がなんとなくショボいので、ハッタリのJBrowse2を入れるぜ、でもあんまり基本環境は汚したくないよ。ってことで今どきならDockerなんだろうけど、まあ、とりあえず原始的に外付けHDDに仕込んでみる。

まずはnode.jsを入れる。

$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100 15037  100 15037    0     0  46554      0 --:--:-- --:--:-- --:--:-- 46554
=> Downloading nvm from git to '/Users/kuro/.nvm'
=> Cloning into '/Users/kuro/.nvm'...
remote: Enumerating objects: 355, done.
remote: Counting objects: 100% (355/355), done.
remote: Compressing objects: 100% (302/302), done.
remote: Total 355 (delta 39), reused 169 (delta 28), pack-reused 0
Receiving objects: 100% (355/355), 221.37 KiB | 8.20 MiB/s, done.
Resolving deltas: 100% (39/39), done.
* (HEAD detached at FETCH_HEAD)
  master
=> Compressing and cleaning up git repository

=> Appending nvm source string to /Users/kuro/.bashrc
=> Appending bash_completion source string to /Users/kuro/.bashrc
=> Close and reopen your terminal to start using nvm or run the following to use it now:

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

とすんなり入る。
.nvmというディレクトリがホームにできるが、これを外付けHDDの適当な場所に移動してしまう。

$ export NVM_DIR="/Volumes/HDD-A/mac/.nvm"
$ [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
$ [ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"
$ nvm install node
Downloading and installing node v18.9.0...
Downloading https://nodejs.org/dist/v18.9.0/node-v18.9.0-darwin-x64.tar.xz...
######################################################################### 100.0%
Computing checksum with sha256sum
Checksums matched!
Now using node v18.9.0 (npm v8.19.1)
Creating default alias: default -> node (-> v18.9.0)
$ node -v
v18.9.0
$ which node
/Volumes/HDD-A/mac/.nvm/versions/node/v18.9.0/bin/node

とこんな感じだ。
次にJBrowse2をダウンロードして解凍しておく。

$ wget https://github.com/GMOD/jbrowse-components/releases/download/v2.1.4/jbrowse-web-v2.1.4.zip
$ npm install -g serve

added 89 packages, and audited 90 packages in 30s

23 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
npm notice 
npm notice New patch version of npm available! 8.19.1 -> 8.19.2
npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.19.2
npm notice Run npm install -g npm@8.19.2 to update!
npm notice 

$ npx serve -l 33770

   ┌────────────────────────────────────────────────┐
   │                                                │
   │   Serving!                                     │
   │                                                │
   │   - Local:            http://localhost:33770   │
   │   - On Your Network:  http://xxx.xxx.xxx.xxx:33770   │
   │                                                │
   │   Copied local address to clipboard!           │
   │                                                │
   └────────────────────────────────────────────────┘

おもむろに起動させると

を!すんなり起動した。
そのままだとvolvoxのデータがサンプルに入っているらしい。

続いて、

$ npm install -g @jbrowse/cli

added 260 packages, and audited 261 packages in 2m

51 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

これで

$ jbrowse
A command line tool for working with JBrowse 2

VERSION
  @jbrowse/cli/2.1.4 darwin-x64 node-v18.9.0

USAGE
  $ jbrowse [COMMAND]

COMMANDS
  add-assembly         Add an assembly to a JBrowse 2 configuration
  add-connection       Add a connection to a JBrowse 2 configuration
  add-track            Add a track to a JBrowse 2 configuration
  add-track-json       Add a track configuration directly from a JSON hunk to
                       the JBrowse 2 configuration
  admin-server         Start up a small admin server for JBrowse configuration
  create               Downloads and installs the latest JBrowse 2 release
  help                 display help for jbrowse
  set-default-session  Set a default session with views and tracks
  text-index           Make a text-indexing file for any given track(s).
  upgrade              Upgrades JBrowse 2 to latest version

環境構築のコマンドが使えるようになる。

$ jbrowse add-assembly ../fasta/hoge_v1_scf.fa --load copy --target data --name hoge_v1
Added assembly "hoge_v1" to data/config.json
$ cd data
$ jbrowse add-track ../../app/static/ref/hoge_v1.gff3 --load copy --name hoge_v1
Added track with name "hoge_v1" and trackId "hoge_v1" to ./config.json

$ npx serve -l 30000

改めて起動し、
localhost:30000/?config=data%2Fconfig.json
にアクセスすると

新しいセッションを選び・・・





おおー、見慣れたやつが出てきた。

いや、もうこれで完成でしょ。


追記
ポータブルHDDにインストールした状態で、他のMacに持っていったら起動できなかった。
nodeのインストール時に

=> Appending nvm source string to /Users/kuro/.bashrc
=> Appending bash_completion source string to /Users/kuro/.bashrc

のように.bashrcに入れているのだな。
なのでこれを起動スクリプトに移す。

#! /bin/sh
export NVM_DIR=".nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This load>

npx serve -l 3000

これをデータベースルートに置いて、起動させると、ちゃんと動いた。
あとはデータベースとの連携かな。