Deploying an Esri Web AppBuilder App (or any static site) on AWS S3

Add hosting, SSL, and a simple deployment pipeline in six easy steps.

Photo by Krzysztof Hepner on Unsplash

Using Esri’s Web AppBuilder Developer Edition to create a custom application is a great way to implement functionality not available via out-of-the-box widgets. The catch is that you have to host it on your own web server, rather than through ArcGIS Online.

A Web AppBuilder application is simply a collection of static files — aka a static site (all functionality is implemented via JavaScript/REST). AWS S3 offers static site hosting, so with a few commands, you can have your app online without provisioning a server.

Getting Started

If you don’t have an AWS account, go create one. Then export your app from Web AppBuilder Developer and extract it from the zip file.

1. Add AWS CLI

Make sure you have the AWS CLI installed on your machine. This will allow you to programmatically provision AWS resources.

2. Create an S3 Bucket

First, you need a bucket to store the files that make up the WAB app. From the command line run (make sure to replace my-bucket with a unique name):

aws s3api create-bucket \
  --bucket my-bucket \
  --region us-east-1 \ 
  --acl public-read

Note: by default AWS does not allow public read/write access, however since this will be a public website, we are allowing public read access.

3. Configure for Website Hosting

In addition to setting the access-control to public-read, we can set a bucket policy:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::<my-bucket>/*"
        }
    ]
}

Save the above JSON to a file name s3-bucket-policy.json and run this script from the same directory:

aws s3api put-bucket-policy --bucket my-bucket --policy file://s3-bucket-policy.json

Now your bucket is fully open to the public. Next, configure it as a website with this command:

aws s3 website s3://my-bucket/ --index-document index.html --error-document index.html

That's it, now your bucket is ready to serve your app.

4. Upload your app to S3

You can run this command to sync your app files with your bucket, where app is the folder your application is in:

aws s3 sync app s3://my-bucket --delete

Check your bucket in the AWS console and you’ll see your app’s files in there.

5. Set up Cloudfront

Cloudfront will distribute your app through its CDN with built-in SSL. You can create a Cloudfront distribution from the command line with this command:

aws cloudfront create-distribution \
  --origin-domain-name my-bucket.s3.amazonaws.com \
  --default-root-object index.html

You will receive a response similar to the following:

{
    "Distribution": {
        "Status": "InProgress",
        "DomainName": "abcd1234defg.cloudfront.net",
        "InProgressInvalidationBatches": 0,
        "DistributionConfig": {
            "Comment": "",
            "CacheBehaviors": {
                "Quantity": 0
            },
...
"Location": "https://cloudfront.amazonaws.com/2015-04-17/distribution/12345678"
}

Note the DomainName and Location values. After a few minutes, your app will be available at https://abcd1234defg.cloudfront.net (your domain will be unique).

6. Update Your App

CloudFront will cache your app on its servers all around the world, so updates to your app may not be reflected right away. You can run a command to invalidate the cache, so the next time they visit, users will receive a fresh copy of your app:

# update your app:
aws s3 sync app s3://my-bucket --delete \
# then invalidate the cache
aws cloudfront create-invalidation --distribution-id 12345678 --paths /*"

The distribution-id is at the end of the Location path in the distribution creation response or listed in the AWS console.

Next Steps

With a bit of configuration and a few scripts, you have a cheap hosting solution, SSL, and the beginnings of a deployment pipeline. Once you have that in place, you could configure a custom domain, setup monitoring or logging with CloudWatch, or automate deployments with CI/CD.