Giter Club home page Giter Club logo

baseline-webpage's Introduction

Baseline Webpage

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

serverless node platform pm framework CDN license types

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!

๐ŸŽ‰ Lighthouse Performance Lighthouse Accessibility Lighthouse Best Practices Lighthouse SEO ๐ŸŽ‰

Demo

See Baseline Webpage in action

Demo video

Local Requirements

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

License

Baseline Webpage is MIT licensed.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.