Create different environments for Staging & Production

Author: robisim74

.angular-cli.json

@@ -26,6 +26,7 @@
       "environments": {
         "dev": "environments/environment.ts",
         "hmr": "environments/environment.hmr.ts",
+        "staging": "environments/environment.staging.ts",
         "prod": "environments/environment.prod.ts"
       }
     }

CHANGELOG.md

@@ -1,5 +1,9 @@
 ## Angular SPA Web API Changelog
 
+<a name="Nov 17, 2017"></a>
+### Nov 17, 2017
+* Create different environments for Staging & Production
+
 <a name="Nov 12-13, 2017"></a>
 ### Nov 12-13, 2017
 * Switch to angular-oauth2-oidc

Properties/launchSettings.json

@@ -25,7 +25,7 @@
       },
       "applicationUrl": "http://localhost:5000/"
     },
-    "AngularSPAWebAPI_Prod": {
+    "AngularSPAWebAPI_Staging": {
       "commandName": "Project",
       "launchBrowser": true,
       "environmentVariables": {

README.md

@@ -27,6 +27,7 @@ you should use an OpenID Connect implicit flow.
 - Resource Owner Password Credentials grant
 - Refresh token
 - Role based Authorization
+- Development, Staging & Production environments
 
 ## Project structure
 The structure of the project is based on [Angular CLI ASP.NET Core](https://github.com/robisim74/AngularCliAspNetCore).
@@ -87,11 +88,15 @@ The structure of the project is based on [Angular CLI ASP.NET Core](https://gith
 
 Make the changes to the Angular app: the browser will update without refreshing.
 
-#### Staging / Production
-- `npm run build`
+#### Staging
+- `npm run build:staging`
 - Set _Staging_ as environment variable
 - `dotnet run --no-launch-profile`
 
+#### Production
+- `npm run build:prod`
+- Publish
+
 ### Visual Studio 2017
 
 #### Development
@@ -101,11 +106,15 @@ Make the changes to the Angular app: the browser will update without refreshing.
 
 Make the changes to the Angular app: the browser will update without refreshing.
 
-#### Staging / Production
-- `npm run build`
-- Select _AngularSPAWebAPI_Prod_ profile
+#### Staging
+- `npm run build:staging`
+- Select _AngularSPAWebAPI_Staging_ profile
 - Start debugging
 
+#### Production
+- `npm run build:prod`
+- Publish
+
 ## Changing db
 To use another database:
 - Edit `ConnectionStrings` in _appsettings.json_

Startup.cs

@@ -16,9 +16,12 @@ namespace AngularSPAWebAPI
 {
     public class Startup
     {
-        public Startup(IConfiguration configuration)
+        private readonly IHostingEnvironment currentEnvironment;
+
+        public Startup(IConfiguration configuration, IHostingEnvironment env)
         {
             Configuration = configuration;
+            currentEnvironment = env;
         }
 
         public IConfiguration Configuration { get; }
@@ -76,15 +79,28 @@ public void ConfigureServices(IServiceCollection services)
                 .AddInMemoryClients(Config.GetClients())
                 .AddAspNetIdentity<ApplicationUser>(); // IdentityServer4.AspNetIdentity.
 
-            services.AddAuthentication(IdentityServerAuthenticationDefaults.AuthenticationScheme)
-                .AddIdentityServerAuthentication(options =>
-                {
-                    options.Authority = "http://localhost:5000/";
-                    //options.Authority = "http://angularspawebapi.azurewebsites.net/";
-                    options.RequireHttpsMetadata = false;
-
-                    options.ApiName = "WebAPI";
-                });
+            if (currentEnvironment.IsProduction())
+            {
+                services.AddAuthentication(IdentityServerAuthenticationDefaults.AuthenticationScheme)
+                    .AddIdentityServerAuthentication(options =>
+                    {
+                        options.Authority = "http://angularspawebapi.azurewebsites.net/";
+                        options.RequireHttpsMetadata = false;
+
+                        options.ApiName = "WebAPI";
+                    });
+            }
+            else
+            {
+                services.AddAuthentication(IdentityServerAuthenticationDefaults.AuthenticationScheme)
+                    .AddIdentityServerAuthentication(options =>
+                    {
+                        options.Authority = "http://localhost:5000/";
+                        options.RequireHttpsMetadata = false;
+
+                        options.ApiName = "WebAPI";
+                    });
+            }
 
             services.AddMvc();
         }

package.json

@@ -5,7 +5,8 @@
   "scripts": {
     "ng": "ng",
     "start": "ng serve --aot --proxy-config proxy.config.js --hmr -e=hmr",
-    "build": "ng build --prod",
+    "build:staging": "ng build --prod --env=staging",
+    "build:prod": "ng build --prod",
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e"

src/app/app.component.ts

@@ -30,21 +30,6 @@ export class AppComponent implements OnInit {
         private authenticationService: AuthenticationService,
         private router: Router
     ) {
-        // angular-oauth2-oidc configuration.
-        this.oAuthService.clientId = "AngularSPA";
-        this.oAuthService.scope = "openid offline_access WebAPI profile roles";
-        this.oAuthService.setStorage(this.authenticationService.storage);
-        //this.oAuthService.issuer = "http://angularspawebapi.azurewebsites.net";
-        this.oAuthService.issuer = "http://localhost:5000";
-        this.oAuthService.oidc = false;
-        this.oAuthService.requireHttps = false;
-
-        //const url: string = 'http://angularspawebapi.azurewebsites.net/.well-known/openid-configuration';
-        const url: string = 'http://localhost:5000/.well-known/openid-configuration';
-
-        // Loads Discovery Document.
-        this.oAuthService.loadDiscoveryDocument(url);
-
         if (this.oAuthService.hasValidAccessToken()) {
             this.authenticationService.init();
 

src/app/app.module.ts

@@ -1,4 +1,4 @@
-import { NgModule } from '@angular/core';
+import { NgModule, APP_INITIALIZER } from '@angular/core';
 import { BrowserModule, Title } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
@@ -13,6 +13,11 @@ import { AppComponent } from './app.component';
 import { HomeComponent } from './home/home.component';
 
 import { OAuthModule } from 'angular-oauth2-oidc';
+import { OAuthConfig } from './oauth.config';
+
+export function initOAuth(oAuthConfig: OAuthConfig): Function {
+    return () => oAuthConfig.load();
+}
 
 @NgModule({
     imports: [
@@ -30,6 +35,13 @@ import { OAuthModule } from 'angular-oauth2-oidc';
     ],
     providers: [
         Title,
+        OAuthConfig,
+        {
+            provide: APP_INITIALIZER,
+            useFactory: initOAuth,
+            deps: [OAuthConfig],
+            multi: true
+        },
         AuthGuard,
         AuthenticationService,
         IdentityService

src/app/oauth.config.ts

@@ -0,0 +1,53 @@
+import { Injectable } from '@angular/core';
+import { AuthConfig, OAuthService } from 'angular-oauth2-oidc';
+
+import { environment } from '../environments/environment';
+
+export const oAuthDevelopmentConfig: AuthConfig = {
+
+    clientId: "AngularSPA",
+    scope: "openid offline_access WebAPI profile roles",
+    oidc: false,
+    issuer: "http://localhost:5000",
+    requireHttps: false
+
+}
+
+export const oAuthProductionConfig: AuthConfig = {
+
+    clientId: "AngularSPA",
+    scope: "openid offline_access WebAPI profile roles",
+    oidc: false,
+    issuer: "http://angularspawebapi.azurewebsites.net",
+    requireHttps: false
+
+}
+
+/**
+ * angular-oauth2-oidc configuration.
+ */
+@Injectable() export class OAuthConfig {
+
+    constructor(private oAuthService: OAuthService) { }
+
+    load(): Promise<object> {
+        let url: string
+
+        if (environment.production) {
+            // Production environment.
+            this.oAuthService.configure(oAuthProductionConfig);
+            url = 'http://angularspawebapi.azurewebsites.net/.well-known/openid-configuration';
+        } else {
+            // Development & Staging environments.
+            this.oAuthService.configure(oAuthDevelopmentConfig);
+            url = 'http://localhost:5000/.well-known/openid-configuration';
+        }
+
+        // Defines the storage.
+        this.oAuthService.setStorage(localStorage);
+
+        // Loads Discovery Document.
+        return this.oAuthService.loadDiscoveryDocument(url);
+    }
+
+}

src/app/services/authentication.service.ts

@@ -17,7 +17,7 @@ import { User } from '../models/user';
  */
 @Injectable() export class AuthenticationService {
 
-    // Defines the storage.
+    // As in OAuthConfig.
     public storage: Storage = localStorage;
 
     /**