Workflow appears successful but github.io returns blank page

[johnpankowicz]

This is my first time use of github-pages-deploy-action. The workflow appears to work, but going to the github.io page returns a blank page. I started with a new Angular 10 project using "ng new". I added a .github/workflows/frontend-build.yaml file containing the following:

name: Build and Deploy
on: [push]
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/[email protected]

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

      - name: Deploy
        uses: JamesIves/[email protected]
        with:
          branch: gh-pages # The branch the action should deploy to.
          folder: dist/ghpages # The folder the action should deploy.

The workflow appears to run successfully and it creates the gh-pages branch and populates it properly. Viewing the "Tree" for that commit using gitk shows that it contains index.html and the generated .js and .css files.

Here is a link to the test repo. You can view the output of the workflow under the Actions tab.

Angular 10 now puts the compiled files from a prod build in "dist/<project" folder, instead of just "dist" as was done in prior versions. In my case, that is "dist/ghpages", which I set as the folder to deploy.

I tried creating a Github Page for another new Angular 10 project using the NPM package "angular-cli-ghpages". This worked fine and when I go to the github.io page, it shows the Angular app. However, I could not get this to work in a Github Action and that is why I am trying to use your github-pages-deploy-action.

The "Tree" in gitk for the gh-pages branch shows the same files as was show in the branch generated by github-pages-deploy-action.

[ Edit 2021-03-21 - It returns blank page, not 404. It was returning 404 before , because the repo setting for Github pages was not turned on. I guess it worked with angular-cli-ghpages because it does this automatically. ]

[JamesIves]

Your application is deployed here and it's not 404ing, however your runtime scripts are: https://johnpankowicz.github.io/ghpages/

The issue is related to how your application is configured, most likely because it's being served from the /ghpages directory. Angular has a property called deployUrl which you most likely need to adjust in your angular.json file to reflect that. I'd suggest making a post on StackOverflow to get some help with the configuration for that as this isn't something I'll be able to assist with.

[johnpankowicz]

Thanks. I had edited my post to reflect that it's not a 404, but I guess our posts overlapped.
I see now that index.html is being served, but that the scripts are not running.
The problem is related to the "base href" value that is added. The project that I build, which uses "angular-cli-ghpages" (and works), has a value of "/ghpages/" for "base href".

[johnpankowicz]

I tried to simplify the config so that it would no longer be an Angular config issue.

I modified the project to put the build output in "dist" instead of "dist/ghpages". I changed the folder output to "dist" in the yaml file. I removed the prior gh-pages branch and ran the workflow again. Same result: I serves the html file but not js & css.

If I run the prod build output locally using the http-server package, it runs fine.
I also cloned the project from Github, checked out the gh-pages branch and ran the http-server in the root folder of gh-pages. It runs OK.

If working production build files are being placed in the root of the gh-pages branch on Github, isn't this all that is required to have the github.io link work properly? What else could it possibly need?

If someone wanted to create a working Github Pages site, could they do it by just manually pushing their site to the gh-pages branch in their repo, set the source correctly in the Github settings for the repo and have it work? Or is there something that I am missing?

[johnpankowicz]

My latest changes appear to now work. I added a "--base-href /ghpages/" to the build command.
https://johnpankowicz.github.io/ghpages/

But I need to try to understand what this change did to make it work. It didn't change base-ref in index.html.

[johnpankowicz]

I solved my original issue. Here are my changes below. You can also look at the sample repo.

frontend-build.yaml

name: Build and Deploy
on: [push]
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/[email protected]

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

      - name: Deploy
        uses: JamesIves/[email protected]
        with:
          branch: gh-pages # The branch the action should deploy to.
          folder: dist/ghpages # The folder the action should deploy.

Build script in package.json

"build:ghp": "ng build --prod --base-href /ghpages/",

Set build output path in angular.json

"outputPath": "dist/ghpages",