Deploying an Angular CLI project on Github Pages and Stackblitz

March 26, 2018

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.

Well, Github Pages to the rescue!

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:

git remote add origin https://github.com/NICKNAME/MY_PROJECT.git
git push origin master

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.

Install it with:

npm install -g angular-cli-ghpages

Then execute these 2 commands:

ng build --prod --base-href "https://NICKNAME.github.io/MY_PROJECT/"
angular-cli-ghpages

The second command has a bunch of options, but they are all optional as the word option states, and you don’t need much more to get your app up and running on GitHub Pages. Enjoy!

Well, certainly you’ll need the URL of your app to share it with the world. This URL is exactly the one that we used on the ng build command:

https://NICKNAME.github.io/MY_PROJECT/

Stackblitz

Now for the Stackblitz part of the post… wouldn’t it be nice to enable our colleagues or followers, to actually interact with our code and see the impact of the modifications in almost-real-time?

The guys from Stackblitz have created this sort of online IDE where you can create projects and see the build at the same time. It’s like JSfiddler on steroids!

Stackblitz

Even simpler than registering on Stackblitz, creating a project and uploading your project files, this one line trick will load your GitHub project on the Stackblitz IDE.

Just share this URL, using again your GitHub nickname and project name:

https://stackblitz.com/github/NICKNAME/MY_PROJECT

This is valid also for branches, tags or specific commits. Just use the following scheme for the URL:

https://stackblitz.com/github/NICKNAME/MY_PROJECT/tree/{TAG|BRANCH|COMMIT}

I hope this post helped you to release your projects in a place where they can be seen, enjoyed and edited by others.

About the author: Juangui Jordán

Full-stack engineer at mimacom, I'm moving towards frontend and UX. Always keen to learn and teach whatever I have to offer to others.