CI/CD for Angular

📚 Learn more about Angular action features, integrations and alternatives.

Buddy lets you create delivery pipelines that will build, test and deploy your Angular application on a single push to a branch. The pipelines consist of actions that you can configure depending on your needs. Angular pipeline exampleAngular pipeline example

The tool also features dedicated actions for JS bundlers, task runners, and testing tools, such as Gulp, Grunt, Webpack, ESLint, and Cypress. Testing toolsTesting tools

Configuration is very easy and takes only a couple of minutes.

1. Select your Git repository

Buddy supports all popular Git hosting providers, including GitHub, Bitbucket, and GitLab. You can also use your own private Git server, or host code directly on Buddy. Supported Git providersSupported Git providers

2. Add a new delivery pipeline

Enter the pipeline's name, select the trigger mode, and define the branch from which Buddy will fetch your code: Adding a new pipelineAdding a new pipeline

Trigger modes

  • Manually (on click) — recommended for Production
  • On events (automatic) — recommended for Development
  • On schedule (on time interval) — recommended for Staging/Testing
Event-based triggers allow you to run pipelines whenever a push is made to any branch in the repository, and whenever a branch, tag or a pull request is created or deleted.  On event pipeline trigger mode On event pipeline trigger mode

3. Add actions

Buddy lets you choose from dozens of predefined actions. In this example, we'll add 4 actions that will perform the following tasks:

  • Build and test Angular app: download dependencies (npm, yarn, etc.), run tests, compile assets (npm tasks, webpack, etc.)
  • Upload code to server together with compiled assets
  • Restart application
  • Send notification to Slack

3.1 Build your Angular application

Look up and click the Angular CLI action to configure it. Here you can choose the Node version and determine the commands to execute. The default commands are:

npm install
ng test --watch=false --browsers=ChromeHeadless

Angular default build commandsAngular default build commands

3.1.2 Node version

You can change Node version in the runtime environment tab. Angular is installed within the Node image in the Packages&Tools tab:

Angular action imageAngular action image

If your tests require a database to run, you can attach it in the Services tab: Services tabServices tab

3.2 Deploy application to server

Now the application needs to be uploaded to the server. Head to the Transfer section and select your deployment action (SFTP in our case): Transfer actionTransfer action

When adding the action you can choose what and where should be uploaded: SFTP action configurationSFTP action configuration

Buddy's deployment is based on changesets. This means only changed files are deployed, which makes it lightning fast ⚡️.

3.3 Restart application

Once the app is deployed, you can run additional commands on your server with the SSH action: SSH actionSSH action

Enter the commands to execute in Run CMDs and configure authentication details in the Target tab: Application restart commandApplication restart command

3.4 Send notification to Slack

You can configure Buddy to send your team a message after the deployment. In this example we'll use Slack: Notification actionsNotification actions

If you add this action to Actions run on failure Buddy will only send a message if something went wrong with your build or deployment.  On failure notification On failure notification

4. Summary

Congratulations! You have just automated your entire delivery process. Make a push to the selected branch and watch Buddy fetch, build, and deploy your project. With Continuous Delivery applied, you can now focus on what's really important: developing awesome apps! 🔥

Bear in mind that this article is only a brief example of what Buddy can do. You can create additional pipelines for staging and production environments, integrate with your favorite services (AWS, Google, Azure), trigger tests on pull requests, build Docker images, and push them to the registry—the possibilities are unlimited.
If you want us to create a delivery pipeline for your project, drop a line to – we'll be happy to help!

Last modified on May 17, 2023

Get Started

Sign up for free and deploy your project in less than 10 minutes.