Skip to content

Latest commit

 

History

History
 
 

web-ui

README.md

Retail Demo Store Web UI

When deployed to AWS, CodePipeline is used to build and deploy the Retail Demo Store's Web UI to a private S3 bucket and a CloudFront distribution is used to serve the Web UI to end users. The Web UI can also be run locally in a Docker container. This makes it easier to iterate on and test changes locally before commiting.

Local Development

The Web UI service can be built and run locally (in Docker) using Docker Compose. See the local development instructions for details. Note that you still must first deploy the Retail Demo Store project to AWS to satisfy resource dependencies.

To get your local Web UI container to make calls to other Retail Demo Store web services (either running locally in Docker or in ECS on AWS or a combination of the two) and AWS resources such as Cognito, Pinpoint, or a Personalize Event Tracker, you will need to copy the environment variables in the .env file on your local system to match your desired configuration. If you want your local instance of web-ui to connect to resources running in your AWS account, follow these steps to get up and running quickly.

  1. Sign in to the AWS account where the Retail Demo Store is deployed.
  2. Browse to the CodePipeline service. Make sure you're in the right region.
  3. Under Pipelines, find the pipeline with "WebUIPipeline" in the name and click on its name.
  4. You should now see the stages for the "WebUIPipeline" listed: Source and Build. For the "Build" stage, click on the "Details" link in the "Build" box.
  5. In the "Build logs" tab, scroll down through the build log output until you see the output for the cat .env command. You should see a block of several lines that start with VITE_.... These lines represent the environment variables used when building the Web UI assets when deployed to S3. Select all of these lines (except the variables with *** as their values--these are resolved as system parameters) with your mouse and copy them to your clipboard. Alternatively, if you only want to connect to some Retail Demo Store services in ECS and others running locally, just copy the lines that you need for remote services.
  6. Open your local .env file and paste over the top of the lines you selected. There is already a .env.template file with examples of what this would look like.

Once your .env is setup, run Docker Compose from the ../src directory as described in the local development instructions to build and run the Web UI container locally.

foo@bar:~$ docker compose up --build web-ui

Once the container is up and running, you can access it in your browser at http://localhost:8080.

If you chose to deploy the location services, by selecting 'yes' for the CloudFormation parameter 'DeployLocationServices', then you will need to update the Lambda Authorizer used by the Location Services API Gateway. This is because the Lambda Authorizer performs an origin check on the 'connect' request, and by default it will use the CloudFront domain as the expected origin. To locate the Authorizer, go to API Gateway in the AWS console and select the LocationNrfDemo API. Click on 'Authorizers' in the left hand menu and copy the name of the Lambda function. Next, go to Lambda in the AWS console and search for the Labda function copied in the previous step.
Select the Lambda function and then click on the Configuration tab, and select 'Environment variable'. Finally, update the ALLOWED_ORIGIN environment value to your local origin, e.g. http://localhost:8080.