batuhan-basoglu/Kargi-Sitesi
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Deployed the page to Github Pages.

Browse source
This commit is contained in:
Batuhan Berk Başoğlu 2024-11-03 21:30:09 -05:00
parent 1d79754e93
commit 2c89899458
Signed by: batuhan-basoglu
SSH key fingerprint: SHA256:kEsnuHX+qbwhxSAXPUQ4ox535wFHu/hIRaa53FzxRpo
62797 changed files with 6551425 additions and 15279 deletions
Download patch file Download diff file Expand all files Collapse all files

204
node_modules/@angular/fire/docs/deploy/getting-started.md generated vendored Normal file
View file

@ -0,0 +1,204 @@
# Deploy your application on Firebase Hosting & Functions
In this guide, we'll look at how to use `@angular/fire` to automatically deploy an Angular application to Firebase hosting or functions by using the Angular CLI.
`@angular/fire` uses Firebase functions to deploy your Angular universal projects, with server-side rendering enabled.
**Angular Universal deployments work with `@nguniversal/*` version 9.0.0 and above**.
## Step 1: add `@angular/fire` to your project
First, you need to add the `@angular/fire` package to your project. In your Angular CLI project run:
```shell
ng add @angular/fire
```
*Note that the command above assumes you have global Angular CLI installed. To install Angular CLI globally run `npm i -g @angular/cli`.*
First, the command above will check if you have an Angular universal project. It'll do so by looking at your `angular.json` project, looking for a `server` target for the specified project. If it finds one, it'll ask you if you want to deploy the project in a firebase function.
After that it will trigger the `@angular/fire` `ng-add` schematics. The schematics will open a web browser and guide you through the Firebase authentication flow (if you're not signed in already). After you authenticate, you'll see a prompt to select a Firebase hosting project.
The schematics will do the following:
- Add `@angular/fire` to your list of dependencies
- 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)
- Update your workspace file (`angular.json`) by inserting the `deploy` builder
In the end, your `angular.json` project will look like below:
```json5
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"sample-app": {
// ...
"deploy": {
"builder": "@angular/fire:deploy",
"options": {} // Here you may find an "ssr": true option if you've
// selected that you want to deploy your Angular universal project
// as a firebase function.
}
}
},
// ...
"defaultProject": "sample-app"
}
```
If you want to add deployment capabilities to a different project in your workspace, you can run:
```
ng add @angular/fire --project=[PROJECT_NAME]
```
## Step 2: deploying the project
As the second step, to deploy your project run:
```
ng deploy --project=[PROJECT_NAME]
```
*The `--project` option is optional. Learn more [here](https://angular.io/cli/deploy).*
The command above will trigger:
1. Production build of your application
2. Deployment of the produced assets to the firebase hosting project you selected during `ng add`
If you've specified that you want a server-side rendering enabled deployment in a firebase function, the command will also:
1. Create a firebase function in `dist`, which directly consumes `main.js` from your server output directory.
2. Create `package.json` for the firebase function with the required dependencies.
3. Deploy the static assets to firebase hosting and your universal server as a Firebase function.
If you want to preview your Angular Universal project before we deploy it as a Firebase Function you can run:
```
ng deploy --preview
```
We'll create the function and a `package.json` in your project output directory. This way, you can later run `firebase serve` in your project root so you can test everything before deploying.
## Step 3: customization
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).
### Configuring Cloud Functions
Setting `functionsNodeVersion` and `functionsRuntimeOptions` in your `angular.json` allow you to custimze the version of Node.js Cloud Functions is running and run-time settings like timeout, VPC connectors, and memory.
```json
"deploy": {
"builder": "@angular/fire:deploy",
"options": {
"functionsNodeVersion": 12,
"functionsRuntimeOptions": {
"memory": "2GB",
"timeoutSeconds": 10,
"vpcConnector": "my-vpc-connector",
"vpcConnectorEgressSettings": "PRIVATE_RANGES_ONLY"
}
}
}
```
### Working with multiple Firebase Projects
If you have multiple build targets and deploy targets, it is possible to specify them in your `angular.json` or `workspace.json`.
It is possible to use either your project name or project alias in `firebaseProject`. The setting provided here is equivalent to passing a project name or alias to `firebase deploy --project projectNameOrAlias`.
The `buildTarget` simply points to an existing build configuration for your project. Most projects have a default configuration and a production configuration (commonly activated by using the `--prod` flag) but it is possible to specify as many build configurations as needed.
You may specify a `buildTarget` and `firebaseProject` in your `options` as follows:
```json
"deploy": {
"builder": "@angular/fire:deploy",
"options": {
"buildTarget": "projectName:build",
"firebaseProject": "developmentProject"
},
"configurations": {
"production": {
"buildTarget": "projectName:build:production",
"firebaseProject": "productionProject"
}
}
}
```
The above configuration specifies the following:
1. `ng deploy` will deploy the default project with default configuration.
2. `ng deploy projectName` will deploy the specified project with default configuration.
3. `ng deploy projectName --prod` or `ng deploy projectName --configuration='production'` will deploy `projectName` with production build settings to your production environment.
All of the options are optional. If you do not specify a `buildTarget`, it defaults to a production build (`projectName:build:production`). If you do not specify a `firebaseProject`, it defaults to the first matching deploy target found in your `.firebaserc` (where your projectName is the same as your Firebase deploy target name). The `configurations` section is also optional.
### Working with multiple project sites
For example, if you have muti sites config in firebase.json like this:
```
{
"hosting": [
{
"target": "custom-site",
"public": "public/my-custom-site",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
],
```
If you have multiple build targets and deploy targets, it is possible to specify them in your `angular.json` or `workspace.json`.
It is possible to use either your project name or project alias in `siteTarget`.
You may specify a `siteTarget` in your `options` as follows:
```json
"deploy": {
"builder": "@angular/fire:deploy",
"options": {
"buildTarget": "projectName:build",
"firebaseProject": "developmentProject",
"siteTarget": "yourDefaultSiteTarget"
},
"configurations": {
"production": {
"buildTarget": "projectName:build:production",
"firebaseProject": "productionProject",
"siteTarget": "yourProdSiteTarget"
},
"storybook": {
"buildTarget": "projectName:build-storybook",
"firebaseProject": "developmentProject",
"siteTarget": "yourStorybookSiteTarget"
}
}
}
```
The above configuration specifies the following:
1. `ng deploy` will deploy the default project with default configuration.
2. `ng deploy projectName` will deploy the specified project with default configuration.
3. `ng deploy projectName --configuration=storybook --siteTarget=mySiteTarget` will deploy `projectName` to `mySiteTarget` with configuration`storybook`.
All of the options are optional