baseline-webpage
v2.0.11
Published
A simple React static site that is deployed to AWS using serverless.
Downloads
3
Readme
Baseline Webpage
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, staging 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
- 🔐 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
- 🔑 Support AWS CLI Profiles - no need to use default for everything!
Lighthouse Scores
Start with a perfect score!
🎉 🎉
Demo
See Baseline Webpage in action
Local Requirements
- Node.js 16 (we suggest using nvm)
- NPM version 7+ installing npm
- AWS CLI v2 (only required for local deployment)
Project Setup
npx baseline-webpage@latest my-app
wheremy-app
is the name of your appcd my-app
andnpm run aws:profile
which will configure AWS CLI with a new profile and is only required for deploying from local (if you have issues please update aws cli)
Run Locally
npm start
Deploying
npm run deploy:staging
- The output from the deploy will show
WebsiteUrl
that the site was deployed to. If you need to find it again you can runnpm run info:staging
Deploy a Change
npm run deploy:staging
- 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 Stack
To destroy the deployed stack so it is no longer on AWS run npm run remove:staging
.
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
- AWS_PROFILE = baseline-webpage
- REGION = ap-southeast-2
Optionally these can be used if staging 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.