👨‍💻 Setting up Local Development

Next.js Environment Variables

Rename .env.example to .env.local and add your own values. Everytime you change this file you should run bun install to scaffold all the necessary environment files.

# Expo & Next.js Setup
PUBLIC_API_URL=http://localhost:8787
PUBLIC_APP_URL=http://localhost:3000
PUBLIC_SUPABASE_ANON_KEY=
PUBLIC_SUPABASE_URL=
PUBLIC_SUPPORT_EMAIL=
PUBLIC_METADATA_NAME="T4 App"
PUBLIC_METADATA_DESCRIPTION="Type-Safe, Full-Stack Starter Kit for React Native + Web."
 
# Expo Setup
PUBLIC_EAS_OWNER=
PUBLIC_EAS_PROJECT_ID=
 
# Cloudflare Wrangler Setup
JWT_VERIFICATION_KEY=
DATABASE_ID=

API Environment Variables

This is now automated with the environment variables script so you just need to add the DATABASE_ID, PUBLIC_APP_URL and JWT_VERIFICATION_KEY to the top level .env.local and then run bun install to generate the .dev.vars file.

• DATABASE_ID is the chosen database id as discussed earlier in the guide.
• APP_URL is the URL of your Next.js app. For example, http://localhost:3000.
• Get your JWT_VERIFICATION_KEY from Supabase (opens in a new tab).

The result is a file called .dev.vars in /packages/api with the following environment variables added.

# For preventing CORS errors
APP_URL=
# For Supabase @link https://supabase.com
JWT_VERIFICATION_KEY=

Configure Wrangler.toml

Wrangler is the official CLI tool for Cloudflare Workers.

Replace the account_id and database_id with your own values, following our D1 instructions or these ones:

1. Go to Cloudflare (opens in a new tab) and create an account.
2. Go to "Workers & Pages Overview" and create a new project.
3. Configure GitHub integration.
4. Configure D1 database bindings with your project.
   • do not select the '--experimental-backend' option while in Alpha
   • currently this option does not support backups & migrate command fails
5. Enter your project details in wrangler.toml.

Wranger.toml Example

name = "t4-api"
compatibility_date = "2023-01-01"
send_metrics = false
account_id = "your_account_id"
 
[[ d1_databases ]]
binding = "DB"
database_name = "production"
database_id = "your_db_id"

Expo

1. Go in your Expo settings (opens in a new tab) to create a new access token.

2. Add the EXPO_TOKEN secret to your repository with the token that you retrieved from Expo to allow GitHub Actions to publish your app.

3. Create a new project in the Expo projects (opens in a new tab)

4. Add the correct projectId to your apps/expo/app.json. Update the slug field to match your project name. Also update the owner field with your Expo username.

5. Update projectId, slug and owner fallback field inside of apps/expo/app.config.ts.

6. Setup EAS credentials for your Android and IOS apps by running eas credentials in your terminal. Setup the correct android.package and ios.bundleIdentifier in apps/expo/app.json.