feat: whyrating - initial project from turbostarter boilerplate
This commit is contained in:
Alejandro Gutiérrez
@@ -0,0 +1,152 @@
|
||||
---
|
||||
title: App configuration
|
||||
description: Learn how to setup the overall settings of your app.
|
||||
url: /docs/mobile/configuration/app
|
||||
---
|
||||
|
||||
# App configuration
|
||||
|
||||
When configuring your app, you'll need to define settings in different places depending on which provider will use them (e.g., Expo, EAS).
|
||||
|
||||
## App configuration
|
||||
|
||||
Let's start with the core settings for your app. These settings are **crucial** as they're used by Expo and EAS to build your app, determine its store presence, prepare updates, and more.
|
||||
|
||||
This configuration includes essential details like the official name, description, scheme, store IDs, splash screen configuration, and more.
|
||||
|
||||
You'll define these settings in `apps/mobile/app.config.ts`. Make sure to follow the [Expo config schema](https://docs.expo.dev/versions/latest/config/app/) when setting this up.
|
||||
|
||||
Here is an example of what the config file looks like:
|
||||
|
||||
```ts title="apps/mobile/app.config.ts"
|
||||
import { ExpoConfig } from "expo/config";
|
||||
|
||||
export default ({ config }: ConfigContext): ExpoConfig => ({
|
||||
...config,
|
||||
name: "TurboStarter",
|
||||
slug: "turbostarter",
|
||||
scheme: "turbostarter",
|
||||
version: "0.1.0",
|
||||
orientation: "portrait",
|
||||
icon: "./assets/images/icon.png",
|
||||
userInterfaceStyle: "automatic",
|
||||
assetBundlePatterns: ["**/*"],
|
||||
sdkVersion: "51.0.0",
|
||||
platforms: ["ios", "android"],
|
||||
updates: {
|
||||
fallbackToCacheTimeout: 0,
|
||||
},
|
||||
newArchEnabled: true,
|
||||
ios: {
|
||||
bundleIdentifier: "your.bundle.identifier",
|
||||
supportsTablet: false,
|
||||
},
|
||||
android: {
|
||||
package: "your.bundle.identifier",
|
||||
adaptiveIcon: {
|
||||
monochromeImage: "./public/images/icon/android/monochrome.png",
|
||||
foregroundImage: "./public/images/icon/android/adaptive.png",
|
||||
backgroundColor: "#0D121C",
|
||||
},
|
||||
},
|
||||
extra: {
|
||||
eas: {
|
||||
projectId: "your-project-id",
|
||||
},
|
||||
},
|
||||
experiments: {
|
||||
tsconfigPaths: true,
|
||||
typedRoutes: true,
|
||||
},
|
||||
plugins: ["expo-router", ["expo-splash-screen", SPLASH]],
|
||||
});
|
||||
```
|
||||
|
||||
Make sure to replace the values with your own and take your time to set everything correctly.
|
||||
|
||||
<Card title="Configure with app config" description="docs.expo.dev" href="https://docs.expo.dev/workflow/configuration/" />
|
||||
|
||||
### Internal configuration
|
||||
|
||||
The same as for the [web app](/docs/web/configuration/app), and [extension](/docs/extension/configuration/app), we're defining the internal app config, which stores some overall variables for your application (that can't be read from Expo config).
|
||||
|
||||
The recommendation is to **not update this directly** - instead, please define the environment variables and override the default behavior. The configuration is strongly typed so you can use it safely accross your codebase - it'll be validated at build time.
|
||||
|
||||
```ts title="apps/mobile/src/config/app.ts"
|
||||
import env from "env.config";
|
||||
|
||||
export const appConfig = {
|
||||
locale: env.EXPO_PUBLIC_DEFAULT_LOCALE,
|
||||
url: env.EXPO_PUBLIC_SITE_URL,
|
||||
theme: {
|
||||
mode: env.EXPO_PUBLIC_THEME_MODE,
|
||||
color: env.EXPO_PUBLIC_THEME_COLOR,
|
||||
},
|
||||
} as const;
|
||||
```
|
||||
|
||||
For example, to set the mobile app default theme color, you'd update the following variable:
|
||||
|
||||
```dotenv title=".env.local"
|
||||
EXPO_PUBLIC_THEME_COLOR="yellow"
|
||||
```
|
||||
|
||||
<Callout type="warn" title="Do NOT use process.env!">
|
||||
Do NOT use `process.env` to get the values of the variables. Variables
|
||||
accessed this way are not validated at build time, and thus the wrong variable
|
||||
can be used in production.
|
||||
</Callout>
|
||||
|
||||
## EAS configuration
|
||||
|
||||
To properly build and publish your app, you need to define settings for the EAS build service.
|
||||
|
||||
This is done in `apps/mobile/eas.json` and it must follow the [EAS config scheme](https://docs.expo.dev/eas/json/).
|
||||
|
||||
Here is an example of what the config file looks like:
|
||||
|
||||
```json title="apps/mobile/eas.json"
|
||||
{
|
||||
"cli": {
|
||||
"version": ">= 4.1.2"
|
||||
},
|
||||
"build": {
|
||||
"base": {
|
||||
"node": "20.15.0",
|
||||
"pnpm": "9.6.0",
|
||||
"ios": {
|
||||
"resourceClass": "m-medium"
|
||||
},
|
||||
"env": {
|
||||
"EXPO_PUBLIC_DEFAULT_LOCALE": "en",
|
||||
"EXPO_PUBLIC_AUTH_PASSWORD": "true",
|
||||
"EXPO_PUBLIC_AUTH_MAGIC_LINK": "false",
|
||||
"EXPO_PUBLIC_THEME_MODE": "system",
|
||||
"EXPO_PUBLIC_THEME_COLOR": "orange"
|
||||
}
|
||||
},
|
||||
...
|
||||
"preview": {
|
||||
"extends": "base",
|
||||
"distribution": "internal",
|
||||
"android": {
|
||||
"buildType": "apk"
|
||||
},
|
||||
"env": {
|
||||
"APP_ENV": "test",
|
||||
}
|
||||
},
|
||||
"production": {
|
||||
"extends": "base",
|
||||
"env": {
|
||||
"APP_ENV": "production",
|
||||
}
|
||||
}
|
||||
...
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
Make sure to also fill all the [environment variables](/docs/mobile/configuration/environment-variables) with the correct values for your project and correct environment, otherwise your app won't build and you won't be able to publish it.
|
||||
|
||||
<Card title="Configure EAS Build with eas.json" description="docs.expo.dev" href="https://docs.expo.dev/build/eas-json/" />
|
||||
@@ -0,0 +1,92 @@
|
||||
---
|
||||
title: Environment variables
|
||||
description: Learn how to configure environment variables.
|
||||
url: /docs/mobile/configuration/environment-variables
|
||||
---
|
||||
|
||||
# Environment variables
|
||||
|
||||
Environment variables are defined in the `.env` file in the root of the repository and in the root of the `apps/mobile` package.
|
||||
|
||||
* **Shared environment variables**: Defined in the **root** `.env` file. These are shared between environments (e.g., development, staging, production) and apps (e.g., web, mobile).
|
||||
* **Environment-specific variables**: Defined in `.env.development` and `.env.production` files. These are specific to the development and production environments.
|
||||
* **App-specific variables**: Defined in the app-specific directory (e.g., `apps/web`). These are specific to the app and are not shared between apps.
|
||||
* **Build environment variables**: Not stored in the `.env` file. Instead, they are stored in `eas.json` file used to build app on [Expo Application Services](https://expo.dev/eas).
|
||||
* **Secret keys**: They're not stored on mobile side, instead [they're defined on the web side.](/docs/web/configuration/environment-variables#secret-keys)
|
||||
|
||||
## Shared variables
|
||||
|
||||
Here you can add all the environment variables that are shared across all the apps.
|
||||
|
||||
To override these variables in a specific environment, please add them to the specific environment file (e.g. `.env.development`, `.env.production`).
|
||||
|
||||
```dotenv title=".env.local"
|
||||
# Shared environment variables
|
||||
|
||||
# The database URL is used to connect to your database.
|
||||
DATABASE_URL="postgresql://postgres:postgres@localhost:5432/postgres"
|
||||
|
||||
# The name of the product. This is used in various places across the apps.
|
||||
PRODUCT_NAME="TurboStarter"
|
||||
|
||||
# The url of the web app. Used mostly to link between apps.
|
||||
URL="http://localhost:3000"
|
||||
|
||||
...
|
||||
```
|
||||
|
||||
## App-specific variables
|
||||
|
||||
Here you can add all the environment variables that are specific to the app (e.g. `apps/mobile`).
|
||||
|
||||
You can also override the shared variables defined in the root `.env` file.
|
||||
|
||||
```dotenv title="apps/mobile/.env.local"
|
||||
# App-specific environment variables
|
||||
|
||||
# Env variables extracted from shared to be exposed to the client in Expo app
|
||||
EXPO_PUBLIC_SITE_URL="${URL}"
|
||||
EXPO_PUBLIC_DEFAULT_LOCALE="${DEFAULT_LOCALE}"
|
||||
|
||||
# Theme mode and color
|
||||
EXPO_PUBLIC_THEME_MODE="system"
|
||||
EXPO_PUBLIC_THEME_COLOR="orange"
|
||||
|
||||
# Use this variable to enable or disable password-based authentication. If you set this to true, users will be able to sign up and sign in using their email and password. If you set this to false, the form won't be shown.
|
||||
EXPO_PUBLIC_AUTH_PASSWORD="true"
|
||||
|
||||
...
|
||||
```
|
||||
|
||||
<Callout title="EXPO_PUBLIC_ prefix">
|
||||
To make environment variables available in the Expo app code, you need to prefix them with `EXPO_PUBLIC_`. They will be injected to the code during the build process.
|
||||
|
||||
Only environment variables prefixed with `EXPO_PUBLIC_` will be injected.
|
||||
|
||||
[Read more about Expo environment variables.](https://docs.expo.dev/guides/environment-variables/)
|
||||
</Callout>
|
||||
|
||||
## Build environment variables
|
||||
|
||||
To allow your app to build properly on [EAS](https://expo.dev/eas) you need to define your environment variables either in your `eas.json` file under corresponding profile (e.g. `preview` or `production`) or directly in the [EAS platform](https://docs.expo.dev/eas/environment-variables/):
|
||||
|
||||
|
||||
|
||||
Then, when you trigger build, correct environment variables will be injected to your mobile app code ensuring that everything is working correctly.
|
||||
|
||||
[Check EAS documentation for more details.](https://docs.expo.dev/eas/environment-variables/)
|
||||
|
||||
## Secret keys
|
||||
|
||||
Secret keys and sensitive information are to be **never** stored on the mobile app code.
|
||||
|
||||
<Callout title="What does this mean?">
|
||||
It means that you will need to add the secret keys to the **web app, where the API is deployed.**
|
||||
|
||||
The mobile app should only communicate with the backend API, which is typically part of the web app. The web app is responsible for handling sensitive operations and storing secret keys securely.
|
||||
|
||||
[See web documentation for more details.](/docs/web/configuration/environment-variables#secret-keys)
|
||||
|
||||
This is not a TurboStarter-specific requirement, but a best practice for security for any
|
||||
application. Ultimately, it's your choice.
|
||||
</Callout>
|
||||
@@ -0,0 +1,47 @@
|
||||
---
|
||||
title: Paths configuration
|
||||
description: Learn how to configure the paths of your app.
|
||||
url: /docs/mobile/configuration/paths
|
||||
---
|
||||
|
||||
# Paths configuration
|
||||
|
||||
The paths configuration is set at `apps/mobile/config/paths.ts`. This configuration stores all the paths that you'll be using in your application. It is a convenient way to store them in a central place rather than scatter them in the codebase using magic strings.
|
||||
|
||||
It is **unlikely you'll need to change** this unless you're heavily editing the codebase.
|
||||
|
||||
```ts title="apps/mobile/config/paths.ts"
|
||||
const pathsConfig = {
|
||||
index: "/",
|
||||
setup: {
|
||||
welcome: "/welcome",
|
||||
auth: {
|
||||
login: `${AUTH_PREFIX}/login`,
|
||||
register: `${AUTH_PREFIX}/register`,
|
||||
forgotPassword: `${AUTH_PREFIX}/password/forgot`,
|
||||
updatePassword: `${AUTH_PREFIX}/password/update`,
|
||||
error: `${AUTH_PREFIX}/error`,
|
||||
join: `${AUTH_PREFIX}/join`,
|
||||
},
|
||||
steps: {
|
||||
start: `${STEPS_PREFIX}/start`,
|
||||
required: `${STEPS_PREFIX}/required`,
|
||||
skip: `${STEPS_PREFIX}/skip`,
|
||||
final: `${STEPS_PREFIX}/final`,
|
||||
},
|
||||
},
|
||||
dashboard: {
|
||||
user: {
|
||||
index: DASHBOARD_PREFIX,
|
||||
ai: `${DASHBOARD_PREFIX}/ai`,
|
||||
...
|
||||
}
|
||||
...
|
||||
}
|
||||
} as const;
|
||||
```
|
||||
|
||||
<Callout title="Fully type-safe">
|
||||
By declaring the paths as constants, we can use them safely throughout the
|
||||
codebase. There is no risk of misspelling or using magic strings.
|
||||
</Callout>
|
||||
Reference in New Issue
Block a user