Deploying the application

Make sure you have Python, git, and npm installed on your host. If you’re using Cloud9 environment everything is already installed.

Deploying the retail store

In this section, we are going to deploy the retail store to your account using two main tools:

  1. The Serverless Framework - for the backend part.
  2. Scotty.js - for the frontend part.

Let start first with cloning the repository:

git clone https://github.com/epsagon/retail-store-workshop.git
cd retail-store-workshop

Backend

To deploy run the following commands. Make sure to replace <REGION> with your desired region. In our example we are using eu-west-1.

cd backend
sudo pip3 install boto3
npm install
npm install -g serverless
sls deploy --region <REGION>

Upon successful deployment, we can see the following output:

Endpoint creation

Make sure to copy the endpoint, because we can use it soon.

Now let’s create some items in our stock:

python update_db.py 4 <REGION>

update_db.py script puts items (in this case 4) into our DynamoDB. Make sure to use the same region as before.

Frontend

cd ../frontend
npm install -g yarn scottyjs
yarn install

Now, let’s copy the endpoint to the file frontend/src/config.js:

Update config

Make sure to change only to hostname part, and leave the string ending with /dev.

Now we can deploy our frontend:

npm run build
scotty --nocdn --spa --source ./build -b <BUCKET_NAME> -r <REGION>

Instead of <BUCKET_NAME> choose a unique name for the S3 bucket that will be created for the website. It can be any name! In the example, we are using observability-workshop-ranrib.

Type in the region as the same <REGION> you’ve used before

Note: This is a public bucket to host the static website. This name must be unique. If you encounter an Access Denied error, please note that it is mandatory to have permissions to create a public S3 Bucket.

Frontend deployed

Getting to the retail store

Now that our store is live, let’s open our browser and get to it:

Retail store

At this point, you’ll probably see a loading circle that never ends… That’s a starting point for troubleshooting!