create-t3-turbo - Expo Reactネイティブと一緒にT3スタックを使用したクリーンでシンプルなスターターレポ

(Clean and simple starter repo using the T3 Stack along with Expo React Native)

Created at: 2022-08-22 05:53:40
Language: TypeScript
License: MIT

作成-t3-ターボ

T3ターボの作成

に関しては

T3アプリケーションをモノレポに移行する方法を考えたことはありますか?ここで止まってください!これは完璧なスタックで実行するための完璧なスターターレポです!

それはターボレポを使用し、含まれています:

.github
  └─ workflows
        └─ CI with pnpm cache setup
.vscode
  └─ Recommended extensions and settings for VSCode users
apps
  ├─ expo
  |   ├─ Expo SDK 46
  |   ├─ React Native using React 18
  |   ├─ Tailwind using Nativewind
  |   └─ Typesafe API calls using tRPC
  └─ next.js
      ├─ React 18
      ├─ TailwindCSS
      └─ E2E Typesafe API Server & Client
packages
 ├─ api
 |   └─ tRPC v10 router definition
 └─ db
     └─ typesafe db-calls using Prisma

クイックスタート

実行するには、次の手順に従います。

セットアップの依存関係

# Install dependencies
pnpm i

# In packages/db/prisma update schema.prisma provider to use sqlite
# or use your own database provider
- provider = "postgresql"
+ provider = "sqlite"

# Create a `.env` for prisma and make sure it's synced
echo DATABASE_URL=file:./db.sqlite >> packages/db/.env
pnpm db-push

エキスポスクリプトの設定
dev

手記:Expo Goで物理的な電話を使用する場合は、QRコードを実行してスキャンするだけです。

pnpm dev

iOSシミュレータを使用する

  1. 博覧会のドキュメントに示されているように、XCodeとXCommandラインツールがインストールされていることを確認してください。
  2. でスクリプトを変更して、iOS シミュレーターを開きます。
    dev
    apps/expo/package.json
+  "dev": "expo start --ios",
  1. プロジェクトのルートフォルダで実行します。
    pnpm dev

アンドロイド用

  1. 博覧会のドキュメントに示されているようにAndroid Studioツールをインストールします。
  2. でスクリプトを変更して、Android エミュレーターを開きます。
    dev
    apps/expo/package.json
+  "dev": "expo start --android",
  1. プロジェクトのルートフォルダで実行します。
    pnpm dev

配備

次へ.js

前提 条件

SQLite データベースは永続化されないため、サーバーレス環境にデプロイすることはお勧めしません。私は鉄道で迅速なPostgresqlデータベースをプロビジョニングしましたが、もちろん他のデータベースプロバイダを使用することもできます。prisma スキーマが正しいデータベースを使用するように更新されていることを確認します。

Vercel へのデプロイ

Next.js アプリケーションを Vercel にデプロイしましょう。Turborepoアプリをそこに展開したことがあれば、手順は非常に簡単です。Vercelへのデプロイに関する公式のTurborepoガイドを読むこともできます。

  1. Vercelで新しいプロジェクトを作成し、ルートディレクトリとしてフォルダを選択し、次のビルド設定を適用します。

    apps/nextjs
    クリーンショット 2022-09-03 に 22 51 25@2x

  2. 環境変数を追加します。

    DATABASE_URL

  3. 完成です!アプリが正常に展開されるはずです。ドメインを割り当て、Expo アプリではなくそのドメインを使用して、開発中でないときに Expo アプリがバックエンドと通信できるようにします。

    localhost
    url

エキスポ

Expo アプリケーションのデプロイは、Web 上の Next.js とは少し異なります。アプリをオンラインで「デプロイ」する代わりに、アプリのプロダクションビルドをApple App StoreGoogle Playなどのアプリストアに提出する必要があります。ベスト プラクティスを含むアプリの配布に関する完全なドキュメントについては、Expo のドキュメントをご覧ください。

  1. まず、Expoアプリケーションサービスの略であるEASビルドを設定しましょう。build サービスは、完全なネイティブ開発セットアップを必要とせずに、アプリのビルドを作成するのに役立ちます。以下のコマンドは、最初のビルドの作成の概要です

    // Install the EAS CLI
    $ pnpm add -g eas-cli
    
    // Log in with your Expo account
    $ eas login
    
    // Configure your Expo app
    $ cd apps/expo
    $ eas build:configure
  2. 初期セットアップの後、最初のビルドを作成できます。Android および iOS プラットフォーム用にビルドし、さまざまな eas.json ビルド プロファイルを使用して、運用ビルドまたは開発、またはテスト ビルドを作成できます。iOSのプロダクションビルドを作成しましょう。

    $ eas build --platform ios --profile production
    

    フラグを指定しない場合、EAS はデフォルトでプロファイルを使用します。

    --profile
    production

  3. 最初の運用ビルドができたので、これをストアに送信できます。EAS送信は、ビルドを店舗に送信するのに役立ちます。

    $ eas submit --platform ios --latest
    

    また、 を使用して、ビルドとサブミットを 1 つのコマンドで組み合わせることもできます。

    eas build ... --auto-submit

  4. アプリをユーザーの手に渡す前に、アプリストアに追加情報を提供する必要があります。これには、スクリーンショット、アプリ情報、プライバシー ポリシーなどが含まれます。プレビュー段階ですがEAS メタデータは、この情報のほとんどに役立ちます。

  5. すべてが承認されると、ユーザーは最終的にアプリを楽しむことができます。小さなタイプミスを見つけたとしましょう。この問題を解決するには、新しいビルドを作成してストアに送信し、承認を待つ必要があります。このような場合、EAS Update を使用すると、この長いプロセスを経ることなく、小さなバグ修正をユーザーにすばやく送信できます。EASアップデートを設定することから始めましょう。

    以下の手順は、「EAS アップデート入門」ガイドをまとめたものです。

    // Add the `expo-updates` library to your Expo app
    $ cd apps/expo
    $ pnpm expo install expo-updates
    
    // Configure EAS Update
    $ eas update:configure
  6. アプリに更新を送信する前に、新しいビルドを作成してアプリストアに提出する必要があります。ネイティブ API を含むすべての変更について、アプリを再構築し、アプリストアに更新プログラムを提出する必要があります。ステップ 2 および 3 を参照してください。

  7. すべての更新の準備が整ったので、ビルド用の新しい更新プログラムを作成しましょう。このフラグを指定すると、EAS Update は現在の git ブランチ名とコミットメッセージをこの更新に使用します。詳細については、「EAS アップデートのしくみ」を参照してください。

    production
    --auto

    $ cd apps/expo
    $ eas update --auto

    OTA(Over The Air)アップデートは、常にアプリストアのルールに従う必要があります。アプリストアの承認を得ずにアプリの主な機能を変更することはできません。しかし、これはマイナーな変更やバグ修正のためにアプリを更新する簡単な方法です。

  8. 完成です!プロダクションビルドを作成し、ストアに送信し、EAS Updateをインストールしたので、準備は完了です!

参照

スタックは create-t3-app から生成されます。

T3アプリをこれに移行する方法を書いたブログ記事