Play with vizarr code

[tischi]

@manzt @joshmoore How hard would it be for me to "play with the code"? Ideal would be some development environment setup like IntelliJ for Java... I'd really like to learn some Javascript and this project is super relevant for my work so it would be a great motivation to get my hands dirty... (not sure how much time I will find but the motivation is very large ;-)

[joshmoore]

@will-moore as well since I tend to "play" vicariously. I do know how to build the code (easiest in docker) if that will work for you, @tischi.

[manzt]

It should be very straight forward to get started. The project is set up like most modern JS build tools, but since you are coming from the Java-side I can walk through what is necessary :)

1.) You need to have Node (currently v15) to both build and develop.

Note: I recommend using nvm or fnm (Rust) to manage different versions of node on your machine.

2.) Not necessary, but I'd recommend installing VSCode as an editor/IDE because it has great support for JavaScript/TypeScript out of the box. (I use this editor also for Rust & Python development due to the rich plugin ecosystem.)

Once you have those installed run the following:

$ git clone https://github.com/hms-dbmi/vizarr.git 
$ cd vizarr
$ npm install # installs dependencies from npm (you should only need to do this once)
$ npm start # starts development server (any time you want to "play" with the code)

The start command will start a development server on http://localhost:8080 (acts the same as https://hms-dbmi.github.io/vizarr) which you can navigate to in your browser tab. You can live edit the contents of any of the files in src or public and the changes will be updated "on save" in your web-browser. Stop the development server when you are done making changes.

• src/ - contains all TypeScript source code (likely what you will want to "play" with)
• public/ - contains all static assets required for the site

Have a look at the other script commands in package.json for the project. These are standard to any JS build and executed by running npm run <command>.

• npm run build - builds the complete project into a static out/ directory that can be deployed anywhere (e.g. copy files to s3)
• npm run format - formats the TypeScript source code (we have a github action set up that will fail if code isn't formatted).

On top of that, if you are happy with the changes you've made, feel free to open a PR! Opening a PR will create public preview link of your latest changes so that reviewers (likely myself) canlook at a live demo of what changes you've made.

Please let me know if you need any help getting started!