├── functions ├── host.json ├── .funcignore ├── tsconfig.json ├── example.local.settings.json ├── products │ ├── function.json │ └── index.ts ├── proxies.json ├── shared │ └── index.ts ├── package.json ├── .gitignore └── package-lock.json ├── app-diagram.png ├── src ├── favicon.ico ├── app │ ├── products │ │ ├── product-list.component.css │ │ ├── product.ts │ │ ├── product.service.ts │ │ ├── product-list.component.ts │ │ └── product-list.component.html │ ├── shared │ │ ├── star.component.css │ │ ├── convert-to-spaces.pipe.ts │ │ ├── star.component.html │ │ └── star.component.ts │ ├── app.component.html │ ├── app.component.css │ ├── app.component.ts │ └── app.module.ts ├── assets │ └── images │ │ └── logo.jpg ├── proxy.conf.json ├── environments │ ├── environment.prod.ts │ └── environment.ts ├── tsconfig.app.json ├── styles.css ├── index.html ├── tsconfig.spec.json ├── tslint.json ├── main.ts ├── browserslist ├── test.ts ├── karma.conf.js ├── api │ └── products │ │ └── products.json └── polyfills.ts ├── .vscode ├── extensions.json ├── settings.json ├── launch.json └── tasks.json ├── e2e ├── src │ ├── app.po.ts │ └── app.e2e-spec.ts ├── tsconfig.e2e.json └── protractor.conf.js ├── .editorconfig ├── tsconfig.json ├── .gitignore ├── package.json ├── tslint.json ├── angular.json └── README.md /functions/host.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "2.0" 3 | } 4 | -------------------------------------------------------------------------------- /app-diagram.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fiveisprime/apm/HEAD/app-diagram.png -------------------------------------------------------------------------------- /src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fiveisprime/apm/HEAD/src/favicon.ico -------------------------------------------------------------------------------- /src/app/products/product-list.component.css: -------------------------------------------------------------------------------- 1 | thead { 2 | color: #337AB7; 3 | } 4 | -------------------------------------------------------------------------------- /src/assets/images/logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fiveisprime/apm/HEAD/src/assets/images/logo.jpg -------------------------------------------------------------------------------- /src/app/shared/star.component.css: -------------------------------------------------------------------------------- 1 | .crop { 2 | overflow: hidden; 3 | } 4 | div { 5 | cursor: pointer; 6 | } -------------------------------------------------------------------------------- /functions/.funcignore: -------------------------------------------------------------------------------- 1 | *.js.map 2 | *.ts 3 | .git* 4 | .vscode 5 | local.settings.json 6 | test 7 | tsconfig.json -------------------------------------------------------------------------------- /src/app/app.component.html: -------------------------------------------------------------------------------- 1 |

2 |

3 | 4 |

5 | -------------------------------------------------------------------------------- /src/app/app.component.css: -------------------------------------------------------------------------------- 1 | .nav-link { 2 | font-size: large; 3 | } 4 | 5 | [role=main]{ 6 | margin: 40px 20px 0; 7 | } 8 | -------------------------------------------------------------------------------- /src/proxy.conf.json: -------------------------------------------------------------------------------- 1 | { 2 | "/api": { 3 | "target": "http://localhost:7071", 4 | "secure": false 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true, 3 | productUrl: 'https://maherna-apm-api.azurewebsites.net/api/products/' 4 | }; 5 | -------------------------------------------------------------------------------- /src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: false, 3 | productUrl: 'http://localhost:7071/api/products' 4 | }; 5 | 6 | // import 'zone.js/dist/zone-error'; // Included with Angular CLI. 7 | -------------------------------------------------------------------------------- /functions/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "commonjs", 4 | "target": "es6", 5 | "outDir": "dist", 6 | "rootDir": ".", 7 | "sourceMap": true, 8 | "strict": false 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /src/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "types": [] 6 | }, 7 | "exclude": [ 8 | "test.ts", 9 | "**/*.spec.ts" 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": [ 3 | "ms-azuretools.vscode-azurefunctions", 4 | "ms-azuretools.vscode-azurestorage", 5 | "ms-azuretools.vscode-cosmosdb", 6 | "msjsdiag.debugger-for-edge", 7 | "johnpapa.angular2" 8 | ] 9 | } 10 | -------------------------------------------------------------------------------- /e2e/src/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class AppPage { 4 | navigateTo() { 5 | return browser.get('/'); 6 | } 7 | 8 | getParagraphText() { 9 | return element(by.css('pm-root h1')).getText(); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/styles.css: -------------------------------------------------------------------------------- 1 | @import "~bootstrap/dist/css/bootstrap.min.css"; 2 | @import "~font-awesome/css/font-awesome.min.css"; 3 | 4 | div.card-header { 5 | font-size: large; 6 | } 7 | 8 | div.card { 9 | margin-top: 10px 10 | } 11 | 12 | .table { 13 | margin-top: 10px 14 | } 15 | -------------------------------------------------------------------------------- /src/app/products/product.ts: -------------------------------------------------------------------------------- 1 | export interface IProduct { 2 | productId: number; 3 | productName: string; 4 | productCode: string; 5 | releaseDate: string; 6 | description: string; 7 | price: number; 8 | starRating: number; 9 | imageUrl: string; 10 | } 11 | -------------------------------------------------------------------------------- /e2e/tsconfig.e2e.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "module": "commonjs", 6 | "target": "es5", 7 | "types": [ 8 | "jasmine", 9 | "jasminewd2", 10 | "node" 11 | ] 12 | } 13 | } -------------------------------------------------------------------------------- /src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'pm-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.css'] 7 | }) 8 | export class AppComponent { 9 | pageTitle = 'Angular Product Management'; 10 | } 11 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | max_line_length = off 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /src/app/shared/convert-to-spaces.pipe.ts: -------------------------------------------------------------------------------- 1 | import { Pipe, PipeTransform } from '@angular/core'; 2 | 3 | @Pipe({ name: 'convertToSpaces' }) 4 | export class ConvertToSpacesPipe implements PipeTransform { 5 | transform(value: string, character: string): string { 6 | return value.replace(character, ' '); 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | APM 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/spec", 5 | "types": [ 6 | "jasmine", 7 | "node" 8 | ] 9 | }, 10 | "files": [ 11 | "test.ts", 12 | "polyfills.ts" 13 | ], 14 | "include": [ 15 | "**/*.spec.ts", 16 | "**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /e2e/src/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | 3 | describe('workspace-project App', () => { 4 | let page: AppPage; 5 | 6 | beforeEach(() => { 7 | page = new AppPage(); 8 | }); 9 | 10 | it('should display welcome message', () => { 11 | page.navigateTo(); 12 | expect(page.getParagraphText()).toEqual('Welcome to APM!'); 13 | }); 14 | }); 15 | -------------------------------------------------------------------------------- /functions/example.local.settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "IsEncrypted": false, 3 | "Values": { 4 | "FUNCTIONS_WORKER_RUNTIME": "node", 5 | "AZURE_COSMOS_ENDPOINT": "https://.documents.azure.com:443/", 6 | "AZURE_COSMOS_MASTER_KEY": "", 7 | "AZURE_COSMOS_DATABASE_ID": "Product" 8 | }, 9 | "Host": { 10 | "CORS": "*" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /src/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tslint.json", 3 | "rules": { 4 | "directive-selector": [ 5 | true, 6 | "attribute", 7 | "pm", 8 | "camelCase" 9 | ], 10 | "component-selector": [ 11 | true, 12 | "element", 13 | "pm", 14 | "kebab-case" 15 | ] 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/app/shared/star.component.html: -------------------------------------------------------------------------------- 1 |

5 |

6 | 7 | 8 | 9 | 10 | 11 |

12 |

13 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.error(err)); 13 | -------------------------------------------------------------------------------- /src/browserslist: -------------------------------------------------------------------------------- 1 | # This file is currently used by autoprefixer to adjust CSS to support the below specified browsers 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | # 5 | # For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed 6 | 7 | > 0.5% 8 | last 2 versions 9 | Firefox ESR 10 | not dead 11 | not IE 9-11 -------------------------------------------------------------------------------- /functions/products/function.json: -------------------------------------------------------------------------------- 1 | { 2 | "bindings": [ 3 | { 4 | "authLevel": "anonymous", 5 | "type": "httpTrigger", 6 | "direction": "in", 7 | "name": "req", 8 | "methods": [ 9 | "get", 10 | "post" 11 | ] 12 | }, 13 | { 14 | "type": "http", 15 | "direction": "out", 16 | "name": "res" 17 | } 18 | ], 19 | "scriptFile": "../dist/products/index.js" 20 | } 21 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "azureFunctions.projectRuntime": "~2", 3 | "azureFunctions.projectLanguage": "TypeScript", 4 | "azureFunctions.deploySubpath": "functions", 5 | "azureFunctions.preDeployTask": "npm prune", 6 | "files.exclude": { 7 | "obj": true, 8 | "bin": true 9 | }, 10 | "debug.internalConsoleOptions": "neverOpen", 11 | "azureStorage.preDeployTask": "npm build:production", 12 | "azureFunctions.templateFilter": "Verified" 13 | } 14 | -------------------------------------------------------------------------------- /functions/proxies.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "http://json.schemastore.org/proxies", 3 | "proxies": { 4 | "frontend": { 5 | "matchCondition": { 6 | "route": "/{*restOfPath}" 7 | }, 8 | "backendUri": "https://mahernaapm.z22.web.core.windows.net/{restOfPath}" 9 | }, 10 | "functions": { 11 | "matchCondition": { 12 | "route": "/api/{*restOfPath}" 13 | }, 14 | "backendUri": "http://localhost:7071/api/{restOfPath}" 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "module": "es2015", 9 | "moduleResolution": "node", 10 | "emitDecoratorMetadata": true, 11 | "experimentalDecorators": true, 12 | "target": "es5", 13 | "typeRoots": [ 14 | "node_modules/@types" 15 | ], 16 | "lib": [ 17 | "es2018", 18 | "dom" 19 | ] 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /functions/shared/index.ts: -------------------------------------------------------------------------------- 1 | import { CosmosClient } from '@azure/cosmos'; 2 | 3 | const endpoint = process.env.AZURE_COSMOS_ENDPOINT; 4 | const masterKey = process.env.AZURE_COSMOS_MASTER_KEY; 5 | const databaseId = process.env.AZURE_COSMOS_DATABASE_ID; 6 | const productContainerName = 'products'; 7 | 8 | const client = new CosmosClient({ endpoint, auth: { masterKey } }); 9 | 10 | const containers = { 11 | products: client.database(databaseId).container(productContainerName) 12 | }; 13 | 14 | export { containers }; 15 | -------------------------------------------------------------------------------- /functions/products/index.ts: -------------------------------------------------------------------------------- 1 | import { AzureFunction, Context, HttpRequest } from '@azure/functions'; 2 | import { containers } from '../shared'; 3 | 4 | const httpTrigger: AzureFunction = async function( 5 | context: Context, 6 | req: HttpRequest 7 | ): Promise { 8 | if (req.method === 'GET') { 9 | const { result } = await containers.products.items.readAll().toArray(); 10 | 11 | context.res = { status: 200, body: result }; 12 | return; 13 | } 14 | 15 | context.res = { status: 400, body: 'Bad Request' }; 16 | }; 17 | 18 | export default httpTrigger; 19 | -------------------------------------------------------------------------------- /functions/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "functions", 3 | "description": "", 4 | "version": "0.1.0", 5 | "scripts": { 6 | "build": "tsc", 7 | "watch": "tsc -w", 8 | "prestart": "npm run build && func extensions install", 9 | "start:host": "func start", 10 | "start": "npm run start:host & npm run watch", 11 | "build:production": "npm run prestart && npm prune --production" 12 | }, 13 | "dependencies": { 14 | "@azure/cosmos": "^2.1.5" 15 | }, 16 | "devDependencies": { 17 | "@azure/functions": "^1.0.1-beta2", 18 | "@types/node": "^11.13.4", 19 | "typescript": "^3.3.3" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | 8 | # dependencies 9 | /node_modules 10 | 11 | # IDEs and editors 12 | /.idea 13 | .project 14 | .classpath 15 | .c9/ 16 | *.launch 17 | .settings/ 18 | *.sublime-workspace 19 | 20 | # IDE - VSCode 21 | .vscode/* 22 | !.vscode/settings.json 23 | !.vscode/tasks.json 24 | !.vscode/launch.json 25 | !.vscode/extensions.json 26 | 27 | # misc 28 | /.sass-cache 29 | /connect.lock 30 | /coverage 31 | /libpeerconnection.log 32 | npm-debug.log 33 | yarn-error.log 34 | testem.log 35 | /typings 36 | 37 | # System Files 38 | .DS_Store 39 | Thumbs.db 40 | -------------------------------------------------------------------------------- /src/app/shared/star.component.ts: -------------------------------------------------------------------------------- 1 | import { 2 | Component, 3 | OnChanges, 4 | EventEmitter, 5 | Input, 6 | Output 7 | } from '@angular/core'; 8 | 9 | @Component({ 10 | selector: 'pm-star', 11 | templateUrl: './star.component.html', 12 | styleUrls: ['./star.component.css'] 13 | }) 14 | export class StarComponent implements OnChanges { 15 | @Input() rating: number; 16 | @Output() ratingClicked = new EventEmitter(); 17 | starWidth: number; 18 | 19 | OnClick(): void { 20 | this.ratingClicked.emit(`The rating ${this.rating} was clicked`); 21 | } 22 | 23 | ngOnChanges(): void { 24 | this.starWidth = (this.rating * 75) / 5; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/dist/zone-testing'; 4 | import { getTestBed } from '@angular/core/testing'; 5 | import { 6 | BrowserDynamicTestingModule, 7 | platformBrowserDynamicTesting 8 | } from '@angular/platform-browser-dynamic/testing'; 9 | 10 | declare const require: any; 11 | 12 | // First, initialize the Angular testing environment. 13 | getTestBed().initTestEnvironment( 14 | BrowserDynamicTestingModule, 15 | platformBrowserDynamicTesting() 16 | ); 17 | // Then we find all the tests. 18 | const context = require.context('./', true, /\.spec\.ts$/); 19 | // And load the modules. 20 | context.keys().map(context); 21 | -------------------------------------------------------------------------------- /src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserModule } from '@angular/platform-browser'; 2 | import { NgModule } from '@angular/core'; 3 | import { FormsModule } from '@angular/forms'; 4 | import { HttpClientModule } from '@angular/common/http'; 5 | 6 | import { AppComponent } from './app.component'; 7 | import { ProductListComponent } from './products/product-list.component'; 8 | import { ConvertToSpacesPipe } from './shared/convert-to-spaces.pipe'; 9 | import { StarComponent } from './shared/star.component'; 10 | 11 | @NgModule({ 12 | declarations: [ 13 | AppComponent, 14 | ProductListComponent, 15 | StarComponent, 16 | ConvertToSpacesPipe 17 | ], 18 | imports: [BrowserModule, FormsModule, HttpClientModule], 19 | bootstrap: [AppComponent] 20 | }) 21 | export class AppModule {} 22 | -------------------------------------------------------------------------------- /src/app/products/product.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { HttpClient, HttpErrorResponse } from '@angular/common/http'; 3 | import { throwError } from 'rxjs'; 4 | import { catchError } from 'rxjs/operators'; 5 | 6 | import { IProduct } from './product'; 7 | import { environment } from '../../environments/environment'; 8 | 9 | @Injectable({ providedIn: 'root' }) 10 | export class ProductService { 11 | private productUrl = environment.productUrl; 12 | 13 | constructor(private http: HttpClient) {} 14 | 15 | getProducts() { 16 | return this.http 17 | .get(this.productUrl) 18 | .pipe(catchError(this.handleError)); 19 | } 20 | 21 | handleError(err: HttpErrorResponse) { 22 | return throwError(err.statusText); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /e2e/protractor.conf.js: -------------------------------------------------------------------------------- 1 | // Protractor configuration file, see link for more information 2 | // https://github.com/angular/protractor/blob/master/lib/config.ts 3 | 4 | const { SpecReporter } = require('jasmine-spec-reporter'); 5 | 6 | exports.config = { 7 | allScriptsTimeout: 11000, 8 | specs: [ 9 | './src/**/*.e2e-spec.ts' 10 | ], 11 | capabilities: { 12 | 'browserName': 'chrome' 13 | }, 14 | directConnect: true, 15 | baseUrl: 'http://localhost:4200/', 16 | framework: 'jasmine', 17 | jasmineNodeOpts: { 18 | showColors: true, 19 | defaultTimeoutInterval: 30000, 20 | print: function() {} 21 | }, 22 | onPrepare() { 23 | require('ts-node').register({ 24 | project: require('path').join(__dirname, './tsconfig.e2e.json') 25 | }); 26 | jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); 27 | } 28 | }; -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.2.0", 3 | "configurations": [ 4 | { 5 | "name": "Launch Angular in Edge", 6 | "type": "edge", 7 | "version": "dev", 8 | "request": "launch", 9 | "preLaunchTask": "npm: start", 10 | "url": "http://localhost:4200/", 11 | "webRoot": "${workspaceFolder}" 12 | }, 13 | { 14 | "name": "Launch Angular in Chrome", 15 | "type": "chrome", 16 | "request": "launch", 17 | "preLaunchTask": "npm: start", 18 | "url": "http://localhost:4200/", 19 | "webRoot": "${workspaceFolder}" 20 | }, 21 | { 22 | "name": "Attach to Node Functions", 23 | "type": "node", 24 | "request": "attach", 25 | "port": 9229, 26 | "preLaunchTask": "func: host start" 27 | } 28 | ], 29 | "compounds": [ 30 | { 31 | "name": "Serverless Web App", 32 | "configurations": ["Attach to Node Functions", "Launch Angular in Edge"] 33 | } 34 | ] 35 | } 36 | -------------------------------------------------------------------------------- /src/karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', '@angular-devkit/build-angular'], 8 | plugins: [ 9 | require('karma-jasmine'), 10 | require('karma-chrome-launcher'), 11 | require('karma-jasmine-html-reporter'), 12 | require('karma-coverage-istanbul-reporter'), 13 | require('@angular-devkit/build-angular/plugins/karma') 14 | ], 15 | client: { 16 | clearContext: false // leave Jasmine Spec Runner output visible in browser 17 | }, 18 | coverageIstanbulReporter: { 19 | dir: require('path').join(__dirname, '../coverage'), 20 | reports: ['html', 'lcovonly'], 21 | fixWebpackSourcePaths: true 22 | }, 23 | reporters: ['progress', 'kjhtml'], 24 | port: 9876, 25 | colors: true, 26 | logLevel: config.LOG_INFO, 27 | autoWatch: true, 28 | browsers: ['Chrome'], 29 | singleRun: false 30 | }); 31 | }; -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "apm", 3 | "version": "0.0.0", 4 | "scripts": { 5 | "ng": "ng", 6 | "start": "ng serve", 7 | "build": "ng build", 8 | "build:production": "ng build --prod", 9 | "test": "ng test", 10 | "lint": "ng lint", 11 | "e2e": "ng e2e" 12 | }, 13 | "private": true, 14 | "dependencies": { 15 | "@angular/animations": "^7.0.4", 16 | "@angular/common": "^7.0.4", 17 | "@angular/compiler": "^7.0.4", 18 | "@angular/core": "^7.0.4", 19 | "@angular/forms": "^7.0.4", 20 | "@angular/http": "^7.0.4", 21 | "@angular/platform-browser": "^7.0.4", 22 | "@angular/platform-browser-dynamic": "^7.0.4", 23 | "@angular/router": "^7.0.4", 24 | "bootstrap": "^4.3.1", 25 | "core-js": "^2.6.5", 26 | "font-awesome": "^4.7.0", 27 | "rxjs": "~6.3.3", 28 | "zone.js": "^0.8.29" 29 | }, 30 | "devDependencies": { 31 | "@angular-devkit/build-angular": "^0.13.8", 32 | "@angular/cli": "^7.3.8", 33 | "@angular/compiler-cli": "^7.2.14", 34 | "@angular/language-service": "^7.0.4", 35 | "@types/jasmine": "^2.8.16", 36 | "@types/jasminewd2": "^2.0.6", 37 | "@types/node": "~8.9.4", 38 | "codelyzer": "~4.5.0", 39 | "jasmine-core": "~2.99.1", 40 | "jasmine-spec-reporter": "~4.2.1", 41 | "karma": "~3.0.0", 42 | "karma-chrome-launcher": "~2.2.0", 43 | "karma-coverage-istanbul-reporter": "^2.0.5", 44 | "karma-jasmine": "~1.1.2", 45 | "karma-jasmine-html-reporter": "^0.2.2", 46 | "protractor": "^5.4.2", 47 | "ts-node": "~7.0.0", 48 | "tslint": "~5.11.0", 49 | "typescript": "~3.1.1" 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /functions/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (https://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # TypeScript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # Yarn Integrity file 55 | .yarn-integrity 56 | 57 | # dotenv environment variables file 58 | .env 59 | .env.test 60 | 61 | # parcel-bundler cache (https://parceljs.org/) 62 | .cache 63 | 64 | # next.js build output 65 | .next 66 | 67 | # nuxt.js build output 68 | .nuxt 69 | 70 | # vuepress build output 71 | .vuepress/dist 72 | 73 | # Serverless directories 74 | .serverless/ 75 | 76 | # FuseBox cache 77 | .fusebox/ 78 | 79 | # DynamoDB Local files 80 | .dynamodb/ 81 | 82 | # Azure Functions artifacts 83 | bin 84 | obj 85 | appsettings.json 86 | local.settings.json 87 | 88 | # TypeScript output 89 | dist 90 | out 91 | -------------------------------------------------------------------------------- /src/app/products/product-list.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { IProduct } from './product'; 3 | import { ProductService } from './product.service'; 4 | 5 | @Component({ 6 | selector: 'pm-products', 7 | templateUrl: './product-list.component.html', 8 | styleUrls: ['./product-list.component.css'] 9 | }) 10 | export class ProductListComponent implements OnInit { 11 | private _listFilter: string; 12 | 13 | pageTitle = 'Product List'; 14 | imageWidth = 50; 15 | imageMargin = 2; 16 | filteredProducts: IProduct[]; 17 | errorMessage = ''; 18 | 19 | public get listFilter(): string { 20 | return this._listFilter; 21 | } 22 | public set listFilter(v: string) { 23 | this._listFilter = v; 24 | this.filteredProducts = this.listFilter 25 | ? this.performFilter(this.listFilter) 26 | : this.products; 27 | } 28 | 29 | products: IProduct[]; 30 | 31 | constructor(private productService: ProductService) {} 32 | 33 | performFilter(filterBy: string) { 34 | filterBy = filterBy.toLocaleLowerCase(); 35 | 36 | return this.products.filter((product: IProduct) => { 37 | return product.productName.toLocaleLowerCase().indexOf(filterBy) !== -1; 38 | }); 39 | } 40 | 41 | ngOnInit(): void { 42 | this.productService.getProducts().subscribe( 43 | products => { 44 | this.products = products; 45 | this.filteredProducts = this.products; 46 | }, 47 | error => { 48 | this.errorMessage = error; 49 | } 50 | ); 51 | } 52 | 53 | onRatingClicked(message: string): void { 54 | this.pageTitle = 'Product List: ' + message; 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /src/api/products/products.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "productId": 1, 4 | "productName": "Leaf Rake", 5 | "productCode": "GDN-0011", 6 | "releaseDate": "March 19, 2016", 7 | "description": "Leaf rake with 48-inch wooden handle.", 8 | "price": 19.95, 9 | "starRating": 3.2, 10 | "imageUrl": "https://openclipart.org/image/300px/svg_to_png/26215/Anonymous_Leaf_Rake.png" 11 | }, 12 | { 13 | "productId": 2, 14 | "productName": "Garden Cart", 15 | "productCode": "GDN-0023", 16 | "releaseDate": "March 18, 2016", 17 | "description": "15 gallon capacity rolling garden cart", 18 | "price": 32.99, 19 | "starRating": 4.2, 20 | "imageUrl": "https://openclipart.org/image/300px/svg_to_png/58471/garden_cart.png" 21 | }, 22 | { 23 | "productId": 5, 24 | "productName": "Hammer", 25 | "productCode": "TBX-0048", 26 | "releaseDate": "May 21, 2016", 27 | "description": "Curved claw steel hammer", 28 | "price": 8.9, 29 | "starRating": 4.8, 30 | "imageUrl": "https://openclipart.org/image/300px/svg_to_png/73/rejon_Hammer.png" 31 | }, 32 | { 33 | "productId": 8, 34 | "productName": "Saw", 35 | "productCode": "TBX-0022", 36 | "releaseDate": "May 15, 2016", 37 | "description": "15-inch steel blade hand saw", 38 | "price": 11.55, 39 | "starRating": 3.7, 40 | "imageUrl": "https://openclipart.org/image/300px/svg_to_png/27070/egore911_saw.png" 41 | }, 42 | { 43 | "productId": 10, 44 | "productName": "Video Game Controller", 45 | "productCode": "GMG-0042", 46 | "releaseDate": "October 15, 2015", 47 | "description": "Standard two-button video game controller", 48 | "price": 35.95, 49 | "starRating": 4.6, 50 | "imageUrl": "https://openclipart.org/image/300px/svg_to_png/120337/xbox-controller_01.png" 51 | } 52 | ] 53 | -------------------------------------------------------------------------------- /.vscode/tasks.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "2.0.0", 3 | "tasks": [ 4 | { 5 | "type": "func", 6 | "command": "host start", 7 | "problemMatcher": "$func-watch", 8 | "isBackground": true, 9 | "dependsOn": "npm build", 10 | "options": { 11 | "cwd": "${workspaceFolder}/functions" 12 | } 13 | }, 14 | { 15 | "type": "shell", 16 | "label": "npm build", 17 | "command": "npm run build", 18 | "dependsOn": "npm install", 19 | "problemMatcher": "$tsc", 20 | "options": { 21 | "cwd": "${workspaceFolder}/functions" 22 | } 23 | }, 24 | { 25 | "type": "shell", 26 | "label": "npm install", 27 | "command": "npm install", 28 | "options": { 29 | "cwd": "${workspaceFolder}/functions" 30 | } 31 | }, 32 | { 33 | "type": "shell", 34 | "label": "npm prune", 35 | "command": "npm prune --production", 36 | "dependsOn": "npm build", 37 | "problemMatcher": [], 38 | "options": { 39 | "cwd": "${workspaceFolder}/functions" 40 | } 41 | }, 42 | { 43 | "type": "shell", 44 | "label": "npm build:production", 45 | "command": "npm run build:production" 46 | }, 47 | { 48 | "type": "npm", 49 | "script": "start", 50 | "isBackground": true, 51 | "presentation": { 52 | "focus": true, 53 | "panel": "dedicated" 54 | }, 55 | "group": { 56 | "kind": "build", 57 | "isDefault": true 58 | }, 59 | "problemMatcher": { 60 | "owner": "typescript", 61 | "source": "ts", 62 | "applyTo": "closedDocuments", 63 | "fileLocation": [ 64 | "relative", 65 | "${cwd}" 66 | ], 67 | "pattern": "$tsc", 68 | "background": { 69 | "activeOnStart": true, 70 | "beginsPattern": { 71 | "regexp": "(.*?)" 72 | }, 73 | "endsPattern": { 74 | "regexp": "Compiled |Failed to compile." 75 | } 76 | } 77 | } 78 | } 79 | ] 80 | } 81 | -------------------------------------------------------------------------------- /src/app/products/product-list.component.html: -------------------------------------------------------------------------------- 1 |

2 |

3 | {{pageTitle}} 4 |

5 |

6 |

7 |

Filter by:

8 |

9 | 11 |

12 |

13 |

15 |

16 |

Filtered by: {{listFilter}}

17 |

18 |

19 |

20 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 40 | 45 | 46 | 47 | 48 | 53 | 54 | 55 |

Product	Code	Available	Price	Rating
41 \| 42 \| {{ product.productName }} 43 \| 44 \|	{{ product.productCode \| lowercase \| convertToSpaces: '-' }}	{{ product.releaseDate }}	{{ product.price \| currency:'USD':'symbol':'1.2-2' }}	49 \| 51 \| 52 \|

56 |

57 |

58 |

59 |

61 | Error: {{ errorMessage }} 62 |

63 | -------------------------------------------------------------------------------- /tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "rulesDirectory": [ 3 | "node_modules/codelyzer" 4 | ], 5 | "rules": { 6 | "arrow-return-shorthand": true, 7 | "callable-types": true, 8 | "class-name": true, 9 | "comment-format": [ 10 | true, 11 | "check-space" 12 | ], 13 | "curly": true, 14 | "deprecation": { 15 | "severity": "warn" 16 | }, 17 | "eofline": true, 18 | "forin": true, 19 | "import-blacklist": [ 20 | true, 21 | "rxjs/Rx" 22 | ], 23 | "import-spacing": true, 24 | "indent": [ 25 | true, 26 | "spaces" 27 | ], 28 | "interface-over-type-literal": true, 29 | "label-position": true, 30 | "max-line-length": [ 31 | true, 32 | 140 33 | ], 34 | "member-access": false, 35 | "member-ordering": [ 36 | true, 37 | { 38 | "order": [ 39 | "static-field", 40 | "instance-field", 41 | "static-method", 42 | "instance-method" 43 | ] 44 | } 45 | ], 46 | "no-arg": true, 47 | "no-bitwise": true, 48 | "no-console": [ 49 | true, 50 | "debug", 51 | "info", 52 | "time", 53 | "timeEnd", 54 | "trace" 55 | ], 56 | "no-construct": true, 57 | "no-debugger": true, 58 | "no-duplicate-super": true, 59 | "no-empty": false, 60 | "no-empty-interface": true, 61 | "no-eval": true, 62 | "no-inferrable-types": [ 63 | true, 64 | "ignore-params" 65 | ], 66 | "no-misused-new": true, 67 | "no-non-null-assertion": true, 68 | "no-redundant-jsdoc": true, 69 | "no-shadowed-variable": true, 70 | "no-string-literal": false, 71 | "no-string-throw": true, 72 | "no-switch-case-fall-through": true, 73 | "no-trailing-whitespace": true, 74 | "no-unnecessary-initializer": true, 75 | "no-unused-expression": true, 76 | "no-use-before-declare": true, 77 | "no-var-keyword": true, 78 | "object-literal-sort-keys": false, 79 | "one-line": [ 80 | true, 81 | "check-open-brace", 82 | "check-catch", 83 | "check-else", 84 | "check-whitespace" 85 | ], 86 | "prefer-const": true, 87 | "quotemark": [ 88 | true, 89 | "single" 90 | ], 91 | "radix": true, 92 | "semicolon": [ 93 | true, 94 | "always" 95 | ], 96 | "triple-equals": [ 97 | true, 98 | "allow-null-check" 99 | ], 100 | "typedef-whitespace": [ 101 | true, 102 | { 103 | "call-signature": "nospace", 104 | "index-signature": "nospace", 105 | "parameter": "nospace", 106 | "property-declaration": "nospace", 107 | "variable-declaration": "nospace" 108 | } 109 | ], 110 | "unified-signatures": true, 111 | "variable-name": false, 112 | "whitespace": [ 113 | true, 114 | "check-branch", 115 | "check-decl", 116 | "check-operator", 117 | "check-separator", 118 | "check-type" 119 | ], 120 | "no-output-on-prefix": true, 121 | "use-input-property-decorator": true, 122 | "use-output-property-decorator": true, 123 | "use-host-property-decorator": true, 124 | "no-input-rename": true, 125 | "no-output-rename": true, 126 | "use-life-cycle-interface": true, 127 | "use-pipe-transform-interface": true, 128 | "component-class-suffix": true, 129 | "directive-class-suffix": true 130 | } 131 | } 132 | -------------------------------------------------------------------------------- /src/polyfills.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * This file includes polyfills needed by Angular and is loaded before the app. 3 | * You can add your own extra polyfills to this file. 4 | * 5 | * This file is divided into 2 sections: 6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. 7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main 8 | * file. 9 | * 10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that 11 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), 12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. 13 | * 14 | * Learn more in https://angular.io/guide/browser-support 15 | */ 16 | 17 | /*************************************************************************************************** 18 | * BROWSER POLYFILLS 19 | */ 20 | 21 | /** IE9, IE10 and IE11 requires all of the following polyfills. **/ 22 | // import 'core-js/es6/symbol'; 23 | // import 'core-js/es6/object'; 24 | // import 'core-js/es6/function'; 25 | // import 'core-js/es6/parse-int'; 26 | // import 'core-js/es6/parse-float'; 27 | // import 'core-js/es6/number'; 28 | // import 'core-js/es6/math'; 29 | // import 'core-js/es6/string'; 30 | // import 'core-js/es6/date'; 31 | // import 'core-js/es6/array'; 32 | // import 'core-js/es6/regexp'; 33 | // import 'core-js/es6/map'; 34 | // import 'core-js/es6/weak-map'; 35 | // import 'core-js/es6/set'; 36 | 37 | /** 38 | * If the application will be indexed by Google Search, the following is required. 39 | * Googlebot uses a renderer based on Chrome 41. 40 | * https://developers.google.com/search/docs/guides/rendering 41 | **/ 42 | // import 'core-js/es6/array'; 43 | 44 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */ 45 | // import 'classlist.js'; // Run `npm install --save classlist.js`. 46 | 47 | /** IE10 and IE11 requires the following for the Reflect API. */ 48 | // import 'core-js/es6/reflect'; 49 | 50 | /** 51 | * Web Animations `@angular/platform-browser/animations` 52 | * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. 53 | * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). 54 | **/ 55 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`. 56 | 57 | /** 58 | * By default, zone.js will patch all possible macroTask and DomEvents 59 | * user can disable parts of macroTask/DomEvents patch by setting following flags 60 | */ 61 | 62 | // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame 63 | // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick 64 | // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames 65 | 66 | /* 67 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js 68 | * with the following flag, it will bypass `zone.js` patch for IE/Edge 69 | */ 70 | // (window as any).__Zone_enable_cross_context_check = true; 71 | 72 | /*************************************************************************************************** 73 | * Zone JS is required by default for Angular itself. 74 | */ 75 | import 'zone.js/dist/zone'; // Included with Angular CLI. 76 | 77 | /* Required for Stackblitz */ 78 | import 'core-js/es7/reflect'; 79 | 80 | /*************************************************************************************************** 81 | * APPLICATION IMPORTS 82 | */ 83 | -------------------------------------------------------------------------------- /angular.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "version": 1, 4 | "newProjectRoot": "projects", 5 | "projects": { 6 | "APM": { 7 | "root": "", 8 | "sourceRoot": "src", 9 | "projectType": "application", 10 | "prefix": "pm", 11 | "schematics": {}, 12 | "architect": { 13 | "build": { 14 | "builder": "@angular-devkit/build-angular:browser", 15 | "options": { 16 | "outputPath": "dist/", 17 | "index": "src/index.html", 18 | "main": "src/main.ts", 19 | "polyfills": "src/polyfills.ts", 20 | "tsConfig": "src/tsconfig.app.json", 21 | "assets": [], 22 | "styles": [ 23 | "src/styles.css" 24 | ], 25 | "scripts": [] 26 | }, 27 | "configurations": { 28 | "production": { 29 | "fileReplacements": [ 30 | { 31 | "replace": "src/environments/environment.ts", 32 | "with": "src/environments/environment.prod.ts" 33 | } 34 | ], 35 | "optimization": true, 36 | "outputHashing": "all", 37 | "sourceMap": false, 38 | "extractCss": true, 39 | "namedChunks": false, 40 | "aot": true, 41 | "extractLicenses": true, 42 | "vendorChunk": false, 43 | "buildOptimizer": true, 44 | "budgets": [ 45 | { 46 | "type": "initial", 47 | "maximumWarning": "2mb", 48 | "maximumError": "5mb" 49 | } 50 | ] 51 | } 52 | } 53 | }, 54 | "serve": { 55 | "builder": "@angular-devkit/build-angular:dev-server", 56 | "options": { 57 | "browserTarget": "APM:build" 58 | }, 59 | "configurations": { 60 | "production": { 61 | "browserTarget": "APM:build:production" 62 | } 63 | } 64 | }, 65 | "extract-i18n": { 66 | "builder": "@angular-devkit/build-angular:extract-i18n", 67 | "options": { 68 | "browserTarget": "APM:build" 69 | } 70 | }, 71 | "test": { 72 | "builder": "@angular-devkit/build-angular:karma", 73 | "options": { 74 | "main": "src/test.ts", 75 | "polyfills": "src/polyfills.ts", 76 | "tsConfig": "src/tsconfig.spec.json", 77 | "karmaConfig": "src/karma.conf.js", 78 | "styles": [ 79 | "src/styles.css" 80 | ], 81 | "scripts": [], 82 | "assets": [ 83 | "src/favicon.ico", 84 | "src/assets", 85 | "src/api" 86 | ] 87 | } 88 | }, 89 | "lint": { 90 | "builder": "@angular-devkit/build-angular:tslint", 91 | "options": { 92 | "tsConfig": [ 93 | "src/tsconfig.app.json", 94 | "src/tsconfig.spec.json" 95 | ], 96 | "exclude": [ 97 | "**/node_modules/**" 98 | ] 99 | } 100 | } 101 | } 102 | }, 103 | "APM-e2e": { 104 | "root": "e2e/", 105 | "projectType": "application", 106 | "architect": { 107 | "e2e": { 108 | "builder": "@angular-devkit/build-angular:protractor", 109 | "options": { 110 | "protractorConfig": "e2e/protractor.conf.js", 111 | "devServerTarget": "APM:serve" 112 | }, 113 | "configurations": { 114 | "production": { 115 | "devServerTarget": "APM:serve:production" 116 | } 117 | } 118 | }, 119 | "lint": { 120 | "builder": "@angular-devkit/build-angular:tslint", 121 | "options": { 122 | "tsConfig": "e2e/tsconfig.e2e.json", 123 | "exclude": [ 124 | "**/node_modules/**" 125 | ] 126 | } 127 | } 128 | } 129 | } 130 | }, 131 | "defaultProject": "APM" 132 | } 133 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![Build Status](https://dev.azure.com/maherna/APM/_apis/build/status/APM-CI?branchName=master)](https://dev.azure.com/maherna/APM/_build/latest?definitionId=11&branchName=master) 2 | 3 | This app is built using Angular on the front end and Azure Functions on the back end with data coming from Azure Cosmos DB. 4 | 5 | # Getting Started 6 | 7 | You'll need the following installed to run this application locally. 8 | 9 | 1. Node.js and npm 10 | 1. Azure Functions Core Tools 11 | 12 | # How it Works 13 | 14 | This app uses both Angular and Azure Functions and some configuration is 15 | required to connect the two together when running locally. 16 | 17 | ![Application Architecture](./app-diagram.png) 18 | 19 | # Running This Example 20 | 21 | Once cloned, run `npm install` then open in VS Code and install the recommended 22 | extensions. Rename `functions/example.local.settings.json` to 23 | `functions/local.settings.json` and update the database connection settings with 24 | the endpoint and master key from your Cosmos DB database (using the native SQL API). 25 | 26 | Open the app in VS Code and hit `F5` (from the menu: Debug > Start Debugging). 27 | 28 | When running the app locally, the Angular app runs using the development server 29 | like you're used to (live reload continues to work). An Angular Proxy routes 30 | requests to `localhost:4200/api` to the Azure Function app that's running 31 | locally. 32 | 33 | The Azure Functions runtime is installed as part of the Azure Functions Core 34 | Tools and hosts the Serverless Functions locally on your machine to simulate 35 | exactly how the app will run when deployed. 36 | 37 | **The compound launch configuration makes it possible to hit breakpoints for 38 | both the Angular app and the Azure Functions app.** 39 | 40 | ## Configuration 41 | 42 | This example requires a Cosmos DB SQL database. To connect to the database, use 43 | `functions/local.settings.json` to configure the connection to the database. 44 | 45 | You also need to enable CORS for local development, which is also done in local 46 | settings as seen below. 47 | 48 | ```json 49 | { 50 | "IsEncrypted": false, 51 | "Values": { 52 | "FUNCTIONS_WORKER_RUNTIME": "node", 53 | "AZURE_COSMOS_ENDPOINT": "https://.documents.azure.com:443/", 54 | "AZURE_COSMOS_MASTER_KEY": "", 55 | "AZURE_COSMOS_DATABASE_ID": "Product" 56 | }, 57 | "Host": { 58 | "CORS": "*" 59 | } 60 | } 61 | ``` 62 | 63 | You'll need to populate the database with the JSON found in 64 | `src/api/products/products.json`. 65 | 66 | You'll also need to update the following files once you have you Function App 67 | and Azure Storage account created. 68 | 69 | [`functions/proxies.json`](https://github.com/fiveisprime/apm/blob/master/functions/proxies.json#L8) 70 | Update the `backendUri` value with the URL copied from the Storage Account you 71 | created to deploy the client code. 72 | 73 | [`src/environments/environment.prod.ts`](https://github.com/fiveisprime/apm/blob/master/src/environments/environment.prod.ts#L3) 74 | Update `productUrl` value with the URL copied from the Azure Function you 75 | deployed from the `functions` directory. 76 | 77 | # Deploying to Azure 78 | 79 | The client and server code are deployed to different Azure services. The client 80 | code is deployed to Azure Storage with static website hosting enabled to serve 81 | the content. The backend code is deployed to Azure Functions, which is also used 82 | as the entry point to the application (requests are proxied to the correct 83 | location). 84 | 85 | ## Deploy the Function App 86 | 87 | First, install the Azure Functions extension for VS Code and sign into your 88 | Azure account. Click on the Azure Icon on the left (in the Activity Bar) then 89 | click the deploy button in the Azure Functions explorer (the blue up arrow) and 90 | follow the prompts. 91 | 92 | 1. Select the Azure Subscription to create the Function App under 93 | 1. Choose **Create New Function App in Azure** 94 | 1. Give the app a unique name 95 | 96 | This will create everything you need on Azure then deploy the app. Once the 97 | deployment is complete, click the **Upload Settings** in the notification 98 | 99 | In the Azure Functions explorer, expand your app then expand the **Functions** 100 | node. Right click on the function that you just deployed and choose 101 | **Copy function URL**. You'll need that in the next step. :) 102 | 103 | ## Deploy the Angular App 104 | 105 | Before deploying, you need to update `./src/environments/environment.prod.json` 106 | and paste the URL from your Function app that's deployed to Azure. 107 | 108 | First, install the Azure Storage extension for VS Code and sign into your Azure 109 | account. Click on the Azure Icon on the left (in the Activity Bar) then click 110 | the deploy button in the Azure Storage explorer (the blue up arrow) and follow 111 | the prompts. 112 | 113 | 1. Select the Azure Subscription to create the Storage Account under 114 | 1. Choose **Create new Storage Account** and give it a unique name 115 | 1. Choose **Create new resource group**, accept the name and choose a location 116 | 117 | At this point the storage account will be created in the background. This will 118 | take a minute or so. When prompted choose "Enable static website hosting" and 119 | enter `index.html` for both the **index document** and the 120 | **404 error document path**. 121 | 122 | Once created and configured, you're prompted to choose the directory to deploy. 123 | Choose the `./dist` directory from the list and you're all will be built (in 124 | production mode) then deployed to storage. 125 | 126 | # Resources 127 | 128 | - [Static Site Tutorial](https://aka.ms/build-storetut) 129 | - [Serverless Tutorial](https://aka.ms/build-functut) 130 | - [VS Code Extensions](https://aka.ms/build-azext) 131 | - [Try the code](https://aka.ms/apm) 132 | - [Azure Dev Ops](https://aka.ms/build-azdo) 133 | 134 | # Credits 135 | 136 | Collaboration on this project is between Matt Hernandez and John Papa. 137 | 138 | Shout out to [Deborah Kurata](https://github.com/deborahk/) who wrote the 139 | original APM app that this example is built on. 140 | -------------------------------------------------------------------------------- /functions/package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "functions", 3 | "version": "0.1.0", 4 | "lockfileVersion": 1, 5 | "requires": true, 6 | "dependencies": { 7 | "@azure/cosmos": { 8 | "version": "2.1.5", 9 | "resolved": "https://registry.npmjs.org/@azure/cosmos/-/cosmos-2.1.5.tgz", 10 | "integrity": "sha512-qkGekxOgwZqZ+1oaHmYSvDiMDcoJt6S9PPHmfaGzbgZcSdYrLolcoLTg/CyDS50wmBSh2OBrsKcE6nXAnVLIyg==", 11 | "requires": { 12 | "binary-search-bounds": "2.0.3", 13 | "create-hmac": "^1.1.7", 14 | "priorityqueuejs": "1.0.0", 15 | "semaphore": "1.0.5", 16 | "stream-http": "^2.8.3", 17 | "tslib": "^1.9.3", 18 | "tunnel": "0.0.5" 19 | } 20 | }, 21 | "@azure/functions": { 22 | "version": "1.0.1-beta2", 23 | "resolved": "https://registry.npmjs.org/@azure/functions/-/functions-1.0.1-beta2.tgz", 24 | "integrity": "sha512-ewVNxU2fqSCLbLuHwwvcL2ExgYNIhaztgHQfBShM9bpCBlAufTrvqlGnsEMfYv2F+BmJrkvhcDWE7E8cDz4X0g==", 25 | "dev": true 26 | }, 27 | "@types/node": { 28 | "version": "11.13.4", 29 | "resolved": "https://registry.npmjs.org/@types/node/-/node-11.13.4.tgz", 30 | "integrity": "sha512-+rabAZZ3Yn7tF/XPGHupKIL5EcAbrLxnTr/hgQICxbeuAfWtT0UZSfULE+ndusckBItcv4o6ZeOJplQikVcLvQ==", 31 | "dev": true 32 | }, 33 | "binary-search-bounds": { 34 | "version": "2.0.3", 35 | "resolved": "https://registry.npmjs.org/binary-search-bounds/-/binary-search-bounds-2.0.3.tgz", 36 | "integrity": "sha1-X/hhbW3SylOIvIWy1iZuK52lAtw=" 37 | }, 38 | "builtin-status-codes": { 39 | "version": "3.0.0", 40 | "resolved": "https://registry.npmjs.org/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz", 41 | "integrity": "sha1-hZgoeOIbmOHGZCXgPQF0eI9Wnug=" 42 | }, 43 | "cipher-base": { 44 | "version": "1.0.4", 45 | "resolved": "https://registry.npmjs.org/cipher-base/-/cipher-base-1.0.4.tgz", 46 | "integrity": "sha512-Kkht5ye6ZGmwv40uUDZztayT2ThLQGfnj/T71N/XzeZeo3nf8foyW7zGTsPYkEya3m5f3cAypH+qe7YOrM1U2Q==", 47 | "requires": { 48 | "inherits": "^2.0.1", 49 | "safe-buffer": "^5.0.1" 50 | } 51 | }, 52 | "core-util-is": { 53 | "version": "1.0.2", 54 | "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz", 55 | "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=" 56 | }, 57 | "create-hash": { 58 | "version": "1.2.0", 59 | "resolved": "https://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz", 60 | "integrity": "sha512-z00bCGNHDG8mHAkP7CtT1qVu+bFQUPjYq/4Iv3C3kWjTFV10zIjfSoeqXo9Asws8gwSHDGj/hl2u4OGIjapeCg==", 61 | "requires": { 62 | "cipher-base": "^1.0.1", 63 | "inherits": "^2.0.1", 64 | "md5.js": "^1.3.4", 65 | "ripemd160": "^2.0.1", 66 | "sha.js": "^2.4.0" 67 | } 68 | }, 69 | "create-hmac": { 70 | "version": "1.1.7", 71 | "resolved": "https://registry.npmjs.org/create-hmac/-/create-hmac-1.1.7.tgz", 72 | "integrity": "sha512-MJG9liiZ+ogc4TzUwuvbER1JRdgvUFSB5+VR/g5h82fGaIRWMWddtKBHi7/sVhfjQZ6SehlyhvQYrcYkaUIpLg==", 73 | "requires": { 74 | "cipher-base": "^1.0.3", 75 | "create-hash": "^1.1.0", 76 | "inherits": "^2.0.1", 77 | "ripemd160": "^2.0.0", 78 | "safe-buffer": "^5.0.1", 79 | "sha.js": "^2.4.8" 80 | } 81 | }, 82 | "hash-base": { 83 | "version": "3.0.4", 84 | "resolved": "https://registry.npmjs.org/hash-base/-/hash-base-3.0.4.tgz", 85 | "integrity": "sha1-X8hoaEfs1zSZQDMZprCj8/auSRg=", 86 | "requires": { 87 | "inherits": "^2.0.1", 88 | "safe-buffer": "^5.0.1" 89 | } 90 | }, 91 | "inherits": { 92 | "version": "2.0.3", 93 | "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz", 94 | "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=" 95 | }, 96 | "isarray": { 97 | "version": "1.0.0", 98 | "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz", 99 | "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=" 100 | }, 101 | "md5.js": { 102 | "version": "1.3.5", 103 | "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz", 104 | "integrity": "sha512-xitP+WxNPcTTOgnTJcrhM0xvdPepipPSf3I8EIpGKeFLjt3PlJLIDG3u8EX53ZIubkb+5U2+3rELYpEhHhzdkg==", 105 | "requires": { 106 | "hash-base": "^3.0.0", 107 | "inherits": "^2.0.1", 108 | "safe-buffer": "^5.1.2" 109 | } 110 | }, 111 | "priorityqueuejs": { 112 | "version": "1.0.0", 113 | "resolved": "https://registry.npmjs.org/priorityqueuejs/-/priorityqueuejs-1.0.0.tgz", 114 | "integrity": "sha1-LuTyPCVgkT4IwHzlzN1t498sWvg=" 115 | }, 116 | "process-nextick-args": { 117 | "version": "2.0.0", 118 | "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.0.tgz", 119 | "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==" 120 | }, 121 | "readable-stream": { 122 | "version": "2.3.6", 123 | "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz", 124 | "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==", 125 | "requires": { 126 | "core-util-is": "~1.0.0", 127 | "inherits": "~2.0.3", 128 | "isarray": "~1.0.0", 129 | "process-nextick-args": "~2.0.0", 130 | "safe-buffer": "~5.1.1", 131 | "string_decoder": "~1.1.1", 132 | "util-deprecate": "~1.0.1" 133 | } 134 | }, 135 | "ripemd160": { 136 | "version": "2.0.2", 137 | "resolved": "https://registry.npmjs.org/ripemd160/-/ripemd160-2.0.2.tgz", 138 | "integrity": "sha512-ii4iagi25WusVoiC4B4lq7pbXfAp3D9v5CwfkY33vffw2+pkDjY1D8GaN7spsxvCSx8dkPqOZCEZyfxcmJG2IA==", 139 | "requires": { 140 | "hash-base": "^3.0.0", 141 | "inherits": "^2.0.1" 142 | } 143 | }, 144 | "safe-buffer": { 145 | "version": "5.1.2", 146 | "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", 147 | "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==" 148 | }, 149 | "semaphore": { 150 | "version": "1.0.5", 151 | "resolved": "https://registry.npmjs.org/semaphore/-/semaphore-1.0.5.tgz", 152 | "integrity": "sha1-tJJXbmavGT25XWXiXsU/Xxl5jWA=" 153 | }, 154 | "sha.js": { 155 | "version": "2.4.11", 156 | "resolved": "https://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz", 157 | "integrity": "sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ==", 158 | "requires": { 159 | "inherits": "^2.0.1", 160 | "safe-buffer": "^5.0.1" 161 | } 162 | }, 163 | "stream-http": { 164 | "version": "2.8.3", 165 | "resolved": "https://registry.npmjs.org/stream-http/-/stream-http-2.8.3.tgz", 166 | "integrity": "sha512-+TSkfINHDo4J+ZobQLWiMouQYB+UVYFttRA94FpEzzJ7ZdqcL4uUUQ7WkdkI4DSozGmgBUE/a47L+38PenXhUw==", 167 | "requires": { 168 | "builtin-status-codes": "^3.0.0", 169 | "inherits": "^2.0.1", 170 | "readable-stream": "^2.3.6", 171 | "to-arraybuffer": "^1.0.0", 172 | "xtend": "^4.0.0" 173 | } 174 | }, 175 | "string_decoder": { 176 | "version": "1.1.1", 177 | "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", 178 | "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", 179 | "requires": { 180 | "safe-buffer": "~5.1.0" 181 | } 182 | }, 183 | "to-arraybuffer": { 184 | "version": "1.0.1", 185 | "resolved": "https://registry.npmjs.org/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz", 186 | "integrity": "sha1-fSKbH8xjfkZsoIEYCDanqr/4P0M=" 187 | }, 188 | "tslib": { 189 | "version": "1.9.3", 190 | "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.9.3.tgz", 191 | "integrity": "sha512-4krF8scpejhaOgqzBEcGM7yDIEfi0/8+8zDRZhNZZ2kjmHJ4hv3zCbQWxoJGz1iw5U0Jl0nma13xzHXcncMavQ==" 192 | }, 193 | "tunnel": { 194 | "version": "0.0.5", 195 | "resolved": "https://registry.npmjs.org/tunnel/-/tunnel-0.0.5.tgz", 196 | "integrity": "sha512-gj5sdqherx4VZKMcBA4vewER7zdK25Td+z1npBqpbDys4eJrLx+SlYjJvq1bDXs2irkuJM5pf8ktaEQVipkrbA==" 197 | }, 198 | "typescript": { 199 | "version": "3.3.3", 200 | "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.3.3.tgz", 201 | "integrity": "sha512-Y21Xqe54TBVp+VDSNbuDYdGw0BpoR/Q6wo/+35M8PAU0vipahnyduJWirxxdxjsAkS7hue53x2zp8gz7F05u0A==", 202 | "dev": true 203 | }, 204 | "util-deprecate": { 205 | "version": "1.0.2", 206 | "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", 207 | "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=" 208 | }, 209 | "xtend": { 210 | "version": "4.0.1", 211 | "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.1.tgz", 212 | "integrity": "sha1-pcbVMr5lbiPbgg77lDofBJmNY68=" 213 | } 214 | } 215 | } 216 | --------------------------------------------------------------------------------