GitHub god is guiding us with limelight! Sounds crazy right? no we’re not joking, because only the developers knows the gratitude of having GitHub on their hand. Further more, jumping to the point, we all aware that GitHub is the main source for all Angular projects, real time applications and lot more. And sometimes Our GitHub god forsaken to give us the full light! You caught what am talking about right? Exactly! downloading or cloning the application from GitHub to local and setting up all the dependencies, will always take some long time when we have expected it to surpass in minimal time. Even after all, it’s quite difficult to share it with others too.
On this kinda situations, just assume that, we have one online editor for our application that makes all our works easy and effective & simple. Meanwhile, your head may be aroused with the question what if we use “Run Angular CLI repos directly in our browser?” and you may be might have ignored that question with impossible smile! Come on dude! give a big smile, now you can directly run the Angular CLI repos in your browser and work it on the way you want and am here to explain how.
Stack Blitz is the fast online IDE that allows you to do live edit on Angular CLI projects on the browser. And it help us to run the angular application using GitHub repo. Apart from the angular projects, Stack Blitz also supports to run many applications like react, ionic and so on.
Okay! Can you believe the fact that you can actually run your application on browser just by changing the URL and that too including the live edit? Is that possible at all?
Yes, it’s possible! And here you can see how it works,
Showing sample demos for apps and sharing to the world is seriously sounds like heaven when it comes to projecting your works without putting much efforts for pulling out to the world.
Now, we will know how to use and how it will work,
Steps To Run The Application In Browser Using Editor:-
You can able to run any public repository on GitHub by just providing the username and repository name like below
..stackblitz.com/github/{GIT_USERNAME}/{REPO_NAME}
Optionally, you can also run with particular branch name, tag or commit,
..stackblitz.com/github/{GIT_USERNAME}/{REPO_NAME}/tree/{TAG|BRANCH_NAME|COMMIT}
Automatically Stay In Sync With Your Repo :-
Whenever you are pushing your changes to Github then the Github it will automatically update with latest changes to your corresponding StackBlitz – Be sure that source is your Github.
Best To Read: 10 Useful Ruby On Rails Gems We Couldn’t Live Without
Boot The Application In Milli Second:-
Hereafter, No need to clone, set up the application or install the angular dependencies which means StackBlitz will take care of all those things and it boots your application in a fraction of second.
Here, I am providing you the sample demos for angular and angular material whichever I thought it’s best to share with you all,
Angular Application Sample Demo
https://stackblitz.com/github/gothinkster/angular-realworld-example-app
Angular Material Application Sample Demo
https://stackblitz.com/github/aveferrum/angular-material-demo
Edit Your Source Code On Live To See The Instant Result
However, StackBlitz provides more benefits for us and along with them this editing feature in local development is one of the best option we can collectively mark it. Likewise here also we can edit on the same way, By chance, you might think like you can able to edit the application only when you’re in online but that’s not the limit here. Because the most interest thing about Stackblitz is that even you can edit your application in offline. For example, let me show you how am editing the application even when it’s offline,
Dragging And Dropping Files From Your System To Editor :-
No more copy and paste here after! Yes, In case if you’re lazy like me then you can strictly say no to copy paste because now you can just drag & drop everything from your system straight to the editor in a blink of the moment.
For example,
Best To Read: 4 Must Known Operators In RxJS
Install And Use Packages From npm :-
Importing libraries while developing your application on npm might be bit hard, Because sometimes it will just randomly throw the errors like version or dependency package issues and so on. So you might have to sit and solve everything at the same time. But, Stackblitz will keep all your worries away and will do everything on behalf of you. Even it will install multiple packages at the time and bewares about each versions incase if you failed to note.
With StackBlitz now you can download the using download option and also you can share the downloaded application with any of your friends, colleagues, and whoever you wish. And the last and sugar coated feature is that your application will always settle in online. Obviously, it’s leads to less worry and more productivity, Is not it?
Now will leave the rest in your hands so just play with your application and bring the best you can. Also tell us best experience on working with this and if you have any queries, please don’t hesitate, the comment box is open for you! just post us your queries in the comments, we will definitely try to help you out. Also don’t forget to subscribe us to get the latest updates from diverse technologies.
If you are looking for angular developers ? Hire Angular developer from Agira Technologies to build best web-apps at affordable rates. Our dedicated Angular developers are well-versed with all the updates and ensure top-notch web applications development to meet your business requirements. For any queries reach us via info@agiratech.com.
