Publish Angular 2 App to production in 5 mins
In angular 1 it is just a matter of moving a folder with the set of static files to the server and there you have a application in the production.
But that is not the case with angular 2 , you need to make sure typescript is compiled then NPM modules has to be integrated with System.js and many more stuff to do before production.
This is where Angular-cli comes for rescue !!
Angular CLI is a node package , So it just takes a NPM install to install CLI tools.
NPM install -g angular-cli
Incase if you are wondering , Am I talking about command line interface , I am sorry VS developers !! Yes .
Angular CLI stands for angular Command line interface. Soon there will VS templates which can do the same .
Creating and Testing in Local
Once the installation is successful, Then it is time for creating a angular 2 application
You can do that easily with a simple command
ng new ReleaseTheKraken
Release the kraken is my application, replace it with your application name !!
It will create folder with the necessary dependencies !! You can just go to the folder and do a ng serve , This will create a live reload and run the application .
Above image provides the steps to follow easily. Now that you can see the application running!! it is time to deploy the application in production
Deploy to Production
Now that you have the application up and running using the free Github pages , it is time to move the application to production.
- Create a repo in the Github. You can follow the steps in this page
To put your project up on GitHub, you'll need a repository for it to live in. Let's create one! On GitHub, you can…help.github.com
Now that you have created Repository , you can add this repo using a simple command
git add remote origin “Repo Name”
2. Now we want our angular-cli to push the application which is running local to production , So we need install
angular-cli-github-pages - Easily manage gh-pages of your ember-cli addongithub.com
you can do that using
npm install --save-dev angular-cli-github-pages
Now we have all ready , Just push the code using
git checkout master
ng github-pages:deploy --message "Optional commit message"
That’s it , you have your application live in production . I have done one myself , you can visit it through