Angular CLI Deploying

Deploying Fast
- Create app command
ng new
- Serve command
ng serve
- Test full build using
ng build --prod
command locally and lite-server and try out on local browser
Create Your App
ng new

Serve Locally
code JAMStackGR-Deploy-v-GIT
src/assets/
so that we can access it within our app.You can do this in your favorite terminal or within VSCode ctrl+~ will open the terminal within VSCode
ng serve

app.component.html
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<!-- * * * * * * * * * * * The content below * * * * * * * * * * * -->
<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->
<!-- * * * * * * * * * * and can be replaced. * * * * * * * * * * * -->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<!-- * * * * * * * * * Delete the template below * * * * * * * * * * -->
<!-- * * * * * * * to get started with your project! * * * * * * * * -->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<!-- * * * * * * * * * * * The content above * * * * * * * * * * * -->
<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->
<!-- * * * * * * * * * * and can be replaced. * * * * * * * * * * * -->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<!-- * * * * * * * * * * End of Placeholder * * * * * * * * * * * -->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
/assets/
. We will wrap our picture in a simple flex layout and add leave the <router-outlet></router-outlet>
in case this app gets modules added later.<div style="display: flex; justify-content: center; width: '100%';">
<img src="assets/JAMStackGR2.png" alt="JAMStackGR 2 Logo" style="width: 100%;" />
</div>
<router-outlet></router-outlet>

Production Build
ng build --prod
dist/
directory. This is the full application and at this point we can serve this locally with a server. A simple one that I like to use is lite-server which is also recommended in the Angular deploy documentation, I like to install this globally.npm i -g lite-server@latest
lite-server --baseDir dist/JAMStackGR-Deploy-v-GIT/

ng serve
, but this is running the production code!Angular Deploy Platforms
The Angular CLI command
ng deploy
(introduced in version 8.3.0) executes thedeploy
CLI builder associated with your project. A number of third-party builders implement deployment capabilities to different platforms. You can add any of them to your project by runningng add [package name]
.
~ Angular Guide
Please also note that I am in now way suggesting you should use the quick deploy methods with public repos (as there are keys all over) or that they are ready for true production use. This method is best used as demos.
If you see any 404 issues you need to update the base html element, similar to
<basehref="/JAMStackGR-Deploy-v-GIT/">
- Firebase Hosting https://www.npmjs.com/package/@angular/fire
- Azure https://www.npmjs.com/package/@azure/ng-deploy
- Now https://www.npmjs.com/package/@zeit/ng-deploy
- Netlify https://www.npmjs.com/package/@netlify-builder/deploy
- GitHub pages https://www.npmjs.com/package/angular-cli-ghpages
- NPM https://www.npmjs.com/package/ngx-deploy-npm
Firebase Hosting
ng add @angular/fire
"@angular/fire": "^5.2.1",




angular.json
you will now see that there is an entry for this deploy option listed"deploy": {
"builder": "@angular/fire:deploy",
"options": {}
}
.firebaserc
and firebase.json
. See below.
ng deploy


Azure Hosting
You will need a free Microsoft or GithHub login and Azure Dev Ops account to use this deploy method.
ng add @azure/ng-deploy
"@azure/ng-deploy": "^0.2.3",




azure.json
file.
{
"hosting": [
{
"app": {
"project": "JAMStackGR-Deploy-v-GIT",
"target": "build",
"configuration": "production",
"path": "dist/JAMStackGR-Deploy-v-GIT"
},
"azureHosting": {
"subscription": "ba9a05ba-1cfb-4049-aba4-441f44572434",
"resourceGroupName": "JAMStackGR-Deploy-v-GIT-static-deploy",
"account": "jamstackgrdeployvgstatic"
}
}
]
}
"deploy": {
"builder": "@azure/ng-deploy:deploy",
"options": {
"host": "Azure",
"type": "static",
"config": "azure.json"
}
},
"azureLogout": {
"builder": "@azure/ng-deploy:logout"
}
ng deploy



Now in order to access that container a static site is also created. This can be though of as the equivalent to running lite-server
locally. It is pointed at index.html.


Zeit Now Hosting
Zeit does not need an account created prior to deploying, you will need access to an email that you will provide to verify login.
ng add @zeit/ng-deploy
"@zeit/ng-deploy": "^0.3.0",


ng deploy

npm i now-client@5.2.1 && ng deploy
I have raised an issue about this and it might be resolved later
https://github.com/zeit/ng-deploy-now/issues/7


Netlify
For Netlify you will need to setup an account ahead of running this command. They accept GitHub, GitLab, Bitbucket or Email. You will also need to create a site so that you can get an API key.
ng add @netlify-builder/deploy

ng build --prod
.

7b9f51c1-2296-408c-a208-939892c80dde

You will then need the Personal Access Tokens of Netlify Account, which can be found in User Settings, which is in the dopdown by your initial. Then select the tab for Applications.
https://app.netlify.com/user/applications





"@netlify-builder/deploy": "^2.0.3",
"deploy": {
"builder": "@netlify-builder/deploy:deploy",
"options": {
"outputPath": "dist/JAMStackGR-Deploy-v-GIT",
"netlifyToken": "037ba2af8a480f0d73faec8c1db1761ccee24a4619f3776488a4e08053d99946",
"siteId": "vigorous-nobel-7a77c4"
}
},
ng deploy


GitHub Pages Hosting
In order to use GitHub pages you must have a GitHub account and setup the project with an origin.
ng add angular-cli-ghpages
"angular-cli-ghpages": "^0.6.0"
"deploy": {
"builder": "angular-cli-ghpages:deploy",
"options": {}
},


git remote add origin https://github.com/ajonp/JAMStackGR-Deploy-v-GIT-test.git
git push -u origin master


Please make sure to read https://www.npmjs.com/package/angular-cli-ghpages#–base-href without this loaded files will not be found and show a 404.
ng deploy --base-href=/JAMStackGR-Deploy-v-GIT-test/
gh-pages
.



NPM Package Publish
This is not really deploying a web app, but I wanted to cover all the current ng deploys for an example
This example is on a seperate branch in the repo
https://github.com/ajonp/JAMStackGR-Deploy-v-GIT-test/tree/npm-deploy
ng generate library

ng build jamstackgr2-library


ng add ngx-deploy-npm
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"JAMStackGR-Deploy-v-GIT": {
"projectType": "application",
"schematics": {},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/JAMStackGR-Deploy-v-GIT",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": true,
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css"
],
"scripts": []
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
}
]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "JAMStackGR-Deploy-v-GIT:build"
},
"configurations": {
"production": {
"browserTarget": "JAMStackGR-Deploy-v-GIT:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "JAMStackGR-Deploy-v-GIT:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css"
],
"scripts": []
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"tsconfig.app.json",
"tsconfig.spec.json",
"e2e/tsconfig.json"
],
"exclude": [
"**/node_modules/**"
]
}
},
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "JAMStackGR-Deploy-v-GIT:serve"
},
"configurations": {
"production": {
"devServerTarget": "JAMStackGR-Deploy-v-GIT:serve:production"
}
}
},
"deploy": {
"builder": "angular-cli-ghpages:deploy",
"options": {}
},
"azureLogout": {
"builder": "@azure/ng-deploy:logout"
}
}
},
"jamstackgr2-library": {
"projectType": "library",
"root": "projects/jamstackgr2-library",
"sourceRoot": "projects/jamstackgr2-library/src",
"prefix": "lib",
"architect": {
"build": {
"builder": "@angular-devkit/build-ng-packagr:build",
"options": {
"tsConfig": "projects/jamstackgr2-library/tsconfig.lib.json",
"project": "projects/jamstackgr2-library/ng-package.json"
},
"configurations": {
"production": {
"tsConfig": "projects/jamstackgr2-library/tsconfig.lib.prod.json"
}
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "projects/jamstackgr2-library/src/test.ts",
"tsConfig": "projects/jamstackgr2-library/tsconfig.spec.json",
"karmaConfig": "projects/jamstackgr2-library/karma.conf.js"
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"projects/jamstackgr2-library/tsconfig.lib.json",
"projects/jamstackgr2-library/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
},
"deploy": {
"builder": "ngx-deploy-npm:deploy",
"options": {
"access": "public"
}
}
}
}
},
"defaultProject": "JAMStackGR-Deploy-v-GIT",
"cli": {
"analytics": "f6a38b3e-94be-42aa-8d50-a76c8ea31bc5"
}
}
"deploy": {
"builder": "ngx-deploy-npm:deploy",
"options": {
"access": "public"
}
}

ng deploy jamstackgr2-library

Issue with leaving keys
