SAP Commerce Spartacus CI/CD and hosting using AWS Amplify
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:
- Single core repository shared between Spartacus and SAP Commerce front-end;
- Unavailability of a CI/CD pipeline;
- No automated build and deployment available — I proposed a solution for the backend in the article SAP Commerce Cloud build and deployment using AWS Step Functions.
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.

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:

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

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

Attach /powertools-spa/ and you should get the 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:

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
- SAP Commerce: https://www.sap.com/australia/products/commerce-cloud.html
- Spartacus: https://github.com/SAP/spartacus
- AWS Amplify: https://aws.amazon.com/amplify/
- Ngrok: https://ngrok.com/
- Using ngrok to get a public HTTPS address for a local server already serving HTTPS (for free): https://camerondwyer.com/2019/09/23/using-ngrok-to-get-a-public-https-address-for-a-local-server-already-serving-https-for-free/
- GitHub repo: https://github.com/eduardopicado/mystore