Bearcam Companion: Hosting with Amplify and GitHub
Tags: amplify, beginners, webdev, github
Published: 2022-09-04 06:29:10

The Bearcam Companion application was pretty much ready to go after my [last post on Lambdas](https://dev.to/aws-builders/bearcam-companion-my-first-lambda-5931). The final step (at least for a minimum viable product) was to publish the site. Not surprisingly, I chose to use [AWS Amplify Hosting](https://aws.amazon.com/amplify/hosting/).

## AWS Amplify Hosting

There is an overview on how to use Amplify to set up hosting for your site in the [AWS Amplify User Guide](https://docs.aws.amazon.com/amplify/latest/userguide/getting-started.html). I used the Amplify Console to get started.

### Connect to GitHub

Since I already have my code in a GitHub repository (as described [here](https://dev.to/aws-builders/bearcam-companion-github-user-groups-and-rekognition-3kdk)), decided to use a continuous integration flow. In the setup, I selected GitHub and connected Amplify to [my repository](https://github.com/hypraptive/bearcam-companion). I only have one branch and one back end (staging) so far, so I selected those. The build settings were automatically detected for both the front end and back end, so I confirmed them. After clicking Save and Deploy, the build process started.

### Auto-build Process

The build process goes through 4 steps:

1. Provision - Sets up the build environment on a default host.
2. Build - Clones the repo, deploys the backend and builds the front end.
3. Deploy - Deploys artifacts to a managed hosting environment.
4. Verify - Screen shots of the application are rendered.

The first build failed because I didn't have `aws-amplify` in the GitHub repo. I ran

```console
npm install aws-amplify
```
and committed the change. Once I pushed it to GitHub, the Amplify build process started automatically.

![Build Process](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xf2lku1974qblstz35ps.png)

This time the build was successful, and I was able to view the application at the provided URL:

[https://master.d7ijzylsc7qfm.amplifyapp.com/](https://master.d7ijzylsc7qfm.amplifyapp.com/)

![Website with default URL](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/usokbuq99squkk7azz10.png)

The build history, and all the details for each step, are available in the console.

![Build History](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t71a479mpcmr7el2pn4d.png)

Every time I push commits to the main repo, the above process kicks off, ending with a fresh new deployment of the site.

## Custom URL

The default URL is not very user friendly. I want the web application to appear as part of the BearID Project ([http://bearid.org/](http://bearid.org/)). Specifically, I want to set it up at **app.bearid.org**. 

To achieve this, I followed the [Set up custom domains](https://docs.aws.amazon.com/amplify/latest/userguide/custom-domains.html) section of the Amplify User Guide. Essentially, you need to add some DNS records wherever your domain is managed. In my case, I had to add 2 CNAME records. The first record maps the subdomain (app) to the default Amplify app url above. The second record points to the AWS Certificate Manager (ACM) validation server, which enables TLS, and therefore, https. Finally I set up a subdomain forward so that all accesses to my URL go to the Amplify application.

Once I completed the setup, I had to wait a few hours for all the records to propagate and for the SLL configuration to complete:

![Custom Domain Setup](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7mua6a5qrxibaplahjfv.png)

Once the Domain Activation step above completed, I am able to view the Bearcam Companion at [https://app.bearid.org/](https://app.bearid.org/). 

![Website with custom URL](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9te9ie6jxdnowdisv5cy.png)

## Conclusion

In this post I discussed hosting my application with Amplify, connecting it to my GitHub repo for automatic deployment and setting up a custom URL. Once again, Amplify made the process extremely easy. 

If you find yourself watching the [Brooks Falls Brown Bears cam on Explore.org](https://explore.org/livecams/brown-bears/brown-bear-salmon-cam-brooks-falls) and you are interested in learning who is who, sign up and log in to the [Bearcam Companion](https://app.bearid.org/). If you already know the bear of Brooks River, log in and help us label the images!

![Bearcam Companion Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ijz06vqk8sq7w2gf6iow.png)