Deploy commercetools Frontend

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.

// 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.

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.

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.