Is it possible to configure GrampsWeb to run on url like https://<domain>/grampsweb?

Gramps Web
1

Hello!
I’m running GrampsWeb:

Gramps 5.2.2
Gramps Web API 2.3.0
Gramps Web Frontend 24.5.0
Gramps QL 0.3.0
locale: en
multi-tree: false
task queue: false

from Docker container. Host system is Ubuntu Linux 22.04.4 LTS.

I’m trying to run it behind the NGinx. My aim is to have access to web interface of GrampsWeb with url https://<domain>/grampsweb. I tried following config for nginx (it is a part of full config):

        location /grampsweb/ {
                proxy_pass http://localhost:5055/;
                proxy_read_timeout 120s;
        }

But the problem is that when I try to open URL https://<domain>/grampsweb/ in a browser, I see blank page. Queries debugger shows, that page https://<domain>/grampsweb/ creates queries to:

  • https://<domain>/fonts/fonts.css
  • https://<domain>/tippy.css
  • https://<domain>/3109f437.js
  • https://<domain>/config.js
  • https://<domain>/sw.js

And nginx answer 404 to all of these queries.
I manually checked, that these URLs works correctly:

  • https://<domain>/grampsweb/fonts/fonts.css
  • https://<domain>/grampsweb/tippy.css
  • https://<domain>/grampsweb/3109f437.js
  • https://<domain>/grampsweb/config.js
  • https://<domain>/grampsweb/sw.js

But is it possible to configure frontend of GrampsWeb to make queries to such URLs?

I read these materials:

I tried to use BASE_URL and STATIC_PATH variables. But nothing helped me.

Please, could somebody explain me, is it possible to configure GrampsWeb and NGinx to work together as I want?

2

Just for info. I’m running docker image ghcr.io/gramps-project/grampsweb:latest. But not NGinx image in a docker. I have manually configured NGinx running as service on host Ubuntu Linux system.

3

I want to do this, because I have several web applications behind the NGinx. And I want GrampsWeb to be next such application, working behind the same NGinx server on different base url.

4

I think you can try modifying this line in index.html:

<base href=“/”> sets the relative path for other resources to be queried from. You can try changing it to /grampsweb instead of / and see what happens.

1 Like
5

@RenTheRoot, thank you for your advice!
Did I understand correctly that I need to build custom docker image with grampsweb to check this solution?

6

Not necessarily. You could just shell into the existing docker image and edit the file directly (I am pretty sure). Note I don’t use grampsweb so my advice here is just from general experience.

Here is a link that may contain the instructions you are looking for: Editing Files in a Docker Container: A Simple Guide for Beginners | by Akshay | Medium

1 Like
7

Thank you. Yes, maybe it is better to check solution in some simple way and in case of success then think how to make changes persistent when container recreated or image updated. I understand now, that it is next level of question. I will check proposed solution and will write here result.

8

I did folowing. I downloaded file gramps-web/index.html at main · gramps-project/gramps-web · GitHub as /opt/grampsweb/static/index.html on host computer and then recreated docker container with volume /opt/grampsweb/static/index.html:/app/static/index.html. Also I edited file /opt/grampsweb/static/index.html on host and replaced line:

<base href="/">

with:

<base href="https://<my domain>/grampsweb/">

Then I started docker container and opened url https://<my domain>/grampsweb/ in browser. I saw successfull queries on network window now:

image
image725×437 48.9 KB

Queries to static files done with right url beginning with https://<my domain>/grampsweb/. But web page in browser is empty. In console log I saw error:

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

It is very strange, but query https://<domain>/grampsweb/src/gramps-js.js returned index.html itself, not gramps-js.js. And there is no file gramps-js.js in folder /app/static in docker container. I will try to debug this later.

9

Oh, its very interesting, but later I noticed that original file /app/static/index.html from docker container is not the same as gramps-web/index.html at main · gramps-project/gramps-web · GitHub. So I copied original file /app/static/index.html to host as /opt/grampsweb/static/index.html and then replaced <base href="/"> in that file with <base href="https://<my domain>/grampsweb/">. After this result in browser was better. When I opened page https://<domain>/grampsweb/ in browser I saw form to login:

image
image1509×558 75.7 KB

But queries initiated from java script were made without necessary base url:

  • https://<domain>/api/metadata/
  • https://<domain>/api/token/create_owner/

Also when I pushed login button this query was created with expected code 404 as result:

  • POST https://<domain>/api/token/

So maybe it is necessary to fix javascript file too, not only index.html …

10

I copied file /app/static/3109f437.js from container as file /opt/grampsweb/static/3109f437.js on host, edited it and replaced const Sr="" with const Sr="/grampsweb". Also i added volume /opt/grampsweb/static/3109f437.js:/app/static/3109f437.js to docker container. After recreation of docker container and after I ran it I opened in my browser url https://<domain>/grampsweb/ and after last chenges all queries were made to the right locations. But after login I was redirected to my another web application living on https://<domain>/ (this is home assistant, ahahaha). But when I opened https://<domain>/grampsweb/ in another tab, I saw login page again. Button login was not working properly, it was sending queries to https://<domain>/api/token/ and receiving 404. But unexpectedly after pressing Ctrl+F5 I entered into usual web interface of gramsweb and it seems to work correctly. And I can stably reproduce this pattern… Magick!

I can’t decide nowtime is it good enough result. Because there will be problems on docker image update. And this strange behaviour with login… I think I can’t explain other users that behaviour…

Maybe I will debug it later.

11

Behaviour with Ctrl+F5 I saw in chromium.
In firefox after login I also redirected to my other web application on https://<domain>/.
But after reopening https://<domain>/grampsweb it seems to work ok. Although urls in address line of browser after navigation with ui elements in web interface looks like https://<domain>/, https://<domain>/blog, https://<domain>/people. If I copy them to other tabs they not work because of 404: Not Found. Magick, magick…

12

Maybe it would be better if I will try another nginx instance in container as described in standard docker compose file, will use another host port for that container and will use another dns host name… Maybe this will be better that magick described earlier…

13

Or maybe I can build custom image and use special env vars API_URL ans BASE_DIR:

if I understand correctly, this works on build stage, when building frontend, not in runtime.

14

Instead of replacing with the full url, try replacing with /grampsweb. This is a relative path so the base part of the domain is unnecessary. I am unsure if this will actually solve any of the problems you are experiencing.

The difference in files may also mean that your version of grampsweb is not the most up-to-date (unless there is some sort of template building going on somewhere in the code that I am not seeing). Make sure you have downloaded the latest release.

15

I think that you should definitely use these env vars during build in addition to fixing the basedir in the code, if base_dir applies to different paths in the application than the basedir in the code. If they both refer to the same thing then using environment vars is probably preferable.

16

Honestly this is probably what I would do anyways. It is just cleaner to serve your separate applications over different ports from one another. It would also solve a lot of your issues. The only thing is your users would need to include the port number.

If you don’t want to do this though I have a feeling that setting at least the API_URL env variable as you mentioned will probably fix a lot of the issues with authentication you are experiencing. I suspect it may be requesting the tokens from the correct urls in some cases due to your index.html changes while also sending requests to some incorrect urls returning 404 errors. This could maybe explain why you are successfully authenticated on refresh, but initially shown a 404 error. I would have to see for myself to know for sure what the actual issue is.

17

I think template building is here.

18

Ah and here we see that the Base_Dir env variable is indeed the same as what you changed in the index file. So you should not need to change the code at all.

19

So I cloned GitHub - gramps-project/gramps-web: Frontend for Gramps Web.
Then installed build deps locally in cloned project using npm install install-deps (node v22.2.0, npm v10.7.0 installed with nvm).
Then exported env vars:

export API_URL=https://<my domain>/grampsweb
export BASE_DIR=https://<my domain>/grampsweb

Then built frontend with npm run build.
Then built docker image with sudo docker build --label my_grampsweb ..
Then recreated docker container with freshly built image (I removed all extra volumes for static files replace like index.html and js files)
Then ran it and…
And I saw at the end web interface and desired url https://<domain>/grampsweb/ without redirect problems… but it is not working properly :frowning: It looks like that navigation between panels using buttons at the left actually does nothing but change url at the address line of brower only. I see only this change after clicks on blog, people, tree and other buttons :frowning: content doesn’t change on the page. It is very strange. I see no errors in console or network panel in browser dev tools. I will try to debug this later.

image
image1853×862 64.2 KB

20

Not sure if it will change anything but instead of this set BASE_DIR=/grampsweb