DOCSEARCHbyAlgolia
Submit Docs

eShopOnWeb Reference Application

repository·main·Indexed 27 days ago

https://github.com/dotnet-architecture/eshoponweb

A Microsoft-powered ASP.NET Core reference application demonstrating a monolithic architecture. It showcases modern web application patterns and principles from the 'Architecting Modern Web Applications with ASP.NET Core and Azure' eBook, featuring implementations for Azure deployment via azd, local execution, Docker Compose orchestration, and SQL Server migrations.

Tokens
2K
Snippets
11
Records
14
Agent score
94%

What's inside eShopOnWeb

  2. Set up SQL Server database and migrations for eShopOnWeb

    main

    To use a persistent SQL Server database locally, follow these steps:

    1. Install EF Core tools:
      dotnet tool update --global dotnet-ef
    2. Configure Connection Strings: Ensure appsettings.json contains valid connection strings pointing to your local SQL Server instance.
    3. Apply Migrations: Open a command prompt in the Web folder and execute:
      dotnet restore
dotnet tool restore
dotnet ef database update -c catalogcontext -p ../Infrastructure/Infrastructure.csproj -s Web.csproj
dotnet ef database update -c appidentitydbcontext -p ../Infrastructure/Infrastructure.csproj -s Web.csproj
      This creates two databases: one for catalog/shopping cart data (catalogcontext) and one for user identity data (appidentitydbcontext).

    Creating new migrations: If you modify the models, use these commands from the Web folder:

    # For Catalog
dotnet ef migrations add InitialModel --context catalogcontext -p ../Infrastructure/Infrastructure.csproj -s Web.csproj -o Data/Migrations

# For Identity
dotnet ef migrations add InitialIdentityModel --context appidentitydbcontext -p ../Infrastructure/Infrastructure.csproj -s Web.csproj -o Identity/Migrations
    dotnet ef database update -c catalogcontext -p ../Infrastructure/Infrastructure.csproj -s Web.csproj
dotnet ef database update -c appidentitydbcontext -p ../Infrastructure/Infrastructure.csproj -s Web.csproj

  3. Install Azure Developer CLI (azd)

    main

    To provision and deploy the eShopOnWeb application to Azure, you must install the Azure Developer CLI (azd). Use the command corresponding to your operating system:

    Windows

    powershell -ex AllSigned -c "Invoke-RestMethod 'https://aka.ms/install-azd.ps1' | Invoke-Expression"

    Linux/MacOS

    curl -fsSL https://aka.ms/install-azd.sh | bash
    powershell -ex AllSigned -c "Invoke-RestMethod 'https://aka.ms/install-azd.ps1' | Invoke-Expression"

  5. Run eShopOnWeb locally

    main

    To run the application locally with full functionality (including the Blazor WebAssembly Admin page), you must run both the Web project and the PublicApi project:

    1. Start the Public API: Navigate to the PublicApi folder in a terminal and run:
      dotnet run
    2. Start the Web Application: In a separate terminal, navigate to the Web folder and run:
      dotnet run --launch-profile Web
    3. Access the site: The application will be available at https://localhost:5001/. The admin interface is located at https://localhost:5001/admin.

    Warning: You must stop these processes manually before building the solution to avoid file locking errors.

  6. Run eShopOnWeb using Docker Compose

    main

    You can run the entire application stack using Docker Compose. Run these commands from the root folder (where the .sln file is located):

    docker-compose build
docker-compose up

    Once complete:

    • Web project: http://localhost:5106
    • Public API project: http://localhost:5200

    Tip: If you encounter login issues, try using a new guest or incognito browser instance.

    docker-compose build
docker-compose up

  8. Use Open Iconic SVG Sprite

    main

    The SVG sprite allows you to load all icons in a single request. To use an icon, reference the sprite file and the specific icon ID using the <use> tag.

    Styling Tips:

    • Sizing: Set equal width and height on the <svg> tag.
    • Coloring: Use the CSS fill property on the <use> tag to change the icon color.
    <svg class="icon">
  <use xlink:href="open-iconic.svg#account-login" class="icon-account-login"></use>
</svg>

<style>
.icon {
  width: 16px;
  height: 16px;
}

.icon-account-login {
  fill: #f00;
}
</style>

  9. Deploy eShopOnWeb to Azure using azd

    main

    Follow these steps to provision and deploy the application to Azure using the Azure Developer CLI:

    1. Login to Azure:
      azd auth login
    2. Initialize the environment:
      azd init -t dotnet-architecture/eShopOnWeb
    3. Provision and Deploy:
      azd up
      During the azd up process, you will be prompted to enter an env name and select a subscription and location.

    Note: Sensitive data like database IDs and passwords are stored in Azure Key Vault during this process. The resulting resource group will be named rg-{env name}.

    azd up

  12. Configure eShopOnWeb to use an In-Memory database

    main

    By default, the project uses a real database. To switch to an in-memory database for local development, add the following key to your appsettings.json file within the Web folder:

    {
    "UseOnlyInMemoryDatabase": true
}
    {
    "UseOnlyInMemoryDatabase": true
}