How can I load gh-pages/pr-preview file?

[seongminn]

this is my workflows file.

name: Create Preview Site
on:
  pull_request:
    types:
      - opened
      - reopened
      - synchronize

permissions:
  contents: write
  issues: write
  pull-requests: write
  id-token: write
  pages: write
  deployments: write

concurrency: preview-${{ github.ref }}

jobs:
  deploy-preview:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3

      - name: Build
        run: yarn install && yarn build

      - name: Deploy preview
        uses: rossjrw/pr-preview-action@v1
        with:
          source-dir: ./dist/
          preview-branch: gh-pages
          umbrella-dir: pr-preview/
          action: auto

and this is my pr-preview/pr-22/assets/ on gh-pages branch.

But I can not access my index-dd097f21.js file on my deployed site for preview.

How can I access pr-preview directory on gh-pages branch?

[rossjrw]

It looks like the URL you're trying to access is https://XXXXXXXXXXX.github.io/client/assets/index-dd097f21.js. Your preview is deployed to pr-preview/pr-22/, so the URL you would need to go to to access it is https://XXXXXXXXXXX.github.io/client/pr-preview/pr-22/assets/index-dd097f21.js.

This could be a duplicate of #14 if the issue is caused by the preview URL not being reflected in the site's build process. You might be able to use a similar solution to the one I suggested there.

Otherwise, would you be able to clarify on where exactly this issue is being caused?

[seongminn]

I did change my url on preview mode!

But, as you can see, It does not load all the files. This is my built files in my pr-preview/pr-24 on gh-pages branch,

But, in https://capstone-design-fkiller.github.io/client/pr-preview/pr-24/, there is just one js file

I think, It does not load all the file. What can I do? If you need more information, comment me please.

[rossjrw]

I took a look at your repository.

Your gh-pages branch contains previews for both PR 22 and PR 24, so I'm convinced the issue is not being caused by this Action but by your setup around it. There's still a documentation task for me to complete but that's covered by #14, so I will be closing this issue.

On https://capstone-design-fkiller.github.io/client/pr-preview/pr-24/ I saw that the main JS file appeared in the network log and was executed, but it never imported the items that were loaded with React.lazy:

https://github.com/capstone-design-Fkiller/client/blob/71344a931898bed752fb5b9baa875559cd586948/src/App.tsx#L8-L10

The first JS file was loaded correctly, so we can assume Vite is respecting the new base in the config. It looks like subsequent JS files were not loaded correctly, so it could be that React Router is at fault:

https://github.com/capstone-design-Fkiller/client/blob/71344a931898bed752fb5b9baa875559cd586948/src/App.tsx#L36

I've never personally used React or React Router myself, so I can't say for sure that this is the issue. But try changing basename on the React Router interface, same as you did for Vite, and see what happens?

[seongminn]

I think, I made it in the end🎉

As you said, basename was the cause. I changed basename to BASE_URL, and it works well.

Thank you for your help, and your wonderful work.