GitLab pipeline builds and deploys but page doesn't show right

Question

I have a default Create React App that can run fine locally on my computer. I pushed it with git to a GitLab repository which is connected to GitLab Pages on the URL: https://reactwebsitetobetested-alexandreasen09-9e495b734d3272d04dc8ee99.gitlab.io/

My CI file is:

# The Docker image that will be used to build your app
image: node:lts
# Functions that should be executed before the build script is run
before_script:
  - npm ci
 
variables:
  GITLAB_PAGES_URL: "https://reactwebsitetobetested-alexandreasen09-9e495b734d3272d04dc8ee99.gitlab.io/"
  PUBLIC_URL: "$GITLAB_PAGES_URL" # Optional, define if needed

pages:
  image: node:latest
  script:
    - npm install
    - npm run build --publicPath="$PUBLIC_URL" # Prepend PUBLIC_URL for asset paths
    - mv build public
  artifacts:
    paths:
      - public
  only:
    - main

However if I go to the URL, it shows a blank page and the console says:

/%PUBLIC_URL%/favicon.ico:1         
       Failed to load resource: net::ERR_HTTP2_PROTOCOL_ERROR
/%PUBLIC_URL%/manifest.json:1 
       Failed to load resource: net::ERR_HTTP2_PROTOCOL_ERROR
/%PUBLIC_URL%/favicon.ico:1 
       Failed to load resource: net::ERR_HTTP2_PROTOCOL_ERROR
/%PUBLIC_URL%/manifest.json:1 
       Failed to load resource: net::ERR_HTTP2_PROTOCOL_ERROR

It seems to me like it struggles to find the files needed for the website, for some reason it keeps going with %PUBLIC_URL% instead of the URL I assigned as a variable in the YAML file.

Note: the URL is private but I have the right permissions to access it.

My folder structure looks like this:

reactwebsitetobetested (this is the main folder for the project)
-README (markdown file)
-node_modules (folder)
-public (folder)
-- faveicon.ico
-- index.html
-- logo192.png
-- logo512.png
-- manifest.json
-- robots.txt
-src (folder)
-.gitignore
-package.json
-package-lock.json
-.gitlab-ci

Do you know the solution to this?

Answer 1

I found the solution.

The error happened because I had forgot to change the URLs in the index.html file. They were referencing %PUBLIC_URL%, for example %PUBLIC_URL%/favicon.ico, but should have been just favicon.ico.

Changing the URLs in the index.html fixed the errors.

Now I am getting CORS errors instead, but that is of course a different concern that I will then continue working further on.