Skip to content

docs: refresh quickstart and README for current ng add and deploy paths #3736

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.

Sign up for GitHub

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

Open
armando-navarro wants to merge 1 commit into
base: main
Choose a base branch
from
Open

docs: refresh quickstart and README for current ng add and deploy paths #3736

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 26 additions & 27 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,34 +12,33 @@ by conforming to Angular conventions.
- **Observable based** - Utilize RxJS rather than callbacks for real-time streams.
- **NgRx friendly API** - Integrate with NgRx using AngularFire's action based APIs.
- **Lazy-loading** - AngularFire dynamically imports much of Firebase, reducing the time to load your app.
- **Deploy schematics** - Get your Angular application deployed on Firebase Hosting with a single command.
- **Google Analytics** - Zero-effort Angular Router awareness in Google Analytics.
- **Router Guards** - Guard your Angular routes with built-in Firebase Authentication checks.

## Example use

```ts
import { ApplicationConfig } from '@angular/core';
import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
import { getFirestore, provideFirestore } from '@angular/fire/firestore';

export const appConfig: ApplicationConfig = {
providers: [
provideFirebaseApp(() => initializeApp({ ... })),
provideFirebaseApp(() => initializeApp({ /* ...your Firebase config... */ })),
provideFirestore(() => getFirestore()),
...
// ...
],
...
})
// ...
}
```

```ts
import { AsyncPipe } from '@angular/common';
import { inject } from '@angular/core';
import { Component, inject } from '@angular/core';
import { Firestore, collectionData, collection } from '@angular/fire/firestore';

interface Item {
name: string,
...
name: string;
};

@Component({
Expand All @@ -55,7 +54,7 @@ interface Item {
`,
imports: [AsyncPipe]
})
export class AppComponent {
export class App {
firestore = inject(Firestore);
itemCollection = collection(this.firestore, 'items');
items$ = collectionData<Item>(this.itemCollection);
Expand All @@ -70,7 +69,7 @@ export class AppComponent {

[Contributing](CONTRIBUTING.md)

[Stackblitz Template](https://stackblitz.com/edit/angular-fire-start) - Remember to set your Firebase configuration in `app/app.module.ts`.
[Stackblitz Template](https://stackblitz.com/edit/angular-fire-start) - A runnable AngularFire example. Add your own Firebase configuration to connect it to your project.

[Upgrading from v6.0? Check out our guide.](docs/version-7-upgrade.md)

Expand All @@ -84,7 +83,7 @@ The [`sample`](sample) folder contains a kitchen sink application that demonstra

Get help on our [Q&A board](https://github.com/angular/angularfire/discussions?discussions_q=category%3AQ%26A), the official [Firebase Mailing List](https://groups.google.com/forum/#!forum/firebase-talk), the [Firebase Community Slack](https://firebase.community/) (`#angularfire2`), the [Angular Community Discord](http://discord.gg/angular) (`#firebase`), [Gitter](https://gitter.im/angular/angularfire2), the [Firebase subreddit](https://www.reddit.com/r/firebase), or [Stack Overflow](https://stackoverflow.com/questions/tagged/angularfire2).

> **NOTE:** While relatively stable, AngularFire is a [developer preview](https://angular.io/guide/releases#developer-preview) and is subject to change before general availability. Questions on the mailing list and issues filed here are answered on a <strong>best-effort basis</strong> by maintainers and other community members. If you are able to reproduce a problem with Firebase <em>outside of AngularFire's implementation</em>, please [file an issue on the Firebase JS SDK](https://github.com/firebase/firebase-js-sdk/issues) or reach out to the personalized [Firebase support channel](https://firebase.google.com/support/).
> **NOTE:** Questions on the mailing list and issues filed here are answered on a <strong>best-effort basis</strong> by maintainers and other community members. If you are able to reproduce a problem with Firebase <em>outside of AngularFire's implementation</em>, please [file an issue on the Firebase JS SDK](https://github.com/firebase/firebase-js-sdk/issues) or reach out to the personalized [Firebase support channel](https://firebase.google.com/support/).

## Developer Guide

Expand All @@ -98,10 +97,26 @@ This developer guide assumes you're using the new tree-shakable AngularFire API,
<tr>
<td>

#### [AI Logic](docs/ai.md#ai-logic)
```ts
import { } from '@angular/fire/ai';
```
</td>
<td>

#### [Analytics](docs/analytics.md#analytics)
```ts
import { } from '@angular/fire/analytics';
```
</td>
</tr>
<tr>
<td>

#### [App Check](docs/app-check.md#app-check)
```ts
import { } from '@angular/fire/app-check';
```
</td>
<td>

Expand Down Expand Up @@ -173,22 +188,6 @@ import { } from '@angular/fire/database';
```ts
import { } from '@angular/fire/remote-config';
```
</td>
</tr>
<tr>
<td>

#### [App Check](docs/app-check.md#app-check)
```ts
import { } from '@angular/fire/app-check';
```
</td>
<td>

#### [AI Logic](docs/ai.md#ai-logic)
```ts
import { } from '@angular/fire/ai';
```
</td>
</tr>
</table>
47 changes: 28 additions & 19 deletions docs/install-and-setup.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
# AngularFire Quickstart

## Before you begin

- **Firebase CLI.** Setup uses the Firebase CLI (`firebase-tools`). `ng add` installs it if it is missing and prompts you to sign in, so you do not have to install it yourself first. To handle it ahead of time, run `npm install -g firebase-tools` then `firebase login`.
- **On the newest Angular major, use `@next`.** If `ng add @angular/fire` reports an Angular peer-dependency conflict, your Angular version is newer than AngularFire's default (`latest`) release. Install the version-matched pre-release instead: `ng add @angular/fire@next`.
- **Harmless CLI noise.** The Firebase CLI may print a `punycode` deprecation warning or ask about enabling extra features (for example Gemini) during setup. These come from the CLI, not from AngularFire, and are safe to ignore.

### 1. Create a new project

```bash
Expand Down Expand Up @@ -31,14 +37,14 @@ The Angular CLI's `new` command will set up the latest Angular build in a new pr
ng add @angular/fire
```

Now that you have a new project setup, install AngularFire and Firebase from npm. This will complete the following tasks:
This installs AngularFire and configures your project. `ng add` will:

1. Add Firebase config to environments variables
2. Configure `@NgModule` for the `AngularFireModule`
1. Prompt you to select the features to enable and the Firebase project to use, signing you in to Firebase if needed.
2. Add `provideFirebaseApp(...)`, along with a provider for each feature you select, to your app configuration (for example `app.config.ts`), with your Firebase configuration inlined. No environment files are created.

### 3. Inject `Firestore`

Open `/src/app/app.component.ts`, and make the following changes to :
Open `/src/app/app.ts` and make the following changes:

```ts
import { Component, inject } from '@angular/core';
Expand All @@ -47,11 +53,11 @@ import { Firestore } from '@angular/fire/firestore';

@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
templateUrl: './app.html',
styleUrl: './app.css',
imports: [AsyncPipe],
})
export class AppComponent {
export class App {
firestore: Firestore = inject(Firestore);

constructor() {
Expand All @@ -62,33 +68,36 @@ export class AppComponent {

### 4. Bind a Firestore collection to a list

In `/src/app/app.component.ts`:
In `/src/app/app.ts`:

```ts
import { Component, inject } from '@angular/core';
import { AsyncPipe } from '@angular/common';
import { Observable } from 'rxjs';
import { Firestore, collection, collectionData } from '@angular/fire/firestore';

interface Item {
name: string;
}

@Component({
selector: 'app-root',
standalone: true,
imports: [AsyncPipe],
templateUrl: 'app.component.html',
styleUrls: ['app.component.css']
templateUrl: './app.html',
styleUrl: './app.css'
})
export class AppComponent {
export class App {
firestore: Firestore = inject(Firestore);
items$: Observable<any[]>;
items$: Observable<Item[]>;

constructor() {
const aCollection = collection(this.firestore, 'items')
this.items$ = collectionData(aCollection);
this.items$ = collectionData<Item>(aCollection);
}
}
```

Open `/src/app/app.component.html`:
Open `/src/app/app.html`:

```html
<ul>
Expand All @@ -112,8 +121,8 @@ Once you've created a `items` collection and are inserting documents, you should

### 6. Deploy your app

Finally, we can deploy the application to Firebase hosting:
How you deploy depends on whether your app uses server-side rendering (SSR), which the Angular CLI asks about when you create the project.

```bash
ng deploy
```
**Client-side rendered apps** (the default) build to static files, which you deploy to Firebase Hosting. Follow Firebase's [Hosting quickstart](https://firebase.google.com/docs/hosting/quickstart) to build and deploy your app.

**Server-side rendered apps** run a Node server, so deploy them to [Firebase App Hosting](app-hosting.md), Firebase's recommended path for SSR. That guide also covers a common case where an SSR app silently falls back to client-side rendering after deploying.
Loading