# Use Continuous Integration

The Continuous Integration area lets developers check information on backend and frontend builds.

From **Continuous Integration** in the **Developer** area, you can find information about your backend and frontend builds such as branch, date, [build status](/frontend-studio/using-the-ci-area.md#build-status), and short commit hash. Additionally, you can access the related build logs and commit diff.

For further information on continuous integration, see [Continuous integration](/frontend-development/continuous-integration-ci.md).

![The Continuous Integration area displaying the table of available builds](https://docs.commercetools.com/frontend-studio/images/con-integration-area.png)

Frontend and backend builds are stored and perform at the same standard for 90 days.

## Build status

The **Backend status** column displays the status of the build for your backend extensions in the [API hub](/frontend-development/architecture-and-stack.md#api-hub) and can have the following values:

- **Success**: the backend extensions build was successful. You can deploy it from the [**Deployment**](/frontend-studio/using-deployment-in-the-studio.md#deploy-a-build) area. Otherwise, if you set the `deploy` parameter to `true` when [uploading the build](/frontend-development/set-up-custom-repository.md#deploy-backend-extensions) from a custom CI, the build is automatically deployed to the staging environment.
- **Failure**: the backend extensions build failed.

The **Frontend staging status** column displays the status of the build for your Netlify frontend staging site. The build is executed only for the branch that you set as the production branch for your staging site on Netlify. For example, you have the `staging.docs.frontend.site` staging site with the production branch set to `staging`.

Following are the possible build statuses:

- **Pending**: Netlify has not started the build for the frontend staging site.
- **Processing**: Netlify is processing the build for the frontend staging site.
- **Success**: the build for the frontend staging site was successful. You can deploy it from the [**Deployment**](/frontend-studio/using-deployment-in-the-studio.md#deploy-a-build) area. Otherwise, if you set the `deploy` parameter to `true` when [uploading the build](/frontend-development/set-up-custom-repository.md#deploy-backend-extensions) from a custom CI, the build is automatically deployed to the staging environment.
- **Not applicable**: the frontend staging site is not aware of the branch for this build, so builds cannot start for this branch. For example, if on Netlify you have set the `staging` branch as the production branch for the frontend staging site, the builds for branches other than `staging` will result in the **Not applicable** status.
- **Expired**: Netlify skipped the build for the frontend staging site because the build has been in **Pending** status for more than two hours.
- **Failure**: the build for the frontend staging site failed.
- **Canceled**: the build for the frontend staging site was canceled because there was an issue with the build.

The **Frontend production status** column displays the status of the build for your Netlify frontend production site. The build is executed only for the branch that you set as the production branch for your production site on Netlify. For example, you have the `docs.frontend.site` production site with the production branch set to `main`.

Following are the possible build statuses:

- **Pending**: Netlify has not started the build for the frontend production site.
- **Processing**: Netlify is processing the build for the frontend production site.
- **Success**: the build for the frontend production site was successful. You can deploy it from the [**Deployment**](/frontend-studio/using-deployment-in-the-studio.md#deploy-a-build) area.
- **Not applicable**: the frontend production site is not aware of the branch for this build, so builds cannot start for this branch. For example, if on Netlify you have set the `main` branch as the production branch for the frontend production site, the builds for branches other than `main` will result in the **Not applicable** status.
- **Expired**: Netlify skipped the build for the frontend production site because the build has been in **Pending** status for more than two hours.
- **Failure**: the build for the frontend production site failed.
- **Canceled**: the build for the frontend production site was canceled because there was an issue with the build.

Do not deploy directly from Netlify. It causes issues with your deployment due to inconsistencies between frontend and backend extensions build versions.

To avoid build version mismatch, deactivate auto publishing on Netlify by [locking deploys](https://docs.netlify.com/site-deploys/manage-deploys/#locked-deploys).

The Studio updates the build statuses asynchronously about every five minutes. Therefore, there might be a mismatch between the statuses displayed in the Studio and Netlify.

## View build logs

To view the build logs, follow these steps:

1. From the Studio home page or from the left menu, go to **Developer > Continuous Integration**.
2. From the list of builds, hold your pointer over the build of which you want to see the build logs. Alternatively, use the search bar to search for the build you want to view using the branch name or the short commit hash.
3. Click the **Build log** icon: the **Build log** dialog opens.
4. In the **Build log** dialog do the following:

   - To view backend extensions build logs, expand the sections in the **Backend** tab. You can also download the logs by clicking **Download raw log**.
   - To view frontend build logs, click either **Frontend staging** or **Frontend production**: Humio build log opens.

     To access the frontend build logs from these links, you must use Humio as your log management system for your Netlify sites. If you change the log setup on Netlify, you cannot access frontend build logs from the Studio.

## View commit diff

To view the commit diff, follow these steps:

1. From the Studio home page or from the left menu, go to **Developer > Continuous Integration**.
2. Click the **Short commit hash** of the build for which you want to view the commit diff: a new tab with the GitHub commit diff page opens in your browser.

If you are using a custom continuous integration for your [custom Git repository](/frontend-development/set-up-custom-repository.md), you cannot view the commit diff.

## Search builds

You can search for a build using the branch name or the short commit hash.

To search for a build, follow these steps:

1. From the Studio home page or from the left menu, go to **Developer > Continuous Integration**.
2. Use the search bar to search for the build you want to find.

## Delete builds

Studio users with Admin or Developer [roles](/frontend-studio/managing-your-team-in-the-studio.md#user-roles) can delete builds.

When you delete a build, both the backend build and the frontend build from Netlify are deleted.
You cannot delete a build that is currently deployed and is listed in the [**Deployment**](/frontend-studio/using-deployment-in-the-studio.md) area.

You cannot restore a build after you have deleted it.

### Delete a single build

To delete a build, follow these steps:

1. From the Studio home page or from the left menu, go to **Developer > Continuous Integration**.
2. Hold your pointer over the build you want to delete and click the **Delete** icon: the **Delete build version permanently?** dialog opens.
3. In the text box, enter `DELETE`.
4. Click **Delete**.

### Delete builds in bulk

To delete multiple builds in bulk, follow these steps:

1. From the Studio home page or from the left menu, go to **Developer > Continuous Integration**.
2. Select the checkboxes next to the builds you want to delete.
3. Click **Delete**: the **Delete build version permanently?** dialog opens.
4. In the text box, enter `DELETE`.
5. Click **Delete**.

## Related pages

- [Area overview page with navigation](/frontend-studio.md)
- [Previous page: Use Data sources](/frontend-studio/using-data-sources-in-the-studio.md)
- [Next page: Use Dynamic pages](/frontend-studio/using-dynamic-pages-in-the-studio.md)