npm run dev fails at ant prepare-css command

[ozairsajid]

Build fails with error:

BUILD FAILED Target "prepare-css" does not exist in the project "ol3-viewer".

I am new to omero.iviewer and apache ant. By checking the options with ant -p command, I did not find prepare-css but instead found prepare-css-debug and prepare-css-prod. Updating the dev script in package.json with prepare-css-debug fixed the build error.

Am I missing something or the package.json needs to be updated? Thanks

[waxenegger]

@ozairsajid

The webpack dev server setup (npm run dev) is at the moment not really used and therefore not maintained because it would require at a minimum a proxy server setup and other tweaking (complementary prod/debug build/deploy) to make it work. As is the project is not the "usual/typical" isolated webpack setup due to its python/django nature and strong dependencies on the omero server.

That is not to say that you couldn't make it work but I'd have to point you to that forum entry: https://www.openmicroscopy.org/community/viewtopic.php?f=6&t=8406

The repo does not provide you with such a ready solution as part of cloning this repo out of the box and the envisioned way of returning to the webpack devserver setup is to use it more in its original spirit, that is to say, once the data retrieval is done via contacting a remote web api and cors.

[ozairsajid]

Thanks @waxenegger, I will look at the forum. Apart from the forum, do you guys have any other means of communication like Slack which I can use to ask questions? Thanks again!

[joshmoore]

Hi @ozairsajid. @waxenegger is on a on UTC+12 give or take so won't be around for a while. In general, though, the OME team watches http://webchat.freenode.net/?channels=%23ome&uio=d4 in case that fits your bill. Cheers. ~Josh.

[ozairsajid]

Thanks @joshmoore

[waxenegger]

@ozairsajid this PR probably an easier way for you if you want to use the webpack dev server. the proxying is done in the webpack configuration. you are still going to need an omero server at http://localhost though. have a look at the updated README in there.

[ozairsajid]

@waxenegger Thanks. I am still struggling to setup the omero server. I tried to set it up using docker deployment provided here but could not connect it to the local iviewer. I then started following the instructions provided at https://docs.openmicroscopy.org/omero/5.4.1/developers/Web/Deployment.html & https://docs.openmicroscopy.org/omero/5.3.3/sysadmins/unix/server-installation.html.

[waxenegger]

@ozairsajid what OS are you running? if you are on linux or mac I'd just go for the server download: https://downloads.openmicroscopy.org/omero/5.1.1/

I'm not familiar with that docker image/config that you mentioned but I'm tempted to say that you are back into proxying territory given that you'll need to access the server on a different port i.e. adjust the ports in the PR that I have pointed out, not to mention you'd have to get the iviewer code onto that docker instance and register the app on there as well.

[ozairsajid]

@waxenegger I am using Mac. Let me try to download the server and will let you know. Thanks

[waxenegger]

@ozairsajid maybe this helps in that case - you might have found that already... https://docs.openmicroscopy.org/omero/5.3.4/sysadmins/unix/server-install-homebrew.html

the setup is quite a bit of work, I know, I had to do it myself most recently for linux (after a system upgrade) but once its done, the iviewer steps should not be much of an issue any more. Once you have the omero webclient at localhost, can login and import images via cli or insight and view it via the the web, you should only need the 2 commands described in the PR mentioned above: https://github.com/ome/omero-iviewer/pull/142/files#diff-88b99bb28683bd5b7e3a204826ead112R56 (replacing with the cloned iviewer repo path) and running npm run dev should hopefully give you a running iviewer instance at http://localhost:8080.

[ozairsajid]

@waxenegger I am able to setup the server and web client through docker by running these commands and updating the iviewer webpack config proxy with the port. I am now installing insight to load data. Just need to figure out how to incude these commands into the picture:

$ export PYTHONPATH=$PYTHONPATH:/path/to/iviewer-project-root/plugin
$ bin/omero config append omero.web.apps '"omero_iviewer"'

[waxenegger]

@ozairsajid as I hinted at, if you are doing this with docker, you are going to need to definitely proxy again and at a minimum adjust the webpack dev config in the PR that I started: https://github.com/ome/omero-iviewer/pull/142/files#diff-361932ce6b04b8880716e7995633922aR59 with a bit of luck that's all that needed but I never tested it in such a configuration.

Regardless of that there is something else that needs to happen, the 2 commands you mentioned, namely in the docker instance that is...

While, strictly speaking that should not be necessary, I'd also perform an iviewer build (debug/prod) in that docker instance. Only if you can then access iviewer via the docker instance you can begin to think about using the dev server setup for iviewer (npn run dev), and after tweaking the config to point to the docker instance.

Sorry, I cannot really tell you more about docker setup in general and the specific config/project you use, for one I'm not familiar with the project, for another I prefer a truly local setup, not because I have something against docker but it adds a level of complexity, abstraction and overhead that hinders me in my daily dev work more so than it helps me plus I want to be able to develop/debug the server as well.

[ozairsajid]

@waxenegger @joshmoore I have installed the server, added iviewer to the omero.web and updated the PYTHONPATH. The debug log shows that it is not able to import the settings.

DEBUG:omeroweb.settings:Attempting to import additional app settings for app: omero_iviewer
DEBUG:omeroweb.settings:Couldn't import settings from app: omero_iviewer
DEBUG:omeroweb.settings:INSTALLED_APPS=[('django.contrib.staticfiles', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.sites', u'omero_iviewer', 'omeroweb.feedback', 'omeroweb.webadmin', 'omeroweb.webclient', 'omeroweb.webgateway', 'omeroweb.webredirect', 'omeroweb.api', 'pipeline')]

Here is my PYTHONPATH

(omero) NCATS-2003754-M:~ sajidmo$ echo $PYTHONPATH
:/Users/sajidmo/projects/omero-iviewer/plugin

Can you help how to fix this?

[waxenegger]

@ozairsajid That log entry I wouldn't worry about. It is in your list of installed apps. So that looks good in my opinion. So are you running everything locally or in docker. I'd be tempted to say you could try to access the server/web/iviewer in your browser. Should be http://localhost/webclient for web or http://localhost/iviewer for iviewer for a local install, and docker would need an additional port, I'm guessing.

[ozairsajid]

@waxenegger I ran into some problems with running the server due to python but its fixed now. I am running a pre-build version of the server and have uploaded two images through omero-cli as well.

I ran omero-iviewer with the updated dev script. I am able to see the iviewer on port 8080.

But no route defined for localhost:8080/iviewer

While for localhost:8080/iviewer/51, I get below:

[waxenegger]

@ozairsajid

2 things:

• the url for iviewer. to hand it some images (unless you are using open with which does it for you) is iviewer/?images=1
• more importantly: you are running your server on localhost: 4080 (the docker setup you mentioned I assume). The PR is configured for standard 80, "just" localhost. Please adjust the webpack config following the link that I mentioned in a previous comment above: https://github.com/ome/omero-iviewer/pull/142/files#diff-361932ce6b04b8880716e7995633922aR59. Add the port to all the targets.

Once again I cannot guarantee that this will suffice in a dockerized setup, I didn't test it in that setup, and cannot generally supply ready solutions for different server installs (and port, proxy and prefix tweak).

Sorry, I don't want to confuse but, should tweaking the proxy rules not work, I'd just like to clarify that building, deploying and debugging is perfectly possible without that webpack devserver setup. There is nothing that keeps you from doing so, in fact I have developed solely by building with npm run debug since over a year. After all it's js and you can just use the dev tools of your browser. Sure hotdeploy is nice-to-have but debug is cleaner and closer to the production. (NOTE: if you need to go that route bear in mind that you have to build on the docker instance and iviewer would be accessible using the altered port as well - just like the web!!)

[ozairsajid]

@waxenegger Sorry, I forgot to make clear that I am not using a docker setup for the server but a pre-build server downloaded from here. I had already updated the webpack config to point to port 4080. It was the URL that was the problem. I am now able to load the image in iviewer with http://localhost:8080/iviewer/?images=51. Thanks for your help.

Do you have any document through which I can know how the image is loaded in iviewer? Any file in source code that you could point me. Thanks

[waxenegger]

@ozairsajid that's great news.

I think it may be best to move this discussion and any further questions to the forums so that we can put this Issue to rest :wink:

In this thread you will find links to a video and slides. Maybe they can provide you with some answers. Feel free to start a new topic for the question(s) you have in the forums.