Deploying an Angular CLI project on Github Pages and Stackblitz

Can’t wait to show to the world your proof of concept, side project, idea…?
This 5-line bash recipe will put your work on the showcase in a matter of seconds.

So you just finished creating the coolest project with Angular CLI and want to share it with your colleagues,
or perhaps write a post about it, but you want to skip the pain to your colleagues of checking out the code,
installing dependencies and launching the app — I know, it almost can’t get any easier nowadays — and you don’t own a web server,
or perhaps you are as lazy as your colleagues and don’t feel like putting much effort on deploying your code anywhere.

GitHub Pages

I am assuming that you already created your project with Angular CLI, so your project is already versioned with git.
Let’s assume too that you already have a GitHub account with some NICKNAME.
Head yourself to GitHub and create a new project, let’s call it MY_PROJECT.
Don’t put any files in it, you can come back later and add the README and the desired license,
but for now it will be easier if you just leave it blank.

Then, connect your local git repository with the new remote repository and push the changes:

Now, if you already knew about GitHub Pages, you’d be tempted to manually activate them on the index.html file of your project.
DON’T DO THAT! It won’t work!!

Your project still needs to be built for production,
then a dist folder will be created from which you could serve your GitHub pages but DON’T! It won’t work!!!

It looks like GitHub Pages is not suited for SPAs, since it redirects any paths in your app to a 404 page.
But some really nice guys developed angular-cli-ghpages.
This npm package will fill the gaps and make your app work in GitHub Pages.

Deploying ionic projects

What about Ionic projects.
They are deployed to www instead of the dist folder, and they use Ionic CLI instead of Angular CLI,
so a couple of changes will need to be done.

ionic build --prod

The --base-href is not available in Ionic CLI (not that I'm aware of),
so you will need to open the index.html file and write the base tag on your own, after the build is finished.
You can put it after the title tag, for instance: