Select correct Angular Environment based on .Net Core build

Question

I created an .Net Core Web Api with an Angular ClientApp with the templates from Visual Studio.

When building the project also builds the contained Angular App with the params set in the .csproj <Target> section e.g.

<Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
    <!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build -- --prod" />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build:ssr -- --prod" Condition=" '$(BuildServerSideRenderer)' == 'true' " />

    <!-- Include the newly-built files in the publish output -->
    <ItemGroup>
      <DistFiles Include="$(SpaRoot)dist\**; $(SpaRoot)dist-server\**" />
      <DistFiles Include="$(SpaRoot)node_modules\**" Condition="'$(BuildServerSideRenderer)' == 'true'" />
      <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
        <RelativePath>%(DistFiles.Identity)</RelativePath>
        <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
      </ResolvedFileToPublish>
    </ItemGroup>
  </Target>

(This section was auto-generated when creating a new project)

Yet this leaves me no choice which environment.ts file from Angular should be used during a build, which makes building for different deployment targets a bit complicated.

Is there any way to set this file dynamically during build? e.g.

appsettings.json should build with environment.ts
appsettings.Development.json should build with environment.dev.ts
appsettings.Production.json should build with environment.prod.ts
etc.

This would ensure that every dotnet build and its corresponding Angular build would have the correct environment values for the api-url, version, etc...

Or is there another (cleaner?) method to use/override environment variables for the Angular App?

These are the values that should be exchanged during build

export const environment = {
    production: false,
    dataServiceURI: 'https://localhost:5001/data',
    version: 'localhost'
};

As localhost:5001 is no viable option in prod for example

I don't know about the .NET part, but you could have different Target elements with different commands, like npm run build to select environment.ts or npm run build --configuration=dev to select environment.dev.ts. You must have the configurations defined in your angular.json file. — Bernard Pagoaga
– Bernard Pagoaga, Commented Apr 8, 2019 at 12:18
for this method I do not understand enough the structure of the .csproj xml to manipulate it easily. I have tried, but failed miserably — pjominet
– pjominet, Commented Apr 9, 2019 at 8:20

pjominet · Accepted Answer · 2019-05-13 09:18:25Z

25

I kind of found a solution by manipulating the *.csproj after all.

HINT: To be clear this problem only applies when you created your project with the Visual Studio .Net Core Web Api with Angular Template which creates a combined web api with clientapp project

After I found out that I could add custom Build Configurations for dotnet build I added the following lines to the <Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish"> block:

<Exec WorkingDirectory="$(SpaRoot)" Command="npm run build-prod" Condition="'$(Configuration)' == 'Release'" />
<Exec WorkingDirectory="$(SpaRoot)" Command="npm run build-staging" Condition="'$(Configuration)' == 'Staging'" />

and in package.json add to scripts:

"scripts": {
        "build-staging": "ng build --configuration=staging",
        "build-prod": "ng build --configuration=production",
    },

What it does, is on different build configs set by the Condition attribute, npm run build is called with a corresponding/appropriate environment.

Another, perhaps more easy approach, would be to have two build pipelines, one for npm and the angular app and one for the dotnet web api. While doing so, you may want to remove the whole build SPA stuff from the *.csproj otherwise it will build the app twice.

Or just have 2 separate projects in the first place and spare yourself the hassle :)

EDIT:

As pointed out Command="npm run build --configuration=production" (e.g. build with mutliple params) is not picked up by the CI/CD. So using predefined scripts from package.json is the correct way to go :)

edited May 13, 2019 at 9:18

answered Apr 17, 2019 at 9:51

pjominet

8362 gold badges9 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

aitorllj93 Over a year ago

Command="npm run build -- --configuration=production" should work (Note the "--" before the params

CularBytes · Accepted Answer · 2020-03-27 15:34:28Z

I would just like to provide an end-to-end solution, because it took quite some time that I will save you now :).

My goal was to have different environment configurations for different companies, as the web application will be used by different companies with just small changes (enable/disable modules, change logo, change theme colors, etc.).

Configure launchSettings.json (within your web project under properties). Add the following code under profiles:

"Staging": {
 "commandName": "IISExpress",
 "launchBrowser": true,
 "environmentVariables": {
   "ASPNETCORE_ENVIRONMENT": "Staging"
 },
 "applicationUrl": "https://localhost:5001;http://localhost:5000"
}

Where Staging is the name if your desired environment name. This will make sure you are able to select this configuration under Start within Visual Studio.

For more info: read this

Add your own appsettings.Staging.json file in the root directory of the project for custom app settings. Although this is mostly important for local testing because in your CI/CD you will probably want to configure substitutions. If you do want to use the specific appsettings.Staging.json in production, then set ASPNETCORE_ENVIRONMENT to Staging at the server (for azure App Service under Configuration => Application Settings).
In your Startup.cs, add the following else if block.

app.UseSpa(spa =>
{
    // To learn more about options for serving an Angular SPA from ASP.NET Core,
    // see https://go.microsoft.com/fwlink/?linkid=864501

    spa.Options.SourcePath = "ClientApp";

    if (env.IsDevelopment())
    {
        spa.UseAngularCliServer(npmScript: "start");
    }
    else if (env.EnvironmentName == "Staging")
    {
#if DEBUG
        spa.UseAngularCliServer(npmScript: "start-stagingdebug");
#endif
    }
});

Notice the #if DEBUG, this is required because you don't want to execute this on a deployed environment, however for locally running angular, you HAVE to call this, else you will end up with an error page. As you might also notice, I append debug to the environment name, I will explain later. For now you have to realize that env.IsDevelopment() will be false, and therefor you will have to work around to make sure your angular app will still be build and served when running your app locally.

Modify your angular.json, under architect => build => configurations, add 2 new configurations:

"staging": {
  "fileReplacements": [
    {
      "replace": "src/environments/environment.ts",
      "with": "src/environments/environment.toptechneut.ts"
    },
    {
      "replace": "src/assets/img/logo-icon.png",
      "with": "src/assets/img/staging/logo-icon.png"
    },
  ],

  "optimization": true,
  "outputHashing": "all",
  "sourceMap": false,
  "extractCss": true,
  "namedChunks": false,
  "aot": true,
  "extractLicenses": true,
  "vendorChunk": false,
  "buildOptimizer": true,
  "budgets": [
    {
      "type": "initial",
      "maximumWarning": "2mb",
      "maximumError": "5mb"
    }
  ]
},
"stagingdebug": {
  "fileReplacements": [
    {
      "replace": "src/environments/environment.ts",
      "with": "src/environments/environment.toptechneut.ts"
    },
    {
      "replace": "src/assets/img/logo-icon.png",
      "with": "src/assets/img/staging/logo-icon.png"
    },
  ]
}

If you know a bit about angular.json you notice that in staging I make a configuration for a production environment, I will make sure my CI/CD will call this (or when I publish my application via VS2017). For local testing, I hold a different configuration stagingdebug, so that it still keeps the source maps and I am able to debug my code while running it locally.

Add your environment.staging.ts file within the environments folder, for environment-specific options. More on that, read this
modify your package.json, under scripts, I added these scripts:

"start-staging": "ng serve --configuration staging",
"start-stagingdebug": "ng serve --configuration stagingdebug",
"build-staging": "ng build --configuration staging",
"build-stagingdebug": "ng build --configuration stagingdebug",

Same here: for local development I call the configuration with debug appended to it.

As of now, you should be able to change to the new configuration within Visual Studio and run according to your new environment configurations!

Modify your .csproj, thanks for that pjominet. Please note that once again, this is only for publishing your web application, not for local debugging.

<Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
<!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
 <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />

 <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build-core" />
 <Exec WorkingDirectory="$(SpaRoot)" Command="npm run buildprod" Condition="'$(Configuration)' == 'Release'" />
 <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build-staging" Condition="'$(Configuration)' == 'Staging'" />
 <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build:ssr -- --prod" Condition=" '$(BuildServerSideRenderer)' == 'true' " />
  <!--rest below here-->

I modified mine to call the correct script that I defined in my package.json, because for some reason my CI did not pickup on the extra commands behind it while I was using pjominet's answer.

If you are using Azure DevOps, you just have to change the BuildConfiguration variable is set to Staging. If you followed all the steps then this should build successfully.

thanks for pointing out that CI does not pick up build commands with multiple params, I already realized and fixed that in my project but I forgot to update my answer, which I did now :)

Hatim Gheewala · Accepted Answer · 2024-02-22 08:41:12Z

OOTB Dotnet has mechanism to access any properties defined in the PublishProfiles.

So you can have two profiles, setting the environment variable like shown in the images

And the following property can be accessed on .csproj file upon run time to process the build commands accordingly. In my case I switch between commands to build the respective SPA (Angular) build.

ProjectName.csproj

on the SPA (Angular). I have setup my angular.json to switch environments based on configuration provided in ProjectName.csproj file as shown:

      "configurations": {
        "production": {
          "budgets": [
            {
              "type": "initial",
              "maximumWarning": "1mb",
              "maximumError": "5mb"
            },
            {
              "type": "anyComponentStyle",
              "maximumWarning": "2kb",
              "maximumError": "4kb"
            }
          ],
          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.prod.ts"
            }
          ],
          "outputHashing": "all"
        },
        "staging": {
          "budgets": [
            {
              "type": "initial",
              "maximumWarning": "1mb",
              "maximumError": "5mb"
            },
            {
              "type": "anyComponentStyle",
              "maximumWarning": "2kb",
              "maximumError": "4kb"
            }
          ],
          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.staging.ts"
            }
          ],
          "outputHashing": "all"
        },
        "development": {
          "buildOptimizer": false,
          "optimization": false,
          "vendorChunk": true,
          "extractLicenses": false,
          "sourceMap": true,
          "namedChunks": true
        }
      },
      "defaultConfiguration": "production"

environment.prod.ts

export const environment = {
  production: true,
  apiUrl: "https://example.production.com/"
};

environment.staging.ts

export const environment = {
   staging: true,
   apiUrl: "https://example.staging.com/"
};

Collectives™ on Stack Overflow

Select correct Angular Environment based on .Net Core build

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related