Integration of Core and Web UI

Hello,

I have some issues regarding cytomine development setup. I have made the regular installation of cytomine core on local machine. It is working fine. For the front end I have installed cytomine-web-ui as follows:
Hello,

I have some issues regarding cytomine development setup. I have made the regular installation of cytomine core on local machine. It is working fine. For the front end I have installed cytomine-web-ui as follows:

image.png

The issue I am having is that in the cytomine-web ui, I can see the projects created in the cytomine core but could not open them, it says ‘the page could not be found’. Moreover I am unable to create a project or upload the images.

In the configuration.sh file, if I make the parameter Core-development to true and run it, both cytomine core and web-ui shows the login screen but when I try to login it says ‘Unexpected Error Occured’.

In the configuration.sh file, if I make the parameter Web-Ui or IMS-development to true and run it, cytomine core gives the error of Bad gateway but cytomine web-ui works fine. I am able to create projects and upload images but in this case, the issue is that when I try to open some image, it says ‘failed to fetch annotation layers’ and the image could not be opened.

Kindly help me with this.

The issue I am having is that in the cytomine-web ui, I can see the projects created in the cytomine core but could not open them, it says ‘the page could not be found’. Moreover I am unable to create a project or upload the images.

In the configuration.sh file, if I make the parameter Core-development to true and run it, both cytomine core and web-ui shows the login screen but when I try to login it says ‘Unexpected Error Occured’.

In the configuration.sh file, if I make the parameter Web-Ui or IMS-development to true and run it, cytomine core gives the error of Bad gateway but cytomine web-ui works fine. I am able to create projects and upload images but in this case, the issue is that when I try to open some image, it says ‘failed to fetch annotation layers’ and the image could not be opened.

Kindly help me with this.

Hi,

Could you be more precise on what you try to achieve ? Do you plan to modify the code of some Cytomine component ? If not, the XXX_DEVELOPMENT parameters should all be set to false.

It seems there is some trouble with communication between your computer and some Cytomine docker containers. It seems your using Cytomine ULiège flavor. Have you followed the related installation guide ? See here: Install Cytomine on Linux - Installation - Cytomine ULiège documentation in particular Step 3 with configuration of /etc/hosts.

By the way, the image is not showing up, it tries to redirect me to some Gmail content :face_with_raised_eyebrow: Could you re-upload the images on the forum ?

I want to add some features in Cytomine. I am using cytomine.org version and have followed guidelines for installation from official documentation of cytomine and cytomine github page. Following is the content of /etc/hosts file:
image(2)

In order to modify the code of Cytomine component, I have installed Cytomine Web-UI following the instructions given below:


When I run the above commands, I am able to access and open cytomine front end and see the projects created in cytomine-core, but neither I am able to create a project or open some image in it. It says the Page could not be found.

I could not find the instructions on how to setup the development environment on official documentation of cytomine, so I tried to follow the documentation of Cytomine ULiege. But I get the issues posted in previous post when I change XXX_DEVELOPMENT parameters.

Kindly help me with it that how can I setup the development environment for cytomine.

Thanks for the clarification ! The /etc/hosts file seems to be okay.

It is quite interesting as you are able to connect with the WebUI, so there is apparently no configuration issue. What is the URL you use to access the webUI in your browser ? Also maybe the Javascript error in the Dev tools of your browser could give you some hints.

Also, we have not tested to run official Cytomine components with ULiège flavor Bootstrap, maybe there are some trouble here.

In ULiège team (which I’m a member of), we work with with this fork (GitHub - Cytomine-ULiege/Cytomine-Web-UI: Cytomine-Web-UI is the graphical user interface we support for Cytomine. Our fork includes R&D experimental features. See @cytomine for official releases.) with a special dev config (Cytomine-Web-UI/vue.config.js at c0a559c64f201d846bd48e988ac9d775a0c1279a · Cytomine-ULiege/Cytomine-Web-UI · GitHub) that make the webUI running smoothly in dev mode. The front-end is accessible at http://localhost-core:8081 (while the core component is running on 8080 port).

The official Cytomine team uses a different setup for its dev environment which I’m not aware of. Maybe @geektortoise could give you some help about this.

Regarding the 2 different Cytomine flavors, I don’t recommend to mix components from different flavors, as it is not tested nor supported.

1 Like

Hello,
Thanks @urubens for your answers.
I had a meeting with urubens yesterday to improve these points of our documentations. :slight_smile:

@Eiman_Fatima , if you have installed Cytomine following this link https://documentation.cytomine.org/ , your localhost:8000 (when you run “npm run serve” ) should only get blocked by CORS.

In your Cytomine-bootstrap/configs/nginx/nginx.conf file, replace the part related to the “core part” (by default localhost-core) by this one :
(Keep a copy of your nginx.conf file somewhere ! )

	server {
		client_max_body_size 0;
		listen       80;
		server_name  localhost-core;

		#charset koi8-r;
		#access_log  logs/host.access.log  main;

		set $cors_origin "";
		set $cors_cred   "";
		set $cors_header "";
		set $cors_method "";

		if ($http_origin ~* "localhost") {
			set $cors_origin $http_origin;
			set $cors_cred   true;
			set $cors_method 'GET, PUT, POST, DELETE, OPTIONS';
			set $cors_header 'Content-Type, Content-Range, Content-Length, Content-Disposition, Content-Description, Cache-Control, Date, dateFull, authorization, content-type-full, X-Requested-With, Pragma';
		}

		location / {
			proxy_set_header X-Real-IP $remote_addr;
			proxy_set_header Host $host;
			proxy_pass http://core:8080;

			add_header Access-Control-Allow-Origin      $cors_origin always;
			add_header Access-Control-Allow-Credentials $cors_cred always;
			add_header Access-Control-Allow-Headers     $cors_header always;
			add_header Access-Control-Allow-Methods     $cors_method always;
			add_header Cache-Control 'no-cache';

			if ($request_method = 'OPTIONS') {
				add_header Access-Control-Allow-Origin		$cors_origin always;
				add_header Access-Control-Allow-Credentials 	$cors_cred always;
				add_header Access-Control-Allow-Headers		$cors_header always;
				add_header Access-Control-Allow-Methods 	$cors_method always;
				add_header 'Access-Control-Max-Age' 		1728000;
				add_header 'Content-Type' 			'text/plain charset=UTF-8';
				add_header 'Content-Length' 			0;
				return 204;
			}
		}
	}

Then run the restart.sh script and CORS from localhost origin will be allowed and your local Web-UI displayed on localhost:8000 will be able to contact the Cytomine core.

Thank you @geektortoise @urubens for your response. The issue has been resolved.

1 Like