Solid App no able to find public resources in our repository


#1

We are trying to deploy the version 0.1.0 of our Routing Solid App made with the Inrupt solid-react-generator.
Running it in local, it works perfectly; but when we try to deploy it at GHPages, it does not find any resource in our public folder nor is able to resolve links, the deployed app: https://arquisoft.github.io/viade_en1a/

Our Github repo: https://github.com/Arquisoft/viade_en1a

Thank you all!


Problem with app deployment on GitHub Pages using inrupt generator
#2

Have you tried using different homepage values in your package.json? I’d try it with a slash at the end. Currently some paths seem broken (e.g. https://arquisoft.github.io/img/bars-nav.svg). But idk if that is related to your issue.


#3

Our main repository is arquisoft/viade_en1a/, so that svg is at https://arquisoft.github.io/viade_en1a/img/bars-nav.svg
Our problem is that the app as, curiously, you did, is trying to find resources at the base directory (without /viade_en1a/) instead of https://arquisoft.github.io/viade_en1a/
We’ve already tried to set a PUBLIC_URL in the env file, a start_url and a basename for the BrowserRouter, and none of them worked :frowning:


#4

Have you tried "homepage": ".", as mentioned in the docs:


#5

They say that is supposed to be used assuming ur hosting the app at the server root and you should override that specifying the actual homepage, as we had: “homepage”: “…hub.io/viade_en1a”
Anyay, i will try that right now.
Tank you a lot! :slight_smile:


#6

Still not working:(


#7

Don’t know if this could help as I’m working with lit-elements instead of react, but
I use this webpack config file https://github.com/scenaristeur/salut/blob/master/webpack.config.js that build all my code in a dist folder as a single file that is been called in my /dist/index.html.
In my repo config, I’ve set my gh-pages to gh-page branch.

On local repo
I 've commented the /dist folder in my .gitignore file.
And initialised gh-page branch

git add dist -f && git commit -m "Initial dist subtree commit"

To develop on local, I use npm run start
When I want to publish, I run npm run build that build my src folder to /dist folder.
See my package.json to add that command to yours and check if you have all dependencies.
Then I push master branch as normal.

Then I use this command to push the dist folder to gh-page branch

git subtree push --prefix dist origin gh-pages

Waiting some minutes that GitHub take it in account and the magic appears…

Here is a basic tutoriel of how I build my app & publish on gh-pages https://github.com/scenaristeur/socialid-template/blob/master/README.md but it’s certainly not optimized. I think I’ll encounter an issue on day as gh says they don’t want to build more than 10Mo , but I cross fingers… I’ve sometimes pushed 12Mo…
The + is that when you have a /dist folder you can also compress it and copy it in a folder on any pod using the great @A_A FileManager https://otto-aa.github.io/solid-filemanager/ to upload and uncompress…
Hope this could help :wink:


#8

It should indeed be "homepage": "https://arquisoft.github.io/viade_en1a".

Could you maybe give an example of a resource that isn’t found? When I visit the homepage, everything loads as far as I can see.

(Also note that this question is mostly specific to React and Create React App, so this might not be the best place to get your questions answered. Just to make sure: you did follow CRA’s instructions for deploying to GitHub Pages?)


#9

I’ve also tried without the last slash, as it seems to be said in the instructions for the deployment.

Locales are not loaded, nor images (only two, because we imported them as js objects), open the console and you will see it. The reason is that the URL it accesses lacks the “/viade_en1a/” part.

Yes, I know this is not really related to Solid, but i tried to ask in the “inrupt solid react generator” repository and I didn’t gat any answer, so I tried here, sorry.

Thank you anyway! :slight_smile:


#10

Yeah, just making sure you did not keep it at "." :slight_smile:

I’m not sure how locales and those images are loaded in your app, but the relevant documentation there would be Using the Public Folder. (Though also note that that recommends importing them as objects.)

Perhaps @james.martin has more insight here, since he works on the Generator?


#11

Y, we found that importing images as objects they can be loaded, but we got no idea where to import locales as objects.
If we run the app locally, everything works perfectly.
However, the deployed app tries to find resources at arquisoft.github.io/..., while our resources are located at arquisoft.github.io/viade_en1a/... (the public folder of our repo, https://github.com/arquisoft/viade_en1a).


#12

I don’t know how to fix it, but I’m pretty confident that GH Pages isn’t the problem. Even locally (after setting homepage to . and removing public_url and start_url like here¹) it always uses absolute paths (or relative to the root, not sure what the correct term is), leading to 404 requests (you can try it by building it locally, serving your project directory locally¹ and then visiting http://localhost:5000/build/).

I will take a closer look, but I only have limited time so don’t expect much. If you haven’t tried it out yet, does it work to build the template and serve it without 404s? (or in other words: did a change you made during development cause this issue or is it an issue of the solid-react-generator?)

  1. https://github.com/Otto-AA/viade_en1a/commit/86b067cf0385b098476c73ca6dc88a8fa4dc567f
  2. serving for example after installing npm install -g serve with serve .. But not necessary with this tool, whatever gets you going :))

#13

Update: It seems works now, you can try it here: https://otto-aa.github.io/viade_en1a/

major changes I’ve made:

  • only use homepage: . and removed other specs of the hosting destination
  • made image urls relative (/img/... -> img/...)
  • made translation url relative (used a setting for that)

Here’s the repo where you can take a look at the commits: https://github.com/Otto-AA/viade_en1a/commits/master

And I’d suggest you to look over it and check if it works properly. I only quickly did it without checking if it breaks other things because of time constraints. But I hope it helps you with the project


#14

God! You’re such a hero. You kinda saved us!
It is not loging in properly, but i think I might be able to solve that with a baseurl in the router.