omero_iviewer development setup

[tamuri]

Hello all,

Does anyone have any advice on how to setup the OMERO.iviewer plugin for development?

OMERO.web is running with the built-in server (at localhost:4080). The Webpack devServer builds and hosts OMERO.iviewer bundle on localhost:3000. I think I need the Django plugin running at localhost:4080/iviewer to pick up the static bundle.js from the Webpack devServer on :3000, but not sure how to go about this. Is there some config I'm missing?

Thanks!

[waxenegger]

Hi tamuri,

the webpack development server setup is at the moment not-functional and unused.

Bad news aside, you can still set things up for local development/debug, just without webpack dev server. From what you say you seem to already have the first part in place, a locally running OMERO server and web instance.

What you do first is to clone/fork the repo to be able to build the bundle.
Make sure the following components/directories are in your system's PYTHONPATH:

1. iviewer_project_root/plugin, e.g: /opt/workspace/omero-iviewer/plugin
2. omero marshal, e.g: /opt/workspace/omero-marshal

Omero Marshal you can also get/clone/fork from git (https://github.com/openmicroscopy/omero-marshal) or from here: https://pypi.python.org/pypi/omero-marshal/0.5.1

then you export them like this (replacing with the actual directories!)

Code: Select all

export PYTHONPATH=$PYTHONPATH:/opt/workspace/omero-marshal:/opt/workspace/omero-iviewer/plugin

This is something that's helpful if it is done in a "persistent" way, i.e. exported in a place such that all shell sessions will have the PYTHONPATH up-to-date. It's difficult to give you a directive here because it depends on what your operating system is offering. I run linux and have my own development user and use that user's .bashrc file for exports. Another alternative is perhaps an /etc/profile.d file (for all users) or maybe you'd rather run a script pr export manually.

To make iviewer available as an installed app on your local OMERO server you have to run:

Code: Select all

OMERO_SERVER/bin/omero config append omero.web.apps '"omero_iviewer"'

You can find the omero config commands for making iviewer the default viewer or adding it as an open with option here: https://github.com/ome/omero-iviewer/tree/master/plugin/omero_iviewer

For your webserver configuration the following guide will describe the options available to you: https://docs.openmicroscopy.org/omero/5.4.1/developers/Web/Deployment.html. You could either use the lightweight development server or nginx. I'll leave it up to you which one you want to follow/like best.
Depending on your choice iviewer will be accessible on 127.0.0.1/localhost(:port)/iviewer. Alternatively you could use OMERO.web and open images (if open with has been configured/iviewer is default viewer). You can debug iviewer using your browser's dev tools.

There are 2 ways to build iviewer, the production version which is minified and not really debuggable and the debug version. So you can either run

Code: Select all

npm run prod

or

Code: Select all

npm run debug

So that's quite a bit of information to digest, the good news is that once you have a local setup, you only need to build. Let me know if there are any steps that are unclear or if you are getting any errors on the way and we can see what we are missing.

Just in case, you might also find some information useful about developing web apps using OMERO/django in general, including OMERO.figure and iviewer: https://downloads.openmicroscopy.org/presentations/2017/Team-Training/OMERO-apps/#/.

The respective presentation for the slides can be found here:
https://zoom.us/recording/play/GeKrK8sDd27OkuEN6YmQ5RKdtpnP_0zY08cpn3xqj2M-tSfcZwDI-4afST8tTZ6j:

And last but not least here are code examples using different java script frameworks: https://github.com/ome/omero-web-apps-examples

[tamuri]

Thanks, waxenegger, for very comprehensive answer!

I already successfully had a functioning install of iviewer in prod. mode, but was after something that would allow so-called hot/live-reloading of changes using the webpack devServer which rebuilds bundle.js on file save. I managed to do this in a really nasty way but one which works for me (I describe below).

the webpack development server setup is at the moment not-functional and unused.

Ah, that's a shame. It is doing what I would like i.e. the fast in-memory builds of bundle.js.

Make sure the following components/directories are in your system's PYTHONPATH:

1. iviewer_project_root/plugin, e.g: /opt/workspace/omero-iviewer/plugin
2. omero marshal, e.g: /opt/workspace/omero-marshal

I didn't need to install OMERO marshal package as it is in the OMERO.web requirements (see OMERO.py/share/web/requirements-py27.txt).

Just in case, you might also find some information useful about developing web apps using OMERO/django in general, including OMERO.figure and iviewer: https://downloads.openmicroscopy.org/presentations/2017/Team-Training/OMERO-apps/#/.

The respective presentation for the slides can be found here:
https://zoom.us/recording/play/GeKrK8sDd27OkuEN6YmQ5RKdtpnP_0zY08cpn3xqj2M-tSfcZwDI-4afST8tTZ6j:

This is really useful, thanks!

The way I ended up setting up a dev. environment with live-reloading of the OMERO.iviewer bundle.js was to set everything up as you describe above and have both OMERO.web running (on localhost:4080) and the OMERO.iviewer Webpack devServer (on localhost:3000). Then I wrote a dead simple proxy server running on localhost:5050 that redirects all requests to :4080, *except* for omero_iviewer/static requests which go to :3000. This gets around the same-origin policy for cookies, JSON calls etc. Pointing my browser to localhost:5050 seems to then work as I would like.

[waxenegger]

Hello again tamuri,

I'm glad you found a solution that works for you, and the proxying to address cross origin is certainly a good way of dealing with it.

I'll need to point one thing out though, just in case somebody reads this thread who'd like the same webpack dev server setup that you described:

Iviewer needs to have been built/deployed at least once before (either prod or debug) -as you did- otherwise the initial data request which is handled by the django view method won't succeed and the app won't bootstrap. Same is true for other functionality that is called since webpack dev server by itself does not handle the python bits in the code.

I should probably also clarify why I said the wepback dev server setup was not functional as is. Earlier on in the project the code was not relying on the django view for most of its functionality and, for a development setup with the webpack server setup all that was needed was to get the code and run npm run dev pointing iviewer a remote OMERO server instance.

[tamuri]

Thanks for clarifications, waxenegger. Agreed, you do need to go through the installation process to get it working.

One small change was required to get it working using the proxy (at least the way I set it up), which was to edit the webpack.dev.config.js file and set the template attribute of the HtmlWebpackPlugin to ./src/index.html (which is the version the Django plugin needs) i.e.

Code: Select all

    new HtmlWebpackPlugin({
      template : './src/index.html',
      filename: 'index.html'


Cheers