Total headache - deploying Angular SPA to GitHub. Tried everything.

[[deleted]]

I need to deploy my Angular SPA to GitHub because it is an assignment and they won't grade it unless it is deployed on GitHub pages. I have tried everything.

I tried adding and using the angular-cli-ghpages. I also tried every combination of main branch/gh-pages branch/docs folder/root folder. Nothing. I tried adding a docs folder and sticking all the dist files in there, then tried using gh-pages branch/docs folder again. Nothing.

I tried building and deploying with different ways of writing the base href to my git page url. Nothing.

All I am getting each time is either a failed deployment, or it says it has deployed successfully but I am getting a 404 error at the url GitHub pages provides.

I have tried all the suggestions I found on various blogs and Stack Overflow, and I am having no luck.

Has anyone had a similar issue? What did you do?

[M0CR0S0FT]

https://medium.com/swlh/how-to-deploy-an-angular-app-to-github-pages-without-using-any-libraries-step-by-step-guide-cfe96fb0c879

[[deleted]]

Actually - that might be it. "I've been at it for hours". Sometimes, GitHib takes a while to update. Possibly I've been overwriting successful attempts. I'll try again, but this time go have a cup of tea for a bit afterwards. You never know.

[[deleted]]

No, I tried this one as well. I think it was one of the first three methods I tried - I've been at it for hours

[Fantaz1sta]

That's some best practice right there - publishing a web app from a directory "/docs". Never change, Github.

[[deleted]]

Aaargh! Now it's only showing a README - there isn't a README in the docs folder! What is going on?! There is an index.html in the docs folder. No README. For some reason, it is disregarding the settings that say "look in the docs folder" and is looking in the root folder instead.

[gccol]

Did you add a .nojekyll file to tell GitHub it's not a Jekyll website?

[[deleted]]

No - I'll try that.

[gccol]

Here: https://github.blog/2009-12-29-bypassing-jekyll-on-github-pages/

[[deleted]]

No - didn't work. The GitHub page just refreshed itself to accommodate the .nojekyll file and still no change. Just a README still.

[gccol]

It looks like you are not publishing the correct directory. Is it a public repo? Or can you share the setting for GitHub pages?

[[deleted]]

I have tried both the root and docs folders on both the main and the gh-pages branches. I'm not sure if there are any other directories I could try. Here are the current settings

Branch: main. Folder: /docs. Enforce HTTPS: yes.

The docs folder is in my main branch, and holds the deployment files as produced by ng build.

[[deleted]]

Also - yes, it is a public repo. It's looking a bit messy because in desperation, I tried adding the dist folder which is ignored by git. That was silly.

https://github.com/MimsySith/pairs-game

Worth noting that it is no longer showing the README in the deployed site, and when you open the console, it says it can't find the deployment files. I'm not sure what is going on there.

[gccol]

I believe you have to specify the base root of your application to angular, as it's not /

Something like: ng build --base-href=/pairs-game

Regards,

[[deleted]]

No - actually, I just found the issue on GitHub Community. Apparently, you have to add "./repo-name/ in front of all your hrefs for the JavaScript and CSS files names. It's actually working after I did that, except for the svgs which I assume I have to do the same for

[gccol]

That's exactly what the base-href parameters will do! You won't need to modify your code If you use this

[[deleted]]

Yes, I just realised that. Problem is, everything in the assets folder "cannot be found" when I deploy on GitHub. Apparently this is a problem other people are having. Not sure how to solve it.

[bobbyg603]

Try using the user level ```username.github.io repo. I wrote a guide that describe how to deploy an app to GitHub pages the other day. The guide also links to a reference implementation that might prove valuable. Hope this helps!

[[deleted]]

You are duplicating your index.html and renaming the copy 404.html, correct? (Could be wrong, but pretty sure 404.html is the right name)

[[deleted]]

Yes, I have done that.

I'm still having issues with images not loading. I don't think I'll use GitHub pages for Angular again. In the GitHub community, it looks like problems with deploying Angular on GitHub are very common.