Introduction

In the world of web development, having a streamlined environment for code editing, version control, and content management is crucial. In this tutorial, we’ll walk through the process of setting up a Docker Compose environment that integrates AWS Code Repository, Coder.com as a code editor, and HubSpot CMS. This environment will allow you to seamlessly develop, edit, and deploy HubSpot CMS themes while benefiting from version control and an online code editor.

Prerequisites

Before we dive into the tutorial, make sure you have the following prerequisites in place:

1. An AWS account with the necessary permissions to create repositories in CodeCommit.
2. AWS access credentials (Access Key ID and Secret Access Key) with CodeCommit access.
3. Your HubSpot Account ID.
4. Basic familiarity with Docker and Docker Compose.

Step 1: Create AWS Code Repository

1. Log in to your AWS Management Console.
2. Navigate to the CodeCommit service.
3. Create a new repository named “hubspot_cms_yourname” (replace “yourname” with your actual name or a suitable identifier).
4. Note down the repository URL and the AWS access credentials (Access Key ID and Secret Access Key).

Step 2: Prepare Docker Compose File

Create a new file named docker-compose.yml and copy the contents of the provided Docker Compose file into it.

version: '3'

services:
  hubspot-cli:
    image: node:latest
    command: >
      sh -c "
        apt-get update && apt-get install -y awscli &&
        git clone <AWS_REPO_URL> /app/aws-repo &&
        npm install -g @hubspot/cli &&
        tail -f /dev/null
      "
    volumes:
      - hubspot-theme:/app
    environment:
      - AWS_ACCESS_KEY_ID=<YOUR_AWS_ACCESS_KEY>
      - AWS_SECRET_ACCESS_KEY=<YOUR_AWS_SECRET_KEY>
      - AWS_DEFAULT_REGION=us-east-1
      - HUBLID=<YOUR_HUBSPOT_ACCOUNT_ID>
      - GIT_SSH_COMMAND="ssh -o StrictHostKeyChecking=no"
    tty: true

  code:
    image: codercom/code-server:latest
    ports:
      - "8089:8080"
    volumes:
      - hubspot-theme:/home/coder/project
    user: "${UID}:${GID}"
    environment:
      - PASSWORD=<YOUR_PASSWORD>
      - TZ=EST

volumes:
  hubspot-theme:

Replace the placeholders:

• <AWS_REPO_URL> with your AWS Code Repository URL.
• <YOUR_AWS_ACCESS_KEY> and <YOUR_AWS_SECRET_KEY> with your AWS access credentials.
• <YOUR_HUBSPOT_ACCOUNT_ID> with your HubSpot Account ID.
• <YOUR_PASSWORD> with the desired password for accessing the code editor.

Step 3: Setting Up the Environment

1. Open a terminal and navigate to the directory containing the docker-compose.yml file.
2. Run the following command to start the Docker Compose environment:

docker-compose up -d

1. The environment will start provisioning the necessary containers.

Step 4: Accessing the Environment

1. AWS Code Repository: Your code repository is now available inside the hubspot-cli container. Access it by running:python

docker exec -it <hubspot-cli-container-id> bash

1. Once inside the container, you can navigate to the /app/aws-repo directory to find your code.
2. Coder.com Code Editor: Open your web browser and navigate to http://localhost:8089. Use the password you set in the docker-compose.yml file to log in.

Step 5: Using the Environment

You now have a fully functional development environment set up for working with HubSpot CMS. Here’s how you can use it:

1. AWS Code Repository: Use Git commands inside the hubspot-cli container to manage your code and collaborate with others.
2. Coder.com Code Editor: Use the online code editor to make changes to your HubSpot CMS theme files. The changes will be reflected in the /home/coder/project directory.
3. HubSpot CLI: Inside the hubspot-cli container, you can use the HubSpot CLI to deploy your theme changes to HubSpot CMS.

Conclusion

Congratulations! You’ve successfully set up a Docker Compose environment that integrates AWS Code Repository, Coder.com as a code editor, and HubSpot CMS. This powerful setup provides you with a flexible and efficient workflow for developing, editing, and deploying HubSpot CMS themes. With version control, online editing, and CMS integration, you’re well-equipped to create exceptional web experiences.