Well, this is what I will talk in this post. If you think that is too much long, at the end you will see a TL;DR so…
What I was looking for was: write my Angular App, push the changes and automatically upload and publish them to Github pages.
The versions are:
- npm: 6.4.1
- node: 10.11.0
- angular-cli: 6.2.3
- angular-cli-ghpages: 0.5.3
So if at the end you have some trouble just compare your versions. If after that you still have problems, contact me.
I will not explain how Angular works, I suppose that all presents here knows about it.
Install the CLI (
npm install -g @angular/cli) and generate your app:
ng new <app_name>
Now you need the package that makes magic:
npm install --save-dev angular-cli-ghpages
Rest build your app and deploy it! Easy, no?
In order to do that:
ng build --prod --base-href "https://<your_username>.github.io/<your_repo_name>/"
You must see in the root folder the build in
dist/<your_app_name>. Now the deployment, just type:
npx ngh --build-dir=dist/<your_app_name>
Congratulations! You have your app uploaded to Github Pages, checkout in:
The last step to has a full automatic environment is to add CI with Travis. Here is my .travis.yml:
Add this to the root folder but, do not push yet!
Go to https://travis-ci.org/ and activate your project. Travis will guide you to do that!
Important: Check in the recipe of travis above and you will see a variable named
$GITHUB_TOKEN, this will be the token that authorize travis to deploy in your Github page of your repo. To generate it, go to your Github settings in the tab “Developer settings”
Go Travis and into the settings of the project, add the environment variable.
Now push your .travis.yml changes and the CI will do the job to deploy your app for you, now you can only focus in the development!
Thank you for reading!
If you have any trouble with this contact me at @jeseromero.