search

IHTSDO / sct-browser-frontend

HMTL & Javascript for the front end for the SNOMED CT Browser.
http://browser.ihtsdotools.org
Other
84 stars 31 forks source link

Running with docker does not load css and js assets #46

Closed sidharthramesh closed 4 years ago

sidharthramesh commented 4 years ago

Running using 

docker build -t snomedstorm-browser-nginx .
docker run --name snowstorm-nginx -d -p 80:80 -v /host/pathtofiles:/usr/share/nginx/html:ro snomedstorm-browser-nginx

None of the css or js files load. The index html loads though. image

rorydavidson commented 4 years ago

Thanks for raising this issue. The commit above has now fixed the issue, please use nginx.conf in that commit.

sidharthramesh commented 4 years ago

Thank you @rorydavidson for the quick resolution. /browser content is now loading as expected.

I still have trouble using the terminology browser. I believe the SNOMED branch in Snowstorm is getting recognized:

image

But upon clicking on "Go browsing", nothing loads up image

The following requests are being made with status code: 404 Not Found:

http://localhost/authoring-services/ui-configuration
http://localhost/browser/internal-libs/snomed-interaction-components.min.js?version=build_version
http://localhost/browser/css/snomed-interaction-components.min.css?version=build_version
http://localhost/authoring-services/ui-configuration
http://localhost/browser/img/flags/undefined.png

I have loaded Snomed into snowstorm by following command line option provided here.

I have Snowstorm and Elasticsearch running. http://localhost:8080/branches gives me:

[
  {
    "path": "MAIN",
    "containsContent": true,
    "locked": false,
    "creation": "2020-03-20T04:44:34.021Z",
    "base": "2020-03-20T04:44:34.021Z",
    "head": "2020-03-20T06:32:15.588Z",
    "creationTimestamp": 1584679474021,
    "baseTimestamp": 1584679474021,
    "headTimestamp": 1584685935588,
    "versionsReplacedCounts": {
      "Concept": 0,
      "Description": 0,
      "ReferenceSetType": 0,
      "QueryConcept": 0,
      "ReferenceSetMember": 0,
      "Relationship": 0
    }
  },
  {
    "path": "MAIN/2020-03-09",
    "containsContent": false,
    "locked": false,
    "creation": "2020-03-20T06:32:18.254Z",
    "base": "2020-03-20T06:32:15.588Z",
    "head": "2020-03-20T06:32:18.254Z",
    "creationTimestamp": 1584685938254,
    "baseTimestamp": 1584685935588,
    "headTimestamp": 1584685938254,
    "versionsReplacedCounts": {}
  }
]

This is a great project and I appreciate you helping out!

rorydavidson commented 4 years ago

Could you paste the response from the following URL - http://localhost/snowstorm/snomed-ct/codesystems/SNOMEDCT - that may not be set up correctly on Snowstorm

sidharthramesh commented 4 years ago

http://localhost/snowstorm/snomed-ct/codesystems/SNOMEDCT gives me:

{
    "shortName": "SNOMEDCT",
    "branchPath": "MAIN",
    "dailyBuildAvailable": false,
    "languages": {
        "en": "English"
    },
    "modules": [
        {
            "conceptId": "900000000000012004",
            "effectiveTime": "20020131",
            "moduleId": "900000000000012004",
            "active": true,
            "id": "900000000000012004",
            "pt": {
                "term": "SNOMED CT model component",
                "lang": "en"
            },
            "fsn": {
                "term": "SNOMED CT model component module (core metadata concept)",
                "lang": "en"
            },
            "definitionStatus": "PRIMITIVE"
        },
        {
            "conceptId": "449080006",
            "effectiveTime": "20110731",
            "moduleId": "900000000000012004",
            "active": true,
            "id": "449080006",
            "pt": {
                "term": "SNOMED CT to ICD-10 rule-based mapping module",
                "lang": "en"
            },
            "fsn": {
                "term": "SNOMED CT to ICD-10 rule-based mapping module (core metadata concept)",
                "lang": "en"
            },
            "definitionStatus": "PRIMITIVE"
        },
        {
            "conceptId": "900000000000207008",
            "effectiveTime": "20020131",
            "moduleId": "900000000000012004",
            "active": true,
            "id": "900000000000207008",
            "pt": {
                "term": "SNOMED CT core",
                "lang": "en"
            },
            "fsn": {
                "term": "SNOMED CT core module (core metadata concept)",
                "lang": "en"
            },
            "definitionStatus": "PRIMITIVE"
        }
    ],
    "latestVersion": {
        "shortName": "SNOMEDCT",
        "importDate": "2020-03-20T06:32:18.254Z",
        "parentBranchPath": "MAIN",
        "effectiveDate": 20200309,
        "version": "2020-03-09",
        "description": "SNOMEDCT 20200309 import.",
        "branchPath": "MAIN/2020-03-09"
    }
}
sidharthramesh commented 4 years ago

Not sure if this helps, but there is some improvement upon copying the missing js and css files from the snomed-interaction-components releases page. Now it loads the topmost SNOMED CT concept. image

The following requests are being made that gives status code 404:

http://localhost/snowstorm/expressions/-ctMAIN/2020-03-09//execute/brief
http://localhost/snowstorm/snomed-ct/MAIN/2020-03-09//concepts/138875005/children?form=inferred
http://localhost/snowstorm/-ctserver/releases

Surprisingly, searching for something makes a request http://localhost/snowstorm/snomed-ct/MAIN/2020-03-09//descriptions?query=heart&limit=50&searchMode=partialMatching&lang=english&statusFilter=activeOnly&skipTo=0&returnLimit=100 and it returns a status code 200. Looks something like:

{
items: [
{
    active: true
    released: true
    releasedEffectiveTime: 20170731
    descriptionId: "787639019"
    term: "Mucus (substance)"
    conceptId: "49909006"
    moduleId: "900000000000207008"
    typeId: "900000000000003001"
    acceptabilityMap: {900000000000509007: "PREFERRED", 900000000000508004: "PREFERRED"}
    type: "FSN"
    lang: "en"
    caseSignificance: "CASE_INSENSITIVE"
    effectiveTime: "20170731"
},
...,
...,
...
]
total: 1485967
limit: 50
offset: 0
searchAfter: "W10="
searchAfterArray: []
}
rorydavidson commented 4 years ago

Could you please paste the nginx config you are using? This is all working on my local docker setup, so if you've deleted and rebuilt the docker image based on the most recent commit to the develop branch, it should just work.

sidharthramesh commented 4 years ago

I've pulled the latest develop branch and rebuild everything from scratch. The nginx conf is the same as in docker/nginx.conf of the develop branch

user  nginx;

worker_processes  2;
pid        /var/run/nginx.pid;

events {
    worker_connections  512;
}

http {
        sendfile  on;
        server_tokens  off;
        tcp_nodelay  on;
        access_log  /var/log/nginx/access.log;
        default_type  application/octet-stream;
        keepalive_timeout  65;
        error_log  /var/log/nginx/error.log;
        gzip_disable  msie6;
        gzip  on;
        server_names_hash_bucket_size  64;
        tcp_nopush  on;
        types_hash_bucket_size  64;

    server {
        include mime.types;

        set $secure off;
        if ($scheme = https) { set $secure on; }

        set $cors "";
        if ($http_origin ~* (.*\.ihtsdotools.org)) { set $cors "true"; }
        if ($http_origin ~* (.*\.ontoserver.csiro.au)) { set $cors "true"; }

        #proxy_pass directives
        proxy_http_version 1.1;
        proxy_set_header Connection "";
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_connect_timeout 150;
        proxy_send_timeout 100;
        proxy_read_timeout 100;
        proxy_buffers 4 32k;
        client_max_body_size 1024m;
        client_body_buffer_size 128k;
        proxy_busy_buffers_size    64k;
        proxy_temp_file_write_size 64k;
        proxy_set_header X-Url-Scheme $scheme;
        proxy_set_header X-Forwarded-Ssl $secure;
        proxy_set_header X-Forwarded-Host $host;

        location / {
            add_header Cache-Control "private, no-cache, no-store, must-revalidate";
            add_header Expires "Sat, 01 Jan 2000 00:00:00 GMT";
            add_header Pragma no-cache;
            root /usr/share/nginx/html;
        }

        location /browser {
            alias /usr/share/nginx/html;
        }

        location /snowstorm/snomed-ct/ {
            #
            # Snowstorm running on the local host machine on port 8080.
            # Change this if using a remote server.
            # Change the branch name if you want to target a specific version or extension.
            #
            proxy_pass http://host.docker.internal:8080/;

        }

        location /fhir {
            if ($cors = "true") {
                add_header 'Access-Control-Allow-Origin' "$http_origin";
                add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, DELETE, PUT';
                add_header 'Access-Control-Allow-Credentials' 'true';
                add_header 'Access-Control-Allow-Headers' 'User-Agent,Keep-Alive,Content-Type';
            } if ($request_method = OPTIONS) { return 204; }
            rewrite ^(/fhir/.*)$ /snowstorm/snomed-ct$1;
        }

        location /ecl/ {
            proxy_pass http://localhost:8080/;
        }

    }
}

Other things I tried to find out what's going wrong:

Thank you so much for your help!

rorydavidson commented 4 years ago

I did a full delete of my directory and then cloned the repo again, using the develop branch. I then built the docker image: docker build -t snowstorm-browser-nginx .

then ran it with the following command:

docker run --name snowstorm-nginx -d -p 80:80 -v <full dir path>/sct-browser-frontend:/usr/share/nginx/html:ro snowstorm-browser-nginx

changing the to the directory path on my machine. Snowstorm was running and available on my machine on port 8080. Doing this, it all worked without making any other changes. Could you please check the steps you've gone through and compare to the above?

sidharthramesh commented 4 years ago

I figured it out. The following files that are referenced in index.html don't exist in internal-libs/: https://github.com/IHTSDO/sct-browser-frontend/blob/b31be96d2942fc8e2b9f32cffffd2bec4e6a44d4/index.html#L41-L43 Therefore, I had to use one from here. I just realized that this is from 2017 and is not being maintained.

I obtained those files directly from the deployed site at https://browser.ihtsdotools.org/, and rebuilt. Now everything works perfectly.

Unfortunately, these files are included in .gitignore I have made a pull request to include the js and css files for interaction-components since the frontend doesn't work without them. An automated build process (probably using npm?) would be better since it can be included in the Dockerfile to compile these files from the snomed-interaction-components folder automatically. I could modify the pull request if you tell me how to build the js and css files.

Thank you for your patience.

rorydavidson commented 4 years ago

I'm glad you've got it working although I still didn't have to do any of that to get it working. Normally the way to build the distribution would be to run grunt, so it might be worth trying that to see if you get the libraries built without having to add them to the repo?

sidharthramesh commented 4 years ago

Maybe because of your browser cache? Try clearing it once or incognito mode. I swear it didn’t work for me. Running grunt is not mentioned in the README nor package.json so it’s hard for newbies like me to get started. If you can add a build script to package.json, modifying the dockerfile should be trivial.

rorydavidson commented 4 years ago

Good point on the browser cache. We will also be updating the README very soon with this information so the documentation will be improved once that is committed.