# Deploy commercetools Frontend

Get to know the structure of your code repository, how the CI/CD flow works, and how to make changes in your project and see them live.

## GitHub repository

The GitHub repository we provide contains everything you need to get started. This lets you focus on customizing your commercetools Frontend project.

To get familiar with the repository, see [Customer repository structure](/frontend-development/developer-guide.md#structure-of-the-github-customer-repository).

## CI/CD pipeline

Frontend comes with a ready-to-use CI/CD pipeline for your project and continuously deploys one branch (`master` by default) to the staging environment. Any time you push a change to this branch, the continuous integration server detects it and creates a new build. If the build is successful, it is automatically deployed. You can check the progress of your build from the [**Continuous Integration** area](/frontend-studio/using-the-developer-area-in-the-studio.md) in the Studio.

For further information, see [Deployment](/frontend-development/deployment.md).

## Make changes in your project

To start with, add a greeting text, "Hello, commercetools Frontend" to the footer of your website.

To add the greeting text, update the Footer component (`packages/PROJECT_NAME/frontend/frontastic/tastics/footer/index.tsx`) in your project with the greeting message.

```tsx title="Add greetings to the Footer component" highlightLines="32"
// packages/PROJECT_NAME/frontend/frontastic/tastics/footer/index.tsx
import React from 'react';
import Footer from 'components/commercetools-ui/footer';
import Highlights from 'components/commercetools-ui/footer/highlights';

const FooterTastic = ({ data }) => {
  const columns = [
    {
      header: data.headerCol1,
      links: data.linksCol1,
      icon: data.iconCol1,
    },
    {
      header: data.headerCol2,
      links: data.linksCol2,
      icon: data.iconCol2,
    },
    {
      header: data.headerCol3,
      links: data.linksCol3,
      icon: data.iconCol3,
    },
    {
      header: data.headerCol4,
      links: data.linksCol4,
      icon: data.iconCol4,
    },
  ];

  return (
    <div className="fixed-screen-width lg:relative-width">
      <h2>Hello, commercetools Frontend</h2>
      <Highlights />
      <Footer
        columns={columns}
        copyright={data.copyright}
        copyrightLinks={data.copyrightLinks}
      />
    </div>
  );
};

export default FooterTastic;
```

Commit this change to the Frontend project repository by running the following commands in your command-line tool.

```shell title="Commands to add the files with changes to commit"
git add packages/PROJECT_NAME/frontend/frontastic/tastics/footer/index.tsx # Change PROJECT_NAME with your project name.
git commit
```

Now, push them to the `master` branch by running the following commands.

```shell title="Commands to commit and push changes to the master branch"
git push origin/master
```

## See the changes live

Once the deployment is complete, the changes are live and you can see them on the staging URL of your project.

To get your staging URL, open the **Site builder** in the Studio and open the page builder for any page version using the Footer component. From there, click the preview URL and navigate to the website that opens in the browser.

## Related pages

- [Area overview page with navigation](/tutorials.md)
- [Previous page: Frontend environments](/tutorials/implementation-guide/understand-frontend-environments.md)
- [Next page: Integrate third-party services](/tutorials/implementation-guide/integrate-third-party-services.md)