Skip to content

Commit 5c962cc

Browse files
mgechevjamesdaniels
authored andcommitted
docs: add docs for the deployment capabilities (#2056)
1 parent fc6f869 commit 5c962cc

File tree

1 file changed

+66
-0
lines changed

1 file changed

+66
-0
lines changed

docs/deploy/getting-started.md

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
# Deployment with the Angular CLI
2+
3+
In this guide, we'll look at how to use `@angular/fire` to automatically deploy an Angular application to Firebase hosting by using the Angular CLI.
4+
5+
## Step 1: add `@angular/fire` to your project
6+
7+
First, you need to add the `@angular/fire` package to your project. In your Angular CLI project run:
8+
9+
```shell
10+
ng add @angular/fire
11+
```
12+
13+
*Note that the command above assumes you have global Angular CLI installed. To install Angular CLI globally run `npm i -g @angular/cli`.*
14+
15+
The command above will trigger the `@angular/fire` `ng-add` schematics. Once they install `@angular/fire`. If you are not authenticated, the schematics will open a browser which will guide you through the authentication flow. Once you authenticate, you'll see a prompt to select a Firebase hosting project.
16+
17+
The schematics will do the following:
18+
19+
- Add `@angular/fire` to your list of dependencies
20+
- Create `firebase.json`, `.firebaserc` files in the root of your workspace. You can use them to configure your firebase hosting deployment. Find more about them [here](https://firebase.google.com/docs/hosting/full-config)
21+
- Update your workspace file (`angular.json`) by inserting the `deploy` builder
22+
23+
In the end, your `angular.json` project will look like below:
24+
25+
```json
26+
{
27+
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
28+
"version": 1,
29+
"newProjectRoot": "projects",
30+
"projects": {
31+
"sample-app": {
32+
// ...
33+
"deploy": {
34+
"builder": "@angular/fire:deploy",
35+
"options": {}
36+
}
37+
}
38+
}
39+
// ...
40+
},
41+
"defaultProject": "sample-app"
42+
}
43+
```
44+
45+
If you want to add deployment capabilities to a different project in your workspace, you can run:
46+
47+
```
48+
ng add @angular/fire --project=[PROJECT_NAME]
49+
```
50+
51+
## Step 2: deploying the project
52+
53+
As the second step, to deploy your project run:
54+
55+
```
56+
ng run [PROJECT_NAME]:deploy
57+
```
58+
59+
The command above will trigger:
60+
61+
1. Production build of your application
62+
2. Deployment of the produced assets to the firebase hosting project you selected during `ng add`
63+
64+
## Step 3: customization
65+
66+
To customize the deployment flow, you can use the configuration files you're already familiar with from `firebase-tools`. You can find more in the [firebase documentation](https://firebase.google.com/docs/hosting/full-config).

0 commit comments

Comments
 (0)