hms-dbmi / vizarr

A minimal Zarr image viewer based on Viv.
https://hms-dbmi.github.io/vizarr/?source=https://minio-dev.openmicroscopy.org/idr/v0.3/idr0062-blin-nuclearsegmentation/6001240.zarr
MIT License
124 stars 18 forks source link

Play with vizarr code #61

Open tischi opened 3 years ago

tischi commented 3 years ago

@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 commented 3 years ago

@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 commented 3 years ago

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.

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>.

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!