santisbon / emojos

Get a categorized list of custom emojis from Fediverse servers.

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

Node 20 seems to break Babel which breaks React so if you run into that issue you should use Node 18 and add it to your PATH e.g.

brew install node@18
echo 'export PATH="/opt/homebrew/opt/node@18/bin:$PATH"' >> ~/.zshrc

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