🚀 Setting up Production

API Secrets

For deployed environments, you can use wrangler secrets to set APP_URL and JWT_VERIFICATION_KEY values.

For example:

Run echo <VALUE> | wrangler secret put <NAME> for each of these

Or use the Cloudflare web interface (opens in a new tab).

Setup CI/CD Secrets

Secrets are secure environment variables you provide GitHub so that you don't need to hard code the project-token in your workflow file.

Next.js

1. Deploying to Cloudflare Pages requires the following secrets added to your GitHub repository:

CF_API_TOKEN=
CF_ACCOUNT_ID=
CF_PROJECT_NAME=

2. Disable Enable automatic production branch deployments in the Cloudflare Pages dashboard. This conflicts with our Github Actions.

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.

7. Over on your repository set the Read and write permissions in Settings > Actions > General > Workflow Permissions. This specific workflow includes only the contents: write permission that is needed to comment on your commits with the build download links.

8. Push your changes to GitHub and watch your app being built in EAS.

Configure Wrangler.toml

Wrangler is the official CLI tool for Cloudflare Workers.

Replace the account_id and database_id with your own values as discussed earlier.

API Wranger.toml

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

Next.js Wranger.toml

Replace the name and route values with your own.

[env.preview]
name = "t4-app-preview"
workers_dev = true
 
[env.production]
name = "t4-app"
route = "app.t4stack.com/*"
workers_dev = false

Environment Variables

Configure environment variables within the Cloudflare Pages dashboard for production. Most of the development environment variables will probably stay the same so use your .env.local as a starting point for this. Remember to add the NEXT_PUBLIC prefix back.

Your API server runs as a Cloudflare Worker. Cloudflare is working on combining the Workers and Pages dashboards, so you can configure your environment variables in one place.

# Change the name of this file to .env and add your own values
 
# API
NEXT_PUBLIC_API_URL=http://api.t4stack.com/
 
# Authentication
# @link https://supabase.com/dashboard for your Supabase API keys
NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
NEXT_PUBLIC_SUPPORT_EMAIL=

Authentication

To set up authentication with Supabase in your application, you will need to configure certain environment variables and customize the email verification redirect link for production. Head over to (opens in a new tab) for your Supabase API keys and set the following environment variables:

NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=

You should set the JWT_VERIFICATION_KEY with wrangler, also found in Supabase as JWT Secret in the API Settings.

In Supabase, you need to configure the email verification redirect link for the production environment. This link determines where users will be redirected to after Supabase has confirmed their account through email verification. Make sure to set this link to your actual production website.

To set up the email verification redirect link, follow these steps:

• Go to the project settings or authentication settings.
• Look for the option to configure the email verification redirect link.
• Enter the URL of your production website that you want users to be redirected to.

By customizing this redirect link, you ensure a seamless experience for your users during the email verification process.