Introducing the SST + Tamagui Stack

Summary

This first article introduces a Github starter I've published here to bring together:

1. React JS Website

2. React Native Mobile App (with Expo)

3. Codesharing of web and mobile frontend components using Tamagui. Write once, deploy to HTML (web) and via React Native to iOS and Android.

4. Typesafe Graphql server and client for backend and frontend.

5. Deployment of the backend and infrastructure using SST (previously Serverless Stack) to include:

   1. Serverless, scaleable NextJS Site deployment to AWS Cloudfront + Lambda

   2. Apollo Graphql Server for the website (deployed the same origin to "/api/graphql") and a separate AWS API Gateway endpoint for the mobile app

Get started quick

1. Clone the repo with:

git clone git@github.com:BenjaminWatts/sst-tamagui-starter.git

1. Do installs with yarn:

yarn

1. Fire-up the backend

yarn run dev

1. Once complete, start the web app in development

cd packages/next && yarn run dev

1. Start the mobile app using Expo (follow the instructions here) first.

cd packages/expo && yarn run start

Rationale

I've long advocated both Serverless (inc Infrastructure as code) as well as React/React-Native for Web and Mobile.

Building apps to a tight budget or timescale requires shortcuts and efficiencies, which this repo unlocks by:

1. Sharing frontend component code not just between iOS and Android (as React Native allows you to over native options), but between mobile and web.

2. Graphql to enforce type-safety between frontend and backend. This is a schema-first approach, and with the mono repo, the structure minimises the risk of communication errors between the front and backend.

3. SST, one-line build and deployment for backend code including the NextJS Webapp (mobile build still manual, I may create a complete pipeline in the future).

4. SST one-line dev environment setup, with hot code reloading lambda functions (i.e. business logic) from the developer's computer.

Over the coming the weeks, I'll do some deep dives into how each of these components works.