Skip to content
This repository has been archived by the owner on Dec 21, 2023. It is now read-only.

Latest commit

 

History

History
357 lines (215 loc) · 11 KB

README.md

File metadata and controls

357 lines (215 loc) · 11 KB
Raw

Showtime

The Showtime app powered by Expo, Next.js, Storybook and Universal UI.

You'll find included:

Getting started

cp apps/expo/.env.development apps/next/.env then ask the team if the env is correct

yarn

yarn dev:next

Architecture

Introduction: How to build a great universal design system by Axel Delafosse

App

Code shared between iOS, Android and Web

cd packages/app

Design System

Universal design system

cd packages/design-system

Read more about the design system.

Expo

React Native

Expo entrypoint: apps/expo/App.tsx

cd apps/expo

yarn dev to start the development client (iOS and Android app with Expo)

Next.js (React Native)

Web

Next.js entrypoint: apps/next/src/pages/_app.tsx

cd apps/next

yarn dev to start the web app

Storybook React

Storybook for Web (using React Native for Web)

Storybook config: apps/storybook-react/.storybook/*

cd apps/storybook-react

yarn dev to start Storybook

Mobile Development Client

You can create a development client in local or in the cloud.

Expo Dev Client

  • We're using expo dev client for development builds which allows us to add custom/third party native libraries while preserving the expo like developer experience. Read more about custom dev clients here
  • You only need to build and install custom dev client in below cases.
  1. If you don't have it installed on your phone or simulator
  2. If you make any changes on native side or add a new native library
  • To install dev client, plug your device and run below commands. This will install the dev client and start the Metro bundler.
// For iOS
yarn ios -d

// For android
yarn android
  • For subsequent developments, we can simply start the Metro bundler, no need to build dev client again. Run the command below to start the bundler.

yarn dev:expo

Local

❗️ The yarn script commands are from within the @showtime/expo application ❗️

Plug your device and build the app with Expo CLI:

yarn ios -d
yarn android -d

iOS: if yarn ios -d doesn't detect your iPhone, make sure that you have compatible Xcode and iOS versions.

Android: if you are on a Mac M1, please install the following JDK: curl -s "https://get.sdkman.io" | bash sdk install java 11.0.14-zulu

Cloud

Use Expo Application Services to build the app:

yarn build:development

This is useful if you want to build the iOS app without a Mac, for example.

Design system (Universal UI)

React Native for Web + Tailwind

Note that we use custom utilities for the fonts to use capsize. It's applying negative margin-top and margin-bottom so you can't use those on <Text> directly. Prefer using a separator <View tw="h-2" /> instead of <Text tw="mt-2" /> or <Text tw="mb-2" /> for example.

State Management

SWR

  • SWRConfig in apps/expo/App.tsx and apps/next/src/pages/_app.tsx

Data Fetching

SWR + axios

  • axiosAPI in packages/app/lib/axios.ts
  • useSWR hooks like const { data, error } = useSWR([url], url => axios({ url, method: 'GET', unmountSignal }))
  • packages/app/hooks/use-user.ts

Navigation

React Navigation + Next.js Router

How to create a new screen

// TODO:

Authentication

Magic + WalletConnect

  • packages/app/components/login.tsx

Analytics

Amplitude

Testing

Waldo + QA Wolf

Deployment

Vercel + Expo

CI/CD

GitHub Actions

Environment Variables

Using dotenv for the Expo app. Next.js is automatically picking up the .env.local file.

  • .env.development + .env.staging + .env.production in apps/expo
  • .env in apps/next

Release Cycle

Native

Over The Air Update (EAS Update)

  1. Increment the patch version in the root package.json

  2. Run yarn update:production in apps/expo

  3. Close and re-open the production app twice to check the new update

Native Build (EAS Build + EAS Submit)

  1. Increment the major version in the root package.json

  2. Run yarn deploy:production in apps/expo

  3. Submit the new build for review on TestFlight and Google Play

Web

CI/CD with Vercel for PR previews + GitHub Actions via /promote Slack command

You can use the /promote frontend Slack command to promote from staging to production.

Use /promote frontend major to force a major update (e.g. when you want to force a new native build). Otherwise the version will be incremented automatically and an OTA update will be done if we don't require a new native build.

Notes

Pro tip: you can add tw to Tailwind CSS: Class Attributes VS Code extension setting to get IntelliSense working.

Pro tip: Ignore a list of commits within git-blame by default on version >2.23

git config blame.ignoreRevsFile .git-blame-ignore-revs

Usage

Here is a quick overview of the repo.

Commands

The monorepo leverages Turborepo as it's build system. There are a lot of advantages to Turborepo but two deciding factors were

  1. Faster, incremental builds
  2. Cloud caching, managed by Vercel

Turbo pipelines are configured within the root directory package.json and can be ran through yarn scripts.

Development

Build

Start

Lint

Formatting

The formatting rules are the ones from prettier/recommended. The actual formatting is done via eslint.

To get formatting on save in VS Code, install the eslint extension and add the following setting:

"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
}

Graph

Utility scripts

  • clean removes all monorepo node_modules and clears the turbo cache
  • clean:turbo clears the turbo cache
  • clean:node-modules removes all node_modules
  • clean:native runs yarn clean and removes android, iOS folders from expo.

Enable Remote Cache

Turbo can use a technique known as Remote Caching to share cache artifacts across machines for an additional speed boost.

Local Remote Cache

Link your local turbo project to the remote cache through Vercel

npx turbo login

npx turbo link

To verify, build and delete your local turbo cache with:

  1. Run any build locally
  2. Clear the turbo cache yarn clean:turbo
  3. Then run the same build again. If things are working properly, turbo should not execute tasks locally

Troubleshooting

If Vercel is not deploying after updating or adding a patch package, you need to click on "Redeploy" on Vercel and don’t select "Use the same cache". Most of the time, it is a cache issue.

Root

  • Don't add any package here

App

  • Don't add any package here
  • You can use SVGR to generate the icons component from the .svg files: npx @svgr/cli --icon --replace-attr-values "#000={props.color},#fff={props.color},#FFF={props.color}" --ignore-existing --native --typescript -d . . and then you can programmatically change the color thanks to fill={props.color} for example.

Expo

  • Add all the React Native and universal packages here

Next.js

  • Add the web-only packages here

Quick Style Guide

  • Filenames: lowercase and separated by dashes
  • Prefer absolute imports
  • Avoid coding in the index.tsx file, create a new file and export it from the index.ts file
  • export { Component } instead of export default Component