Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/baseline-js/baseline-webpage
Simple React static site deployed to AWS using serverless
https://github.com/baseline-js/baseline-webpage
aws boilerplate cloudfront deployment jamstack nodejs react s3 serverless skeleton starter starter-template typescript
Last synced: about 17 hours ago
JSON representation
Simple React static site deployed to AWS using serverless
- Host: GitHub
- URL: https://github.com/baseline-js/baseline-webpage
- Owner: Baseline-JS
- License: mit
- Created: 2022-04-06T00:22:19.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2025-01-05T06:22:13.000Z (26 days ago)
- Last Synced: 2025-01-30T09:48:17.823Z (about 20 hours ago)
- Topics: aws, boilerplate, cloudfront, deployment, jamstack, nodejs, react, s3, serverless, skeleton, starter, starter-template, typescript
- Language: JavaScript
- Homepage:
- Size: 1 MB
- Stars: 19
- Watchers: 8
- Forks: 12
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
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](https://aws.amazon.com/cloudfront/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](https://aws.amazon.com/certificate-manager/pricing/?nc=sn&loc=3) 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
[
](https://youtu.be/9CR89RysSmc)
## Local Requirements
- Node.js 16 [(we suggest using nvm)](https://github.com/nvm-sh/nvm#install--update-script)
- NPM version 7+ [installing npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)
- [AWS CLI v2](https://aws.amazon.com/cli) (only required for local deployment)
## Project Setup
1. `npx baseline-webpage@latest my-app` where `my-app` is the name of your app
2. `cd my-app` and `npm 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
1. `npm start`
## 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 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](https://baselinejs.com/)
## License
Baseline Webpage is [MIT licensed](./LICENSE).