IdeaCoding Lab
Published in

IdeaCoding Lab

Running Angular apps on Stackblitz from Github using links| quickies in Angular

Photo by Samsung Memory on Unsplash

One common scenario that I meet:

I am coding, and I want to test a new feature, being using on my app. I need to create a local sandbox, on Angular

The reason I like to use this strategy: since NPM packages may easily interfere with each, I want to make sure I know how to use the feature I want to add before actually add it to the main app: even a simple library may crash the whole app.

I call this “coding simple”: separate complexity from simplicity, attach the smallest problem possible, and make sure you know that well before increasing the code complexity.

With that said, let me share something I have learnt on this direction.

You can use links to create online Angular app on Stackbliz: no need to install anything locally!

Recently, I want to add those awesome Angular Material collapsing sidebars. They retract as you click on them. It can be awesome to make sure we do not take more space on an app more than we should take, but still keep a rich set of functions on our apps.

I have found this repository:

Normally, I would make a local clone, and start coding.

The issue is that:

Angular apps are huge locally. It takes time even to create a simple sandbox, and it takes memory; when we consider all the small sandbox we create say on a month of coding.

Step 1: separate the repository id

https://github.com/turingcs2005/angular_sidenav

Step 2: merge with Stackbliz root URL

Basic Stackblitz URL

https://stackblitz.com/github

Merged: https://stackblitz.com/github/turingcs2005/angular_sidenav

Open the link: https://stackblitz.com/github/turingcs2005/angular_sidenav

After clicking, a server will open, and make a normal Angular procedure, all automatic.

Final Remarks

This trick is already used by Angular Material, something recent! Now you can also use to any Angular repo you want to run. I am not sure how that going to work with complex apps: I had some difficulties with Stackbliz in the past, but, still, for testing small apps, concepts, it is awesome. Our course on Angular uses Stackbliz as live sandboxes.

Jorge Guerra Pires, PhD

Founder at IdeaCodingLab.com and JovemPesquisador.com

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jorge Guerra Pires, PhD

Jorge Guerra Pires, PhD

Independent Researcher and writer at Amazon. Visit my profile on Amazon: amazon.com/author/jorgeguerrapiresphd | “I want thinkers, not followers!”