This is the early access documentation preview for Custom Views. This documentation might not be in sync with our official documentation.

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 you contains everything to get you started, so that you can focus on customizing your commercetools Frontend project according to your needs.

To get familiar with the repository, see Customer repository structure.

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. This means that any time you make a change to this branch, the continuous integration server detects the changes and creates a build for it. If the build is successful, it is automatically deployed. You can check the progress of your build from the Continuous Integration area in the Studio.

For further information, see Deployment.

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.

Add greetings to the Footer componentTypeScript React
// 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.

Commands to add the files with changes to commitshell
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.

Commands to commit and push changes to the master branchshell
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.

You can get your staging URL by accessing the Site builder area in the Studio and opening 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.