Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update emulators.md #3308

Closed
wants to merge 2 commits into from
Closed
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
30 changes: 28 additions & 2 deletions docs/emulators/emulators.md
Expand Up @@ -58,6 +58,21 @@ Follow the instructions to download whatever emulator you want to use then check
}
```

Then launch the emulators by running

```shell
firebase emulators:start
```

Then you can visit

```shell
┌─────────────────────────────────────────────────────────────┐
│ ✔ All emulators ready! It is now safe to connect your app. │
│ i View Emulator UI at http://127.0.0.1:4000/ │
└─────────────────────────────────────────────────────────────┘
```

## Import the DI Tokens at your AppModule

Configuring your app to connect to local emulators is easily done by using dependency injection tokens provided by the library. However, there are slighty changes between 6.0.0 and 6.1.0 in the way it was done.
Expand All @@ -66,6 +81,17 @@ Configuring your app to connect to local emulators is easily done by using depen

Each module (database, firestore, auth, function) provides `USE_EMULATOR` token to configure the emulator `host` and `port` by passing a tuple of `[string, number]` values, which are set by default to `localhost` and the asigned port from your `firebase.json` file.

Update your `environment.ts` file:

```ts
export const environment = {
production: false,
useEmulators: true,
...
}

```

Import these tokens at your `app.module.ts` as follow:

```ts
Expand All @@ -78,7 +104,7 @@ import { USE_EMULATOR as USE_FUNCTIONS_EMULATOR } from '@angular/fire/compat/fun
// ... Existing configuration
providers: [
// ... Existing Providers
{ provide: USE_AUTH_EMULATOR, useValue: environment.useEmulators ? ['localhost', 9099] : undefined },
{ provide: USE_AUTH_EMULATOR, useValue: environment.useEmulators ? ['http://localhost', 9099] : undefined },
{ provide: USE_DATABASE_EMULATOR, useValue: environment.useEmulators ? ['localhost', 9000] : undefined },
{ provide: USE_FIRESTORE_EMULATOR, useValue: environment.useEmulators ? ['localhost', 8080] : undefined },
{ provide: USE_FUNCTIONS_EMULATOR, useValue: environment.useEmulators ? ['localhost', 5001] : undefined },
Expand Down Expand Up @@ -129,4 +155,4 @@ import { SETTINGS as FIRESTORE_SETTINGS } from '@angular/fire/compat/firestore';
export class AppModule { }
```

For older versions, please upgrade your app to latest version to get the advantages of these new features :rocket:
For older versions, please upgrade your app to latest version to get the advantages of these new features :rocket: