Using AWS Amplify to Deploy Spartacus

8 February 2023

Eduardo Picado

Senior Consultant

Services
DevOps & cloud integration

Platform
AWS, Cloud, DevOps, SAP Commerce Cloud, Spartacus

Domain
Cloud, Commerce, DevOps, eCommerce

Vendor
AWS, SAP

Introduction

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 included:

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 build CI/CD for Spartacus using AWS 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 be integrated 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 while hosting Spartacus 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 ngrok

Steps

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 although the time to initialise was long. In the end, you will have SAP Commerce running on your machine on port 9002.

Set Up Spartacus

Let’s first set up Spartacus on 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. You end up having built a Spartacus app, and it will be running connected to SAP Commerce.

Set Up Ngrok

Go to ngrok 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.

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.

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

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 into the target branch.
Create a synthetic canary to monitor your app proactively. 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.