Open Closed

How to set the backend API address correctly in the Blazor App frontend to recognize the environement dev/test/production when using CI-CD automation? #3021


0
chrisalves created

If you're creating a bug/problem report, please include followings:

  • ABP Framework version: v5.2.1
  • UI type: Blazor WebAssembly
  • DB provider: EF Core
  • Tiered (MVC) or Identity Server Separated (Angular): no
  • Exception message and stack trace: None
  • Steps to reproduce the issue:"

Hi Folks,

I developed a simple application using Blazor WebAssembly to be hosted in Microsoft Azure, througth the Static Web App technology. The application name is eOrdering, the ideia is to be an application to allow small bakeries and restaurants to offer Online Ordering to their customers for takeawey or delivery of products.

The projects inside the Solution are named using ABP convention like eOrdering.Blazor, eOrdering.HttpApi.Host etc.

To create the Azure Machine is quite simple cause Azure offers a Wizard to set the machine and the Github settings to get access repository/branch to implement the CI-CD automation.

The machine has a public and fixed host name like https://somename.azure.com but it can be changed in the future for a custom domain name.

The beauty of this ci-cd is to allow to update the app version inside the machine when there is a new version published in Github. Everytime I commit the branch, the Github updates the Azure Machine content. It is very common nowadays but I´m describing here to make the case clear.

I have 3 branches in the GitHub (Development, Test, Production) and each of them is integrated with a distinct Azure Machine. Once there is an update in the Development branch, the new code is automatically deployed to Azure Machine-dev and need to access the correct API. When there is a change in the Test branch, the new code is automatically deployed to Azure Machine-tst, and the same situation occurs when updating the Production branch.

In my personal PC where I have ABP installed and Visual Studio to run, I can see the both applications running correctly (the API and the FrontEnd) but when I publish them to Azure, the FrontEnd doesn't find the API.

What kind of configuration should I need to add to Blazor frontend application (or another dependency project) to allow the application understands that is being hosted by a given machine and use the correct path to start the communication with the correct backend API (in the case the project eOrdering.HttpApi.Host) hosted in another manhine)?

Many thanks!


5 Answer(s)
  • 0
    maliming created
    Support Team

    hi You need to change these URLs in a different environment.

    See https://docs.microsoft.com/en-us/aspnet/core/fundamentals/environments?view=aspnetcore-6.0

    .

  • 0
    chrisalves created

    Hi! I really appreciate your help! I found the file in the wwwroot folder of the Blazor Project as seen below and now I will work to provide multiples environments according to the MS article suggested.

    I do appreciate your help!

    According to the article you suggested, I will create the variables in Azure Static App that hosts the Blazor Application.

    Many thanks!

  • 0
    maliming created
    Support Team

    You're welcome

  • 0
    chrisalves created

    Hi Folks,

    I'm returning here with the same topic, after some tests made without expected results, the application is not being redirected as expected driven by the aspsettings.{ENVIRONMENT}.json

    Considering the environment in Azure is more dificult to diagnose, I spend much time trying to solve, even rising a ticket with MS Technical support. After some researches on the web, I found an article in ABP.IO community that seems to be useful but probably was written for an old version of ABP Framework. The main idea is to present a way to integrate ABP.IO projects into Azure Webapp. Here is the article https://github.com/bartvanhoey/AbpIoAzureDevopsRepo

    I found in the article a suggestion to run the application locally in the PC but pointing the Database to the SQL server hosted in Azure (remote database). Following the suggestion to set locally the json file and set the envonment correctly (please see the picture below) as cutted off from the article in the part 3 (https://abpioazuredevopsblazor.azurewebsites.net/part3)

    I skipped the section 20 of the article because if applying the recommened changes the code runs and get error. I believe it is because the recently ABP.IO release is not accepting the old code related to "BuildConfiguration()" because the actual release (5.2.1) has the template for Blazor WASM with a different implementation as shown below:

    (Default implementation when using Blazor WASM template)

    (Changes recommended by the article in the section 20)

    To test the environment settings, I followed the recomendations below

    <br>

    The picture below reproduces that I´m trying to setup the Staging environment.

    The Seed process is always creating ans seeding data in my PC local database, not into the remote hosted by Azure. To ensure this symptom, I deleted the local database many times and ran again, always observing the local database being created again and again.

    When I run the {ApplicationName}.HttpApi.Host with Enviroment set as "Development" then it runs perfectly, but when I set the Environment to "Staging" the API runs with error, and loops indefinitely getting errors. My guess is that the Json file is being considered by the {ApplicationName}.HttpApi.Host but it does not find the initial Seed of the database.

    Please can anyone help with complementary procedures to allow the first step related to the database connection for a different environment than the default Development?

    Many thanks!

    Christian

    <br>

  • 0
    maliming created
    Support Team

    hi

    The DbMigrator is not web application, Please use DOTNET_ENVIRONMENT.