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.

[jongbonga]

I'm currently facing a similar issue with VueJS and can't figure out how to sort it out.

My preview is located under pr-preview/pr-85/ but the app is trying to access my-site.github.io/js/app.js .

Any idea on how to resolve the issue without compromising my production build?

[jongbonga]

My build process is as simple as running yarn build nothing else gets done.

I will try the proposed solution and revert as soon as I can.

Thank you

[jongbonga]

Tried without success.

Workflow

name: Deploy PR previews

on:
  pull_request:
    types:
      - opened
      - reopened
      - synchronize
      - closed

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

jobs:
  deploy-preview:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [16]

    steps:
      - name: Checkout 🛎️
        uses: actions/checkout@v3

      # Docs: https://github.com/actions/setup-node#v2
      - name: Set up Node.js ${{ matrix.node-version }} ⚙️
        uses: actions/setup-node@v3
        with:
          node-version: ${{ matrix.node-version }}

      - name: Install and Build
        run: yarn && PREVIEW_PATH=Organizations/pr-preview/pr-${{ github.event.number }} yarn build --mode development

      - name: Deploy preview 🚀
        uses: rossjrw/pr-preview-action@v1
        with:
          source-dir: dist
          action: auto

Config

let baseUrl = "/";
if (process.env.PREVIEW_PATH) baseUrl += process.env.PREVIEW_PATH;

module.exports = {
  publicPath: baseUrl,
  ...
};

The path gets set fine

404

[rossjrw]

yarn build executes whatever script is named 'build' in your package.json - without knowing that, there's no way for me to know what yarn build means for your repository.

Based on the screenshot of the HTML, it does look like the preview base URL is being set correctly, to ***.github.io/Organizations/pr-preview/pr-85/js/***.js. But your network log is showing 404s for ***.github.io/js/***.js, which don't include the preview path. Those requests are coming from somewhere other than the part of the HTML file that you screenshotted. I would expect those to be the URLs for the JS files of your main deployment, so the fact that they are 404s is very concerning if so.

As I don't know which file you've showed me, or anything about your build process, or what state the page was in to result in the 404s in that network log, or even what page that was - I'm in the dark here, sorry. Without having more information about your project there's not really anything I can do to help you.

[jongbonga]

Here is the build script "build": "vue-cli-service build" that's all it does.

[jongbonga]

I managed to make it work. my pages setting were not set to gh-pages. I think it reverted when I deleted the branch while testing.

Thanks for the help