404 page not found

[rylegarcia]

After following the Usage, I'm able to see deploy preview link in the PR. However, when I access the link, I get taken to a 404 page not found.

In the screenshot below, it shows the gh-pages branch which contains my index.html file (ie: pr-preview > pr-90 > index.html). Am I missing a step?

Below is my config. In the master branch, my index.html lives in docs > index.html

name: Deploy PR previews

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

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

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

      - name: Setup node
        uses: actions/setup-node@v2
        with:
          node-version: 14
          registry-url: 'https://registry.npmjs.org'
        env:
          NODE_AUTH_TOKEN: ${{ secrets.NPM_PUBLISH_TOKEN }}

      - name: Install and Build
        run: |
          npm install
          npm run build
          npm run build-storybook

      - name: Deploy preview
        uses: rossjrw/pr-preview-action@v1
        with:
          source-dir: ./docs/

[rossjrw]

Hi @rylegarcia, thanks for the report. Based on your screenshot it looks like there's nothing else in the gh-pages branch, indicating to me that there's no main GitHub Pages deployment.

Would you confirm for me whether that repository has GitHub Pages set up? I see that it's a private org repository, and GitHub Pages are publicly accessible, so I'm doubting that it would be enabled by default.

[rylegarcia]

Hi @rossjrw thanks for the quick reply! It does have GH pages set up (see screenshot). Also here's the link to it: https://telus.github.io/koodo-shared-components/

[rossjrw]

In that case we're looking for an index.html file at the very least, which isn't in your screenshot of the gh-pages branch - therefore it's likely that your GitHub Pages site is being served from a branch other than gh-pages. Could you verify which branch and directory the Pages site is being served from?

[rylegarcia]

Branch: gh-pages

Directory: pr-preview > pr-90 > index.html

On Thu, Aug 18, 2022 at 9:17 AM Ross Williams @.***> wrote:

In that case we're looking for an index.html file at the very least, which isn't in your screenshot of the gh-pages branch - therefore it's likely that your GitHub Pages site is being served from a branch other than gh-pages. Could you verify which branch and directory the Pages site is being served from?

— Reply to this email directly, view it on GitHub https://github.com/rossjrw/pr-preview-action/issues/13#issuecomment-1219481774, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACP4F4KZLCKQKYKSTOTEPHLVZYZWXANCNFSM5627DN3A . You are receiving this because you were mentioned.Message ID: @.***>

[rossjrw]

Directory: pr-preview > pr-90 > index.html

This is a file, not a directory. To clarify, I'm asking which setting is configured here:

[rylegarcia]

@rossjrw ah, here it is:

[rossjrw]

@rylegarcia Change your action config to the following and let me know if it works:

  - uses: rossjrw/pr-preview-action@v1
    with:
      source-dir: ./docs/
      preview-branch: master
      umbrella-dir: docs/pr-preview

You may need to re-run or push a null commit to the PR to get the preview to redeploy to the new location. You might also need to manually delete the old preview from the gh-pages branch - it doesn't look like that branch was being used for anything else, though, so you may as well delete it outright.

[rylegarcia]

@rossjrw have you encountered this error due to the branch protection? I've allowed a force push for myself (since I have admin access) but still throws the error below.

[rylegarcia]

I've removed the branch protection for now. The build went through but https://telus.github.io/koodo-shared-components/docs/pr-preview/pr-91/ still gives me a 404. Also, the changes were made on master so the updated docs files are in master.

Is it possible to separate the master branch GH page from the PR previews?

ie: master - https://telus.github.io/koodo-shared-components PR - https://telus.github.io/koodo-shared-components/docs/pr-preview/pr-91/

[rossjrw]

Your preview is currently active at https://telus.github.io/koodo-shared-components/pr-preview/pr-91/ - the umbrella dir is specified as docs/pr-preview/, and the root of the site is docs/ in your repo, so the final path for the umbrella dir is just pr-preview/.

If you want the previews to be served from the docs/pr-preview/ path, then so long as your GitHub Pages site is being served from docs/, you should set the umbrella-dir to docs/docs/pr-preview/.

Regarding branch protection, this action does push commits to whichever branch your Pages site is being served from. If that branch is protected, it won't be able to (at least, not so far as I'm aware - maybe there's some way to override the permissions).

You've got a couple of options here. You could unprotect the master branch, which doesn't seem like a great idea. You could serve your Pages site from a different branch - this is where the gh-pages convention comes from. Or, and this is probably the most sensible choice, you could host your site from somewhere other than your repository - e.g. Netlify or Vercel. Your call.

[rylegarcia]

Made some tweaks again and updated the pages to be served from the gh-pages branch.

This PR works along with the URL: https://telus.github.io/koodo-shared-components/docs/pr-preview/pr-91/

But how do I make it so that https://telus.github.io/koodo-shared-components/ pulls from the master branch? My current configuration from the .yaml file is:

with:
    source-dir: ./docs/
    preview-branch: gh-pages
    umbrella-dir: docs/pr-preview

[rossjrw]

You can't. You can only have one GitHub Pages site per repository, served from a single branch. https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site

The 'PR preview' that this action creates is just a subdirectory of that site. So if your Pages site is served from the master branch, your preview must also be served from that branch.

Personally I normally serve the entire site from the gh-pages branch. There are some great actions out there that help you to do that - this action uses https://github.com/JamesIves/github-pages-deploy-action under the hood. You could use that action for example to copy the contents of docs/ from your master branch to the root directory of your gh-pages branch on push to master, and then serve your site from there.

Noting that I'm going to close this issue as we've established this isn't happening because of a problem in the action, but do feel free to keep chatting here, and I'll do my best to help.

[rylegarcia]

@rossjrw re: https://github.com/JamesIves/github-pages-deploy-action - that's interesting and seems like something I can use in parallel with your pr-preview-action. I'll look into this, thanks for all your help!