The CLI is at the moment of writing in beta and very much still a work in progress. It’s an excellent tool imho for scaffolding a new project, components and services. In this screencast we ran the following commands:
ng new PROJECT_NAME // creates a new project ng g component COMPONENT_NAME // creates a new component ng g service SERVICE_NAME // creates a new service ng build -prod // builds a production ready version ng serve -prod // serves a production ready version
The CLI allows you to do a lot more, I really recommend you to install it and play with it for yourselves.
npm install -g angular-cli
Also make sure to check out their official github repo which serves as great documentation.
In this screencast we took a couple of short cuts, we didn’t setup a full CI environment. We initialized a new git repository in the dist folder and pushed only that folder to azure, meaning we built it on our dev machine, big NO NO. The workflow we want would look something like this instead.
- We commit a code change.
- Agent gets the latest code and builds it.
- Tests are run on build agent.
- If tests pass, deploy the dist folder to a staging slot.
Nevertheless we still need to enable a git repository for our web app, here’s an excellent guide on how to do that, it basically takes you through the steps I did in the screencast. Basically from the dist folder:
- git init
- git add *
- git commit -m “Initial Commit.”
- git remote add azure GIT_CLONE_URL
- git push azure master
These commands should fire up an authentication dialog and once you’ve provided the credentials the files should be pushed to the site.
With these steps we’ve managed to create a production build of an angular 2 app and deployed it to Azure. We did it all with just a few command lines using the angular CLI which was pretty awesome. The CLI does lagg behind the release candidates and is a work in progress so please use with caution.
Until next time, have an excellent day!