Run Angular CLI repos directly in your browser

Eric Simons
Angular Blog
Published in
2 min readFeb 9, 2018

--

Github is the source of truth for most Angular demos, examples, prototypes, and “real world” projects. However, downloading & initializing these projects locally can take a looooong time- which makes them difficult to share with others. 😞

This is precisely why we created StackBlitz, a lightning fast online IDE that allows you to live edit Angular CLI projects in-browser. It also now powers all of the official Angular.io documentation examples!

Wouldn’t it be great if you could instantly run any Angular CLI project on Github directly inside StackBlitz by simply changing the URL? 😎

Yup, it’s seriously that easy. And it makes the process of sharing examples, demos, and apps a total breeze. 🙌

See it live in action with these repos below:

How it works ⚙

You can run any public repo on Github by providing the username + repo name like so:

stackblitz.com/github/{GH_USERNAME}/{REPO_NAME}

And you can also optionally specify a branch, tag, or commit:

.../github/{GH_USERNAME}/{REPO_NAME}/tree/{TAG|BRANCH|COMMIT}

Automatically stays in sync with your repo 🔄

Whenever you push commits to Github, the corresponding StackBlitz project automatically updates with the latest changes — ensuring Github remains your code’s source of truth.

Boots up in mere seconds ⚡️

No more downloading, cloning, or installing. Thanks to the blazing fast Turbo package manager, StackBlitz can install all of your app’s dependencies & boot in mere seconds.

Live edit code in a real environment 🛠

StackBlitz comes out of the box with all of the functionality you’d expect in your local VS Code environment like intellisense, go to definition, hot reloading, full access to npm, and much, much more.

Now in beta!

We’d love to hear your feedback on this feature! Today this functionality is probably best suited for smaller apps & examples as we hammer out remaining implementation details, but if you find anything that’s not working as expected please don’t hesitate to file an issue on Github, chat with us in our Discord channel, or tweet us @stackblitz. Code on! 🤘🍻

--

--

Software engineer & builder of @StackBlitz, @GoThinkster (acq) & https://realworld.io 🤘 Code the future!