SAP Commerce Spartacus CI/CD and hosting using AWS Amplify

Eduardo Picado
FAIR Experience Insights
5 min readJul 17, 2022

Introduction

SAP Commerce Cloud is a leading e-commerce platform.
Spartacus is an open-source, Angular-based, headless storefront for SAP Commerce. Spartacus talks to SAP Commerce Cloud exclusively through the Commerce REST API.

Last year, my colleague Sid wrote the article Spartacus deployment automation using AWS CodePipeline proposing a solution based on AWS CodePipeline and S3 to address the traditional pitfalls of doing CI/CD in the SAP Commerce Cloud. Those include:

In this article, I will show how to CI/CD for Spartacus using Amplify. Amplify Hosting provides a git-based workflow for hosting web apps with continuous deployment. It automatically builds, deploys and hosts the web app globally on a CDN powered by Amazon CloudFront

It’s very easy to set up and has many useful features that can be activated with a few clicks. Moreover, the Amplify platform also allows accelerated development of backends that can easily integrate with AWS services and potentially be used to complement the main SAP Commerce backend.

Solution overview

As I didn’t have an SAP Commerce instance in the public cloud available for this POC, I used one running on my local machine. I used ngrok to make the local host backend available on the Internet, and Spartacus is hosted in AWS Amplify. This configuration may also be interesting for development, testing and demos.

Architecture

Prerequisites

  • An AWS account and an AWS user or role with sufficient permissions to create the necessary resources.
  • Access to SAP Software Downloads website to download SAP Commerce.
  • A repository on GitHub, Bitbucket, GitLab, or AWS CodeCommit repositories.
  • A free account on https://ngrok.com/

Steps

1. Set up SAP Commerce backend

Setup SAP Commerce Cloud for use with Spartacus on your local machine. Follow the instructions from Installing SAP Commerce Cloud for use with Spartacus. I followed the link for 2105 and kept all the stores even if the time to initialize was long. In the end, you will have SAP Commerce running on your machine, on port 9002.

2. Set up Spartacus

Let’s first set up Spartacus in your local machine. Follow Building the Spartacus Storefront From Libraries. I followed instructions for using 4.x libraries. Make sure you use the mentioned versions of Angular CLI, Yarn and Node.js. In the end, you will have built a Spartacus app and it will be running, connected to SAP Commerce.

3. Set up Ngrok

Go to https://ngrok.com/ and create an account.
Once logged in, follow the instructions from Setup & Installation to download and install the ngrok binary for your platform.
On the same page, you will find your personal Authtoken. You will use this to authenticate the ngrok agent that you downloaded.
Run the following commands:

To connect your account:

ngrok config add-authtoken [your auth token]

To start an HTTPS tunnel forwarding to your local port 9002, as required by SAP Commerce:

ngrok http https://localhost:9002

You will get a public HTTPS address for your local server already serving HTTPS:

ngrok on terminal

As an example, mine here is https://cb07-159-196-169-248.au.ngrok.io.

You can test it working by appending /backoffice to this address. Open this URL in your browser and you should see the SAP Commerce Backoffice.

4. Update the Spartacus app

Going back to the Spartacus app, we must update the file src/app/spartacus/spartacus-configuration.module.ts.
The baseUrl should become the ngrok URL. Commit and push the code to a supported repository like GitHub.

5. Set up the Spartacus app in Amplify Hosting

Open the Amplify Console and confirm you are in your target Region.
Select New app and then Host web app.
You will then need to connect your repository to Amplify and select a branch.
In the next step, you will confirm the build settings — no changes are required here.
We don’t need to configure anything for the backend or environment variables so we will just review all of our settings and choose to Save and deploy.

Amplify console Review

The web app should be available quickly and a screenshot should be provided.
Check Getting started with existing code for more details.

6. Testing

The public web app URL will be available under Domain.

Amplify console

Attach /electronics-spa/ to it and you should get the Electronics store.

Spartacus Electronics store

Attach /powertools-spa/ and you should get the Powertools store.

Spartacus Powertools store

You can also monitor the requests on your local backend using the ngrok console on http://127.0.0.1:4040/inspect/http:

ngrok — inspect

Amplify features

  • Add a custom domain with a free SSL certificate
  • Set up a test version of your site by connecting a feature branch
  • Amplify Hosting leverages Git branches to create new deployments every time a developer connects a new branch in their repository.
  • Password-protect your site
  • Enable pull request previews — Previews offer a way to view changes from pull requests before they are merged to the target branch.
  • Create a synthetic canary to proactively monitor your app — You can use CloudWatch Synthetics for 24/7 monitoring of broken links, heartbeat checks, and testing of different user flows in your app.

Conclusion

This article reviewed the necessary steps to experiment with deploying a Spartacus application to AWS Amplify.
Amplify hosting has a straightforward pipeline setup as well as multiple useful features, making it a very interesting alternative to the AWS Code Pipeline and S3 solution mentioned, even if it will likely have a higher cost for most projects.

References

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

FAIR Experience Insights
FAIR Experience Insights

Published in FAIR Experience Insights

FAIR’s team of experts is passionate about sharing their knowledge. From complex challenges to innovative solutions, explore our FAIR Experience Insights.

No responses yet

Write a response