LightDM Webkit2 images issue

I am working on my hobby project for creating a theme for lightdm webkit2. I have choosen react framework since I am very comfortable with it. Here is the repo link https://github.com/gitneeraj/reactive/tree/feature/dist (checkout branch feature/dist). With some adjustments(mentioned below), I can get to see the HTML loaded fine as greeter on Display Manager. My problem is when I got a route that has images in the page, then those images does not load even if I have it bundled in. Same applies for any custom font files. Below are the steps to reproduce the issue –

Before you start, make sure you are testing this on a virtual machine. I recommend Arch Linux(because thats what I use) with lightdm and lightdm-webkit2-greeter packages installed and confirgured correctly.

1. clone the repo [e-mail]:gitneeraj/reactive.git
2. checkout to branch feature/dist and npm i to install deps
3. npm start to see all works fine on browser
4. npm run build to build the bundle. This will spit out reactive directory
5. Manually copy the built reactive folder into /usr/share/lightdm-webkit/themes folder
6. Manually update the /etc/lightdm/lightdm-webkit2-greeter.conf file’s webkit_theme variable to theme name reactive. Like so, webkit_theme = reactive
7. log out/off of your current session and you should see the theme.
8. Click on little cog at the bottom and it should take you to DM’s list page with images and text. But images wont load.

Answer

I have found solution for this as its related to how you build your project for production. Keeping in mind that Linux treats slash (/) as root, we need to use absolute path from where the theme will be installed to.