Skip to content

Latest commit

 

History

History
94 lines (75 loc) · 3.02 KB

README.md

File metadata and controls

94 lines (75 loc) · 3.02 KB

Fediverse server viewer

Progressive Web App (PWA) and API to keep track of server info and custom emojis.

Architecture

The current production deployment has:

  • API
    • Hosted as serverless functions.
    • HTTP API Gateway endpoint access restricted with a Lambda authorizer [1].
    • CORS enabled.
    • Served through a CDN.
    • Using edge locations in North America and Europe.
  • PWA
    • Hosted as a secure static site [2] on object storage.
    • Served through a CDN.
    • CloudFront Function [3] to rewrite URIs that are meant to be handled by client-side routing.
    • Content Security Policy for the response headers from the distribution.
    • Using edge locations in North America and Europe.
  • Route 53 for DNS with custom domain for web app and API endpoints with SSL.
  • Infrastructure as Code.

[1] https://aws.amazon.com/blogs/networking-and-content-delivery/restricting-access-http-api-gateway-lambda-authorizer/
[2] https://github.com/santisbon/static-site
[3] https://github.com/santisbon/amazon-cloudfront-functions

API

API

PWA

Web

To run web app locally

npm install
npm run dev # start dev server
npm run build # build for production
npm run preview # locally preview production build

If you want to run it on a different port:

npm run dev -- --port 8000

To deploy API

Deploy to your AWS account with the AWS CLI e.g.

aws cloudformation package \
    --region us-east-1 \
    --template-file template.yaml \
    --output-template-file packaged.template \
    --s3-bucket $ARTIFACTS \

aws cloudformation deploy \
    --region us-east-1 \
    --stack-name $STACK \
    --template-file packaged.template \
    --capabilities CAPABILITY_IAM \
    --parameter-overrides DomainName=$DOMAIN SubDomain=$SUBDOMAIN HostedZoneId=$HOSTEDZONE

Implementation Details

See more

Client

The app was bootstrapped with Vite as the bundler and dev server and the React template:

npm create vite@latest name-of-your-project -- --template react
# follow prompts
cd <your new project directory>
npm install <your dependencies>
npm run dev

Icons created with Favicon Generator.

The service worker was generated with Vite Plugin PWA. It was used to:

  • Generate the manifest.
  • Configure the manifest with a link in the head of the app entry point.
  • Generate a service worker.
  • Generate a script to register the sw. See here for details on the plugin options.

To install the plugin:

npm i vite-plugin-pwa -D