CODEWITHSUNDEEP
javascriptnode.jsangulargithub-pages
Dan Miller
Dan Miller

Reputation: 41

How to set up website with Angular 2 on Github Pages

Following the Angular 2 quickstart tutorial, I have created my website and want it to run on Github Pages. However, I currently run it through using the npm start command in terminal. What changes do I have to make so that it will load properly after I push it to Github?

Upvotes: 4

Views: 2513

Answers (1)

AIon
AIon

Reputation: 13071

In my humble opinion, Angular2 Quick Start is a pain in the but. Not quick at all !!

I suggest you to start using the Angular2 CLI (the command line tool). It's fast, easy to use, has a built in build process.. you get a dist folder.. etc. Only advantages..

The build process is important here, because if you want to host your app on GitHub using gh-pages - you can do that with only one command:

ng github-pages:deploy

But that is the recommended way. In your case here, it's different.

By following the quick start guide, you don't have a build process in place, so instead, you can push the whole angular2-quickstart folder to the git repo, on the gh-pages branch.

First: Install git, create a github account and a github repository.

Second: using CMD or some terminal, navigate to your angular2-quickstart folder, and than run this commands:

Basic SETUP

git init --> your local, angular2-quickstart folder, becomes a git repository.

git commit -am "messaage: this stuff goes on master branch.."

git remote add origin <your GitHub repository url here> --> this will add the remote url, where you can push and pull.

git push origin master --> your hole folder will be available on GitHub on the master branch

Host your app on GitHub

git checkout -b gh-pages  -> this creates a new branch called gh-pages based of master, and moves you to it.

git commit -am "your commit message" - you must have at least one commit in order to push.

git push origin gh-pages -> this will push the hole gh-pages branch from local repo - to the GitHub repo and hosting servers.

Everything present on the gh-pages branch will be available at this url: http://your-github-username.github.io/your-repository-name/ . It's the same stuff as if it was loading form your Local-host..

You will see lots of files downloaded trough the network calls - this is because no build process it's in place - no minification, no bundling, no nothing.. But works, I tested it! So good luck!

Upvotes: 3

Related Questions