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

PWA

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