8000 Article: Everything Github: Continuous Integration, Deployment and Hosting for your Angular App [WIP] by JohannesHoppe · Pull Request #7 · angular-schule/website-articles · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Article: Everything Github: Continuous Integration, Deployment and Hosting for your Angular App [WIP] #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 36 commits into from
Jan 11, 2020

Conversation

JohannesHoppe
Copy link
Member
@JohannesHoppe JohannesHoppe commented Dec 22, 2019

FYI, I'm still trying to figure out how everything works.
follow up of PR #6

Question to @shhdharmen
In your example, there is no --repo option? Did you really managed to make this work in real code? This should not work, because angular-cli-ghpages does only add the token via a simple string/replace on the provided parameter. It shouldn't work with the remote of the repository. see this code

@EdricChan03
FYI, you might want to get involved as well. I'd appreciate your help. 😃

I'm also a bit of confused if we're really doing the token thing right at all.
see angular-schule/angular-cli-ghpages#73 (comment)

@JohannesHoppe
Copy link
Member Author

@EdricChan03
Copy link
EdricChan03 commented Dec 22, 2019

I'm currently testing to see if the GitHub installation token works. I'll report back if I have any results.

It seems that as it turns out, the documentation on the GITHUB_TOKEN secret states that:

The installation access token expires after 60 minutes. GitHub fetches a token for each job, before the job begins.

So it seems that it's safe to use the GITHUB_TOKEN even if the token is leaked as it'll automatically expire after an hour.

And from the same documentation I've linked, it seems that: yes, you can use the GITHUB_TOKEN approach instead of a PAT as the deployments scope has been granted to the token with read/write.

Here's the full list:

Permission Access type Access by forked repos
checks read/write read
contents read/write read
deployments read/write read
issues read/write read
metadata read read
packages read/write read
pull requests read/write read
repository projects read/write read
statuses read/write read

(I'm not sure if the above was relevant, but I've added it just in case)

EDIT: It seems that the issue is still prevalent as of today - see this GitHub Community post for more info.

@JohannesHoppe
Copy link
Member Author

Wow, you're fast! 😄

Thank you so much for your efforts. So that means that the GITHUB_TOKEN now has more rights than before?? Because back then you found out that it doesn't work. (see angular-schule/angular-cli-ghpages#73 (comment)) I will give it a try, too! 🚀

@shhdharmen
Copy link
Contributor
shhdharmen commented Dec 22, 2019

FYI, I'm still trying to figure out how everything works.
follow up of PR #6

Question to @shhdharmen
In your example, there is no --repo option? Did you really managed to make this work in real code? This should not work, because angular-cli-ghpages does only add the token via a simple string/replace on the provided parameter. It shouldn't work with the remote of the repository. see this code

@EdricChan03
FYI, you might want to get involved as well. I'd appreciate your help. smiley

I'm also a bit of confused if we're really doing the token thing right at all.
see angular-schule/angular-cli-ghpages#73 (comment)

@JohannesHoppe Yes, you are right. I have mentioned --repo in my work flow file. I will create new pull request for changes in existing doc soon. Thanks for the catch. 😊

I will also check about checkout@v2.

@JohannesHoppe
Copy link
Member Author

FYI actions/checkout#75 (comment)

@shhdharmen
Copy link
Contributor

@JohannesHoppe I checked with actions/checkout@v2, it worked fine. I made no changes except changing the version of actions/checkout in workflow file and it worked.

@shhdharmen
Copy link
Contributor
shhdharmen commented Jan 1, 2020

@JohannesHoppe I also noticed that, in the docs which I wrote for angular-schule, I mentioned this workflow from Angular's website to run e2e tests.

But, to run them successfully on Github Actions, we need to follow Angular CLI's wiki doc. To be specific:

  1. We need to update test configurations
  2. We need to handle chrome driver version. Otherwise, it will give us error like below when running e2e tests in CI:
    ... E/launcher - session not created: This version of ChromeDriver only supports Chrome version 79

@EdricChan03
Copy link

@shhdharmen Are you sure that it actually worked? Did you actually check if the site was actually deployed to GitHub Pages? Or it's probably because the repository that you were testing this on was marked as private?

@EdricChan03
Copy link

@shhdharmen And by the way, the wiki doc you've linked is for Angular CLI v6 and older.

@EdricChan03
Copy link

@JohannesHoppe Actually, I'd forgotten to mention that the token seems to only work for private repositories. Public repositories won't actually auto-build the newly deployed commit.

@shhdharmen
Copy link
Contributor

@shhdharmen Are you sure that it actually worked? Did you actually check if the site was actually deployed to GitHub Pages? Or it's probably because the repository that you were testing this on was marked as private?

Yes, it was private repo.

@shhdharmen
Copy link
Contributor

@shhdharmen And by the way, the wiki doc you've linked is for Angular CLI v6 and older.

That's true, but if I don't follow web driver instructions, e2e test is failing. I have checked it on a private repo.

@EdricChan03
8000
Copy link

@shhdharmen Are you sure that it actually worked? Did you actually check if the site was actually deployed to GitHub Pages? Or it's probably because the repository that you were testing this on was marked as private?

Yes, it was private repo.

Ah, that explains why it worked. As mentioned in the GitHub Community post I've linked, some users have commented that deploying to GitHub Pages only works if your repository is marked as private. It doesn't seem to work on public repositories though.

@EdricChan03
Copy link

@shhdharmen And by the way, the wiki doc you've linked is for Angular CLI v6 and older.

That's true, but if I don't follow web driver instructions, e2e test is failing. I have checked it on a private repo.

As for that, see angular/angular-cli#16265 for more information.

@shhdharmen
Copy link
Contributor

@shhdharmen And by the way, the wiki doc you've linked is for Angular CLI v6 and older.

That's true, but if I don't follow web driver instructions, e2e test is failing. I have checked it on a private repo.

As for that, see angular/angular-cli#16265 for more information.

In that issue, the developer was trying in local machine.

I tried adding rm -rf node_modules rm -f package-lock.json before npm install, but it didn't work.

@JohannesHoppe
Copy link
Member Author

Guys, you're great! Thank you both so much for getting so deeply involved!

I think at the moment there's nothing more we can do than to use good-old the GH_TOKEN - because we want to support public repos. I'll add a new paragraph that addresses the new findings regarding GH_TOKEN. More to come soon.  👍

@JohannesHoppe
Copy link
Member Author

How do you guys like that?

everything-githubA

@fmalcher
Copy link
Member

In contrast to former CI/CD monsters it is common with all mentioned providers to express the individual steps in the form of a YAML file and to store this file as part of the source code in the repository.

I know what you mean but I don't get the sentence structure. Should be simplified.
It's not clear at first sight what is the contrast when you talk about a thing all services have in common.

@fmalcher
Copy link
Member

The GitHub plans section sounds a lot like advertisement. Maybe add a note that you are not affiliated with GitHub in any way but 6D40 that you are a passionate GitHub user and that you recommend the service from your experience.

@fmalcher
Copy link
Member

I'd not mention our VScode extension pack. I think this is useless for everyone outside of our workshops.

@fmalcher
Copy link
Member

Setting up a subdomain isn't very hard and if you already own a main domain

This is a Second-level domain. Didn't want to change this so I'll leave this up to you

@fmalcher
Copy link
Member

https://everything-github-demo.angular.schule – please feel free to try it out!

Does not work

@fmalcher
Copy link
Member

If you inspect the certificate, you will see that we actually have not used a certificate from LetsEncrypt. Instead, we decided for the proxy mode of Cloudflare and used the free certificate provided by them. The proxy optimizes our website over Cloudflare's Content Delivery Network (CDN) and provides a lot of additional features – but that's another story.

How about simply NOT using this feature for the article then? 😅 This is more confusing than useful here and you could omit this side note completely.

@fmalcher
Copy link
Member
fmalcher commented Jan 10, 2020

To create an A record, point your apex domain to the following IP addresses from GitHub:

Mention the source here as those might change.

@JohannesHoppe
Copy link
Member Author

Setting up a subdomain isn't very hard and if you already own a main domain

This is a Second-level domain. Didn't want to change this so I'll leave this up to you

I think the term is correct:

In the Domain Name System (DNS) hierarchy, a subdomain is a domain that is a part of another (main) domain. (source)

Also GitHub calls them subdomains, see this.

@JohannesHoppe
Copy link
Member Author
JohannesHoppe commented Jan 10, 2020

I'd not mention our VScode extension pack. I think this is useless for everyone outside of our workshops.

Fair point!

https://everything-github-demo.angular.schule – please feel free to try it out!

Does not work

Oops! I added and removed it several times for a nice screenshot! 😅

If you inspect the certificate, you will see that we actually have not used a certificate from LetsEncrypt. Instead, we decided for the proxy mode of Cloudflare and used the free certificate provided by them. The proxy optimizes our website over Cloudflare's Content Delivery Network (CDN) and provides a lot of additional features – but that's another story.

How about simply NOT using this feature for the article then? 😅 This is more confusing than useful here and you could omit this side note completely.

I agree that this is confusing and I think we need to add a new paragraph for this. One point where Netlify is said to be better is asset optimization:
https://www.netlify.com/github-pages-vs-netlify/

FYI

Screen Shot 2020-01-10 at 23 50 49

image

Fur sure, it's not my job to mention a direct competitor. But I hope you see my concerns here.

Ok, so after all, the real reason for the Cloudflare CDN is that Github doesn't deliver the assets perfectly. Cloudflare is a necessary additional tool.

The bad part:
I now have to check if and what Github normally optimizes. There are opposing statements on the net....

@fmalcher
Copy link
Member

Also GitHub calls them subdomains, see this.

"Subdomain" is fine, I was worried about "main domain", never heard this before. https://en.wikipedia.org/wiki/Second-level_domain

One point where Netlify is said to be better is asset optimization:

I would not start this discussion at all. In a "everything GitHub" article it's perfectly fine to just show the tools provided by GitHub. Maybe mention that asset optimization is not very good at GitHub and tehrefore it is recommended to use some sort of CDN in front of it.

I now have to check if and what Github normally optimizes. There are opposing statements on the net....

You don't have to! Just say "Please keep in mind that for further optimizations it is recommended to use a CDN as an additional service in front of the hosted website. E.g. Cloudflare does a good job here."

Or just skip the SSL termination at cloudflare so you don't need to add the part about why the SSL cert is not issued by GitHub but by Cloudflare.

@JohannesHoppe
Copy link
Member Author

@fmalcher I'm convinced! 😉

@JohannesHoppe JohannesHoppe changed the title Article: Everything Github: Continues Integration, Deployment and Hosting for your Angular App [WIP] Article: Everything Github: Continuous Integration, Deployment and Hosting for your Angular App [WIP] Jan 11, 2020
JohannesHoppe and others added 10 commits January 11, 2020 23:00
Co-Authored-By: Dharmen Shah <shhdharmen@gmail.com>
everything-github: suggested change by @shhdharmen

Co-Authored-By: Dharmen Shah <shhdharmen@gmail.com>
everything-github: suggested change by @shhdharmen

Co-Authored-By: Dharmen Shah <shhdharmen@gmail.com>
everything-github: suggested change by @shhdharmen

Co-Authored-By: Dharmen Shah <shhdharmen@gmail.com>
everything-github: suggested change by @shhdharmen

Co-Authored-By: Dharmen Shah <shhdharmen@gmail.com>
everything-github: suggested change by @shhdharmen

Co-Authored-By: Dharmen Shah <shhdharmen@gmail.com>
everything-github: new header image
Co-Authored-By: Dharmen Shah <shhdharmen@gmail.com>
@JohannesHoppe JohannesHoppe merged commit 84f23fd into gh-pages Jan 11, 2020
@JohannesHoppe
Copy link
Member Author

Thank you all very much! I will launch the spaceship on Monday! 🚀

@fmalcher fmalcher deleted the everything-github branch November 14, 2024 22:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants
0