dontnod/web-app-starter

Boilerplate for a web application with React and .Net Core using Azure (MSAL) for the authentication

DNE Web App Starter

This starter kit is a boilerplate based on the https://github.com/Azure-Samples/ms-identity-ciam-javascript-tutorial/tree/main/2-Authorization/1-call-api-react. It demonstrates how to build a web application with a React SPA (Single Page Application) client and a .NET 8 backend, leveraging Azure AD and MSAL for authentication. For detailed guidance on configuring Azure AD and MSAL, please refer to the there.

Scenario

1. The client React SPA uses the to sign-in a user and obtain a JWT ID Token from Azure AD for Customers.
2. The ID Token proves that the user has successfully authenticated against Azure AD for Customers.

Prerequisites

• Either Visual Studio or Visual Studio Code and .NET Core SDK
• Node.js.
• An Azure AD tenant.

Setup the starter

Setup the Client

For details on setting up and running the client, see the Client documentation

Setup the API

For details on setting up and running the service, see the Service documentation

Create new database migration

dotnet ef migrations add {MigrationName} -s src/Api -p src/Infrastructure -o Data/Migrations

Apply migration to the database

dotnet ef database update -s src/Api -p src/Infrastructure 

Format and lint

dotnet format style
dotnet format analyzers
dotnet csharpier .

Docker

Create a .env file at the root of the project and populate it with the following values to configure your environment:

AZURE_TENANT_ID={your_azure_tenant_id}
AZURE_CLIENT_ID={your_azure_api_application_client_id}
VITE_AZURE_CLIENT_ID={your_azure_spa_application_client_id}
VITE_AZURE_AUTHORITY=https://login.microsoftonline.com/{your_tenant_id}
VITE_TODO_API_ENDPOINT_URL=http://localhost:8080
VITE_TODO_API_SCOPES_READ=["api://{your_azure_api_application_id}/ToDoList.Read"]
VITE_TODO_API_SCOPES_WRITE=["api://{your_azure_api_application_id}/ToDoList.ReadWrite"]

docker compose up

Running the app in a Dev Container

This project supports opening directly in a fully configured development container using Visual Studio Code's Dev Container feature. The provided Docker image comes pre-configured with the .NET SDK and Node.js, setting up a ready-to-run development environment for the application.

1. Install Prerequisites:

Ensure that you have Visual Studio Code installed along with the Remote - Containers extension. You will also need Docker installed and running on your machine.

2. Open the Project in VS Code:

Open the project folder in Visual Studio Code. VS Code may prompt you to reopen the project in a container. If it does not, you can manually reopen it in a container by following the next step.

3. Reopen in Container:

Use the Command Palette (Ctrl+Shift+P or Cmd+Shift+P on Mac) and select 'Remote-Containers: Reopen in Container'. This command will start the process of building the Docker image (if it's not already built) and configuring the container.

4. Verify Environment:

Once the container is running, open a terminal in VS Code to verify that the .NET SDK and Node.js are installed correctly by running dotnet --version and node --version.

Running the App in Production Using Docker

This project can be deployed and run within a Docker container. First, ensure you have created and configured the .env file as described in the previous documentation sections. This file should contain all necessary environment variables for the application to run correctly in production.

Once the .env file is set up, execute the following command to build and start the Docker container:

docker compose up --build -d

This command performs the following actions:

• --build: This option ensures that Docker builds the images before starting the containers, which is essential if you have made changes to the Dockerfile or other components of the Docker setup.

• -d: This runs the containers in detached mode, meaning they run in the background and do not block the terminal.

Ensure Docker is installed and running on your machine before executing the command. This setup allows for a streamlined deployment process, encapsulating the application within a container for consistent performance across different environments.

web-app-starter's Issues

Unable to build / run the API server

First off, thank you for providing such an extremely high quality starter - this contains almost the perfect setup for building a saas and I'm sure would be of use to the community.

I saw your post on reddit and wanted to try out, but I'm unable to build it on WSL2/Ubuntu 22.04 with the following error:

raj@RAGE:~/web-app-starter/service/DNE.Todo.API$ dotnet run

Welcome to .NET 8.0!
---------------------
SDK Version: 8.0.103

----------------
Installed an ASP.NET Core HTTPS development certificate.
To trust the certificate, view the instructions: https://aka.ms/dotnet-https-linux

----------------
Write your first app: https://aka.ms/dotnet-hello-world
Find out what's new: https://aka.ms/dotnet-whats-new
Explore documentation: https://aka.ms/dotnet-docs
Report issues and find source on GitHub: https://github.com/dotnet/core
Use 'dotnet --help' to see available commands or visit: https://aka.ms/dotnet-cli
--------------------------------------------------------------------------------------
Building...
/home/raj/web-app-starter/service/DNE.Todo.API/Permissions/ReadTodoPermission.cs(25,90): warning SA1502: Element should not be on a single line (https://github.com/DotNetAnalyzers/StyleCopAnalyzers/blob/master/documentation/SA1502.md) [/home/raj/web-app-starter/service/DNE.Todo.API/DNE.Todo.API.csproj]
/home/raj/web-app-starter/service/DNE.Todo.API/Permissions/WriteTodoPermission.cs(25,92): warning SA1502: Element should not be on a single line (https://github.com/DotNetAnalyzers/StyleCopAnalyzers/blob/master/documentation/SA1502.md) [/home/raj/web-app-starter/service/DNE.Todo.API/DNE.Todo.API.csproj]
CSC : warning SA0001: XML comment analysis is disabled due to project configuration (https://github.com/DotNetAnalyzers/StyleCopAnalyzers/blob/master/documentation/SA0001.md) [/home/raj/web-app-starter/service/DNE.Todo.API/DNE.Todo.API.csproj]
/home/raj/web-app-starter/service/DNE.Todo.API/DNE.Todo.API.csproj(38,5): error MSB3073: The command "dotnet swagger tofile --output openapi.json /home/raj/web-app-starter/service/DNE.Todo.API/bin/Debug/net8.0/DNE.Todo.API.dll v1" exited with code 1.

The build failed. Fix the build errors and run again.

The error message above doesn't seem too helpful, and I'm somewhat new to the .NET ecosystem. Wondering if you can help?