Running Angular apps on Stackblitz from Github using links| quickies in Angular
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:
GitHub - turingcs2005/angular_sidenav
This project was generated with Angular CLI version 10.2.0. Run ng serve for a dev server. Navigate to…
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
Step 2: merge with Stackbliz root URL
Basic Stackblitz URL
Open the link: https://stackblitz.com/github/turingcs2005/angular_sidenav
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