Deploy Angular app to Surge using Travis CI

(I) Creating Angular CLI app and deploying to Surge

  1. Install angular cli using npm install --save-dev @angular/cli and create a new project using ng new <project-name> command.
  2. Install surge using npm install --global surge and create a surge account using the surge command.
  3. Now, you should see your first angular app deployed to surge.

(II) Integrating GitHub with Travis CI

Now, lets add Travis CI in between GitHub and surge

  1. Login to Travis CI using your GitHub account.
  2. Generate a new surge token using surge token
  3. Add the same token value to SURGE_TOKEN in Travis CI project's settings tab and also set the SURGE_LOGIN value as your surge email. Here is the image for reference.

4. To perform build, Travis CI looks for build configuration file
 named .travis.yml. Add the below .travis.yml to your repository.

That’s all. Now, to kick-off with your first automatic build and deployment process, just make a small text change in your app and push the code changes to GitHub and the rest follows automatically.

References:

  1. Surge.sh Deployment
  2. Integrating with Travis CI

Originally published at sairaghavak.blogspot.com on March 27, 2017.