Baseline Webpage - Cloud9

A simple React static site that is deployed to AWS using serverless.

Goals

• Deploy quickly with minimal effort
• Everything you need to start building straight away with production quality
• Support deployment from local, Bitbucket & GitHub
• Deploy and test ideas before you buy that perfect domain name
• Prod, dev and local environments separated from the start

Features

• ⚡️ Serverless
• 💰 Cost friendly - only pay for what you use
• 🌏 Fast and global CDN with Cloudfront
• ✨ Automatic cache invalidation (1000 free per month - check pricing)
• 👉 Redirect HTTP to HTTPS
• 🚀 Ready to use Bitbucket Pipeline and Github Action
• ⌨️ Deploy from your local machine (optional)
• 🤝 HTTP2 support
• 🗜 Gzip and Brotli compression
• 🏗 Modern tools Typescript, React, Serverless Framework, SCSS
• 🔐 HTTPS/TLS support
• 💻 Team Collaboration - Great for a single developer or a whole team
• 🥞 Perfect for a Jamstack
• 🏎 Fast Deployments - deploy changes quicker!
• ☎️ Minimal configuration required to get started
• 🛣 DNS with Route53
• ✅ Free SSL/TLS with AWS Certificate Manager when using Route53
• 🎬 Test new ideas quickly and single command tear down when you are done, no mess

Lighthouse Scores

Start with a perfect score!

🎉 🎉

Demo

See Baseline Webpage in action

Project Setup

Create in AWS CloudFormation

Use link created in Outputs, this should open Cloud9.

In the terminal at the bottom of the screen

cd app
npm install
npm run setup

Run Locally

1. npm start

Once it is running to view the site running from the top bar Tools -> Preview -> Preview Running Application.

Deploying

1. npm run deploy:staging
2. The output from the deploy will show WebsiteUrl that the site was deployed to. If you need to find it again you can run npm run info:staging

Deploy a Change

1. npm run deploy:staging
2. Allow some time for the Cloudfront cache invalidation to finish to see changes in browser

Adding a Domain

• Deploy first
• Set up a Route53 Hosted zone for the desired domain name
• Create a single ACM certificate for *.$DOMAIN_NAME & $DOMAIN_NAME
• Add an "Alternate domain name" to the Distribution that matches your buckets name
• Edit Route53 and point the domain with an A record to the Distribution

Remove

To destroy the deployed stack so it is no longer on AWS run npm run remove:staging.

And delete the CloudFormation Stack after the remove has finished to remove Cloud9.

Environment Flag

You can add checks in the code to determine if you are in a deployed or development environment. Development will only be for locally run code. Currently cannot tell the difference between deployed staging and prod.

• process.env.NODE_ENV === 'production'
• process.env.NODE_ENV === 'development'

Pipeline Variables

The main and prod branches will trigger the action/pipeline to deploy. The stage is determined by the branch name being "prod" or not.

GitHub

Create two Actions secrets with the AWS account keys you will deploy with:

• AWS_ACCESS_KEY_ID = xxxx
• AWS_SECRET_ACCESS_KEY = xxxx

Bitbucket

If you are using the BitBucket pipeline deployment then you will need to set these pipeline environment variables in BitBucket:

• AWS_ACCESS_KEY_ID = xxxx
• AWS_SECRET_ACCESS_KEY = xxxx
• PROFILE = baseline-webpage
• REGION = ap-southeast-2

Optionally these can be used if dev and prod are in different accounts or the IAM roles have different access:

• PROD_AWS_ACCOUNT_ACCESS_KEY_ID = xxxx
• PROD_AWS_ACCOUNT_SECRET_ACCESS_KEY = xxxx
• NON_AWS_ACCOUNT_ACCESS_KEY_ID = xxxx
• NON_AWS_ACCOUNT_SECRET_ACCESS_KEY = xxxx

Baseline

If you would like to learn more about what we do please visit Baseline

License

Baseline Webpage is MIT licensed.