### Install Bootstrap with npm

Source: https://github.com/duendesoftware/samples/blob/main/BFF/v4/MultiFrontendSSO/MultiFrontendSSO.IdentityServer/idsrv-wwwroot/lib/bootstrap/README.md

Use npm to install Bootstrap. Ensure you have Node.js and npm installed.

```bash
npm install bootstrap
```

--------------------------------

### Run IdentityServer

Source: https://github.com/duendesoftware/samples/blob/main/BFF/v4/MultiFrontendSSO/README.md

Starts the Identity Provider. Ensure this is running before starting the client application.

```bash
cd MultiFrontendSSO.IdentityServer
dotnet run
```

--------------------------------

### Install Bootstrap with yarn

Source: https://github.com/duendesoftware/samples/blob/main/BFF/v4/MultiFrontendSSO/MultiFrontendSSO.IdentityServer/idsrv-wwwroot/lib/bootstrap/README.md

Use yarn to install Bootstrap. Ensure you have Node.js and yarn installed.

```bash
yarn add bootstrap@4.5.3
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/duendesoftware/samples/blob/main/BFF/v4/Vue/vue.client/README.md

Run this command after cloning the project to install all necessary npm packages.

```sh
npm install
```

--------------------------------

### Install Bootstrap with Composer

Source: https://github.com/duendesoftware/samples/blob/main/BFF/v4/MultiFrontendSSO/MultiFrontendSSO.IdentityServer/idsrv-wwwroot/lib/bootstrap/README.md

Use Composer to install Bootstrap. Ensure you have PHP and Composer installed.

```bash
composer require twbs/bootstrap:4.5.3
```

--------------------------------

### Start Documentation Server

Source: https://github.com/duendesoftware/samples/blob/main/BFF/v4/MultiFrontendSSO/MultiFrontendSSO.IdentityServer/idsrv-wwwroot/lib/bootstrap/README.md

Execute this command to compile CSS and JavaScript, generate documentation, and start a local development server that watches for changes.

```bash
npm start
```

--------------------------------

### Start Development Server

Source: https://github.com/duendesoftware/samples/blob/main/BFF/v4/Angular/angular.ssr/README.md

Run this command to start a local development server. The application reloads automatically on source file changes.

```bash
ng serve
```

--------------------------------

### Run Client Application

Source: https://github.com/duendesoftware/samples/blob/main/BFF/v4/MultiFrontendSSO/README.md

Starts the frontend client application that utilizes the Backend-For-Frontend pattern.

```bash
cd MultiFrontendSSO.Client
dotnet run
```

--------------------------------

### Install Bootstrap with NuGet

Source: https://github.com/duendesoftware/samples/blob/main/BFF/v4/TokenExchange/TokenExchange.IdentityServer/wwwroot/lib/bootstrap/README.md

Install Bootstrap using NuGet, the package manager for .NET. Separate commands are provided for CSS and Sass.

```powershell
Install-Package bootstrap
```

```powershell
Install-Package bootstrap.sass
```

--------------------------------

### Install Bootstrap CSS with NuGet

Source: https://github.com/duendesoftware/samples/blob/main/BFF/v4/MultiFrontendSSO/MultiFrontendSSO.IdentityServer/idsrv-wwwroot/lib/bootstrap/README.md

Use NuGet Package Manager to install Bootstrap CSS. This is for .NET projects.

```powershell
Install-Package bootstrap
```

--------------------------------

### Build and Run Docker Compose Services

Source: https://github.com/duendesoftware/samples/blob/main/BFF/v4/docker/readme.md

After setting up the certificate and updating the configuration, use this command to build the Docker images and start the services.

```bash
# Optional: Clean up old containers/volumes if troubleshooting
# docker compose down -v

# Build images and start containers
docker compose up --build
```

--------------------------------

### Install jQuery for Node.js

Source: https://github.com/duendesoftware/samples/blob/main/BFF/v4/MultiFrontendSSO/MultiFrontendSSO.Client/wwwroot/lib/jquery/README.md

To use jQuery in a Node.js environment, first install it using npm.

```sh
npm install jquery
```

--------------------------------

### Install Ruby Dependencies for Jekyll

Source: https://github.com/duendesoftware/samples/blob/main/BFF/v4/MultiFrontendSSO/MultiFrontendSSO.IdentityServer/idsrv-wwwroot/lib/bootstrap/README.md

Before running the documentation locally, install Jekyll and other required Ruby dependencies using Bundler.

```bash
bundle install
```

--------------------------------

### Install Bootstrap Sass with NuGet

Source: https://github.com/duendesoftware/samples/blob/main/BFF/v4/MultiFrontendSSO/MultiFrontendSSO.IdentityServer/idsrv-wwwroot/lib/bootstrap/README.md

Use NuGet Package Manager to install Bootstrap Sass. This is for .NET projects using Sass.

```powershell
Install-Package bootstrap.sass
```

--------------------------------

### Start Development Server

Source: https://github.com/duendesoftware/samples/blob/main/BFF/v4/Vue/vue.client/README.md

Compiles and hot-reloads the Vue application for development. Changes are reflected instantly without a full page reload.

```sh
npm run dev
```

--------------------------------

### Clone Bootstrap repository

Source: https://github.com/duendesoftware/samples/blob/main/BFF/v4/MultiFrontendSSO/MultiFrontendSSO.IdentityServer/idsrv-wwwroot/lib/bootstrap/README.md

Clone the Bootstrap repository from GitHub to get the latest source code.

```bash
git clone https://github.com/twbs/bootstrap.git
```

--------------------------------

### Build Angular Project

Source: https://github.com/duendesoftware/samples/blob/main/BFF/v4/Angular/angular.ssr/README.md

Execute this command to build the project. The build artifacts are stored in the dist/ directory. Production builds are optimized for performance.

```bash
ng build
```

--------------------------------

### Build for Production

Source: https://github.com/duendesoftware/samples/blob/main/BFF/v4/Vue/vue.client/README.md

Compiles and minifies the Vue application for deployment. This creates optimized static assets.

```sh
npm run build
```

--------------------------------

### List Angular Schematics

Source: https://github.com/duendesoftware/samples/blob/main/BFF/v4/Angular/angular.ssr/README.md

Run this command to see a list of all available schematics for code generation, such as components, directives, or pipes.

```bash
ng generate --help
```

--------------------------------

### Bootstrap Project Directory Structure

Source: https://github.com/duendesoftware/samples/blob/main/BFF/v4/MultiFrontendSSO/MultiFrontendSSO.IdentityServer/idsrv-wwwroot/lib/bootstrap/README.md

This structure shows the compiled CSS and JavaScript files, including minified versions and source maps. Bundled JS includes Popper but not jQuery.

```text
bootstrap/
└── dist/
    ├── css/
    │   ├── bootstrap-grid.css
    │   ├── bootstrap-grid.css.map
    │   ├── bootstrap-grid.min.css
    │   ├── bootstrap-grid.min.css.map
    │   ├── bootstrap-reboot.css
    │   ├── bootstrap-reboot.css.map
    │   ├── bootstrap-reboot.min.css
    │   ├── bootstrap-reboot.min.css.map
    │   ├── bootstrap.css
    │   ├── bootstrap.css.map
    │   ├── bootstrap.min.css
    │   └── bootstrap.min.css.map
    └── js/
        ├── bootstrap.bundle.js
        ├── bootstrap.bundle.js.map
        ├── bootstrap.bundle.min.js
        ├── bootstrap.bundle.min.js.map
        ├── bootstrap.js
        ├── bootstrap.js.map
        ├── bootstrap.min.js
        └── bootstrap.min.js.map
```

--------------------------------

### Run Unit Tests

Source: https://github.com/duendesoftware/samples/blob/main/BFF/v4/Vue/vue.client/README.md

Executes unit tests using Vitest. Ensure your tests are configured correctly to run with this command.

```sh
npm run test:unit
```

--------------------------------

### Export ASP.NET Core Development Certificate

Source: https://github.com/duendesoftware/samples/blob/main/BFF/v4/docker/readme.md

Use this command to export your development certificate to a PFX file. Ensure you are in the 'docker' directory and choose a secure password.

```powershell
dotnet dev-certs https --export-path ./aspnetcore-dev-cert.pfx --password MyPw123 --format PFX
```

--------------------------------

### Run Angular Unit Tests

Source: https://github.com/duendesoftware/samples/blob/main/BFF/v4/Angular/angular.ssr/README.md

Use this command to execute unit tests with the Karma test runner.

```bash
ng test
```

--------------------------------

### Generate Angular Component

Source: https://github.com/duendesoftware/samples/blob/main/BFF/v4/Angular/angular.ssr/README.md

Use this command to generate a new component using Angular CLI's code scaffolding tools.

```bash
ng generate component component-name
```

--------------------------------

### Trust ASP.NET Core Development Certificate

Source: https://github.com/duendesoftware/samples/blob/main/BFF/v4/docker/readme.md

Run this command to ensure your host machine trusts the development certificate authority, preventing browser warnings. Administrator privileges may be required.

```powershell
dotnet dev-certs https --trust
```

--------------------------------

### Lint Code with ESLint

Source: https://github.com/duendesoftware/samples/blob/main/BFF/v4/Vue/vue.client/README.md

Runs ESLint to check for code style and potential errors. This helps maintain code quality and consistency.

```sh
npm run lint
```

--------------------------------

### Run Angular End-to-End Tests

Source: https://github.com/duendesoftware/samples/blob/main/BFF/v4/Angular/angular.ssr/README.md

This command is used for running end-to-end (e2e) tests. You can choose your preferred e2e testing framework.

```bash
ng e2e
```

--------------------------------

### Displaying TODO List with Iteration

Source: https://github.com/duendesoftware/samples/blob/main/BFF/v4/Angular/angular.ssr/src/app/todos/todos.component.html

Iterates over a collection of 'todos' to display individual items. Includes an @empty block for when no items are present. Ensure 'todos()' returns an iterable collection.

```razor
@else {

### Add New

Todo Date  Todo Name   
Create

@for (todo of todos(); track todo.id) { } @empty { }

Id

Date

Note

User

delete

{{ todo.id }}

{{ todo.date | date:'shortDate' }}

{{ todo.name }}

{{ todo.user }}

No todos found.

}
```

--------------------------------

### Display User Session or Login Link in Angular

Source: https://github.com/duendesoftware/samples/blob/main/BFF/v4/Angular/angular.ssr/src/app/nav-menu/nav-menu.component.html

Conditionally renders navigation links based on user authentication status. Use this for dynamic navigation in Angular applications.

```html
@if (authenticated()) {
*   Show User Session
}
@else {
*   [Login](/bff/login)
}
@if (authenticated()) {
*   Signout
}
```

--------------------------------

### Conditional Rendering for Anonymous Users

Source: https://github.com/duendesoftware/samples/blob/main/BFF/v4/Angular/angular.ssr/src/app/todos/todos.component.html

Displays a login prompt when the user is anonymous. This is a common pattern for protecting content.

```razor
@if (anonymous()) {

Please log in to see your To Do list.

}
```

--------------------------------

### Enable Debugging for Algolia DocSearch

Source: https://github.com/duendesoftware/samples/blob/main/BFF/v4/MultiFrontendSSO/MultiFrontendSSO.Client/wwwroot/lib/bootstrap/README.md

Set `debug: true` in the specified JavaScript file to enable debugging for Algolia's DocSearch functionality within the documentation.

```javascript
site/docs/4.5/assets/js/src/search.js
```

--------------------------------

### Define jQuery with AMD

Source: https://github.com/duendesoftware/samples/blob/main/BFF/v4/MultiFrontendSSO/MultiFrontendSSO.Client/wwwroot/lib/jquery/README.md

If using the Asynchronous Module Definition (AMD) format, jQuery can be defined as a dependency.

```javascript
define( [ "jquery" ], function( $ ) {

} );
```

--------------------------------

### Use jQuery in Node.js with JSDOM

Source: https://github.com/duendesoftware/samples/blob/main/BFF/v4/MultiFrontendSSO/MultiFrontendSSO.Client/wwwroot/lib/jquery/README.md

jQuery requires a window and document object to function. In Node.js, these can be mocked using a library like JSDOM, which is useful for testing.

```javascript
const { JSDOM } = require( "jsdom" );
const { window } = new JSDOM( "" );
const $ = require( "jquery" )( window );
```

--------------------------------

### Conditional Rendering for User Session State

Source: https://github.com/duendesoftware/samples/blob/main/BFF/v4/Angular/angular.ssr/src/app/user-session/user-session.component.html

Use this Razor syntax to conditionally display content based on the user's authentication status. It shows a loading message for anonymous users and user claims for authenticated users.

```cshtml
@if (isAnonymous()) {

_Loading..._

} @if (isAuthenticated()) { @for (claim of claims() || \[\]; track $index) { } @empty { }

Type

Value(C)

{{ claim.type }}

{{ claim.value }}

No claims available.

}
```

--------------------------------

### Include jQuery via Script Tag

Source: https://github.com/duendesoftware/samples/blob/main/BFF/v4/MultiFrontendSSO/MultiFrontendSSO.Client/wwwroot/lib/jquery/README.md

The most common way to include jQuery is by adding a script tag to your HTML. This loads the library directly from a CDN.

```html
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
```

--------------------------------

### Enable Debug Mode for Algolia DocSearch

Source: https://github.com/duendesoftware/samples/blob/main/BFF/v4/docker/ContainerizedIdentityServer/wwwroot/lib/bootstrap/README.md

Sets the debug flag to true in the Algolia DocSearch configuration file to enable debugging features. This is useful when working on the search functionality.

```javascript
debug: true
```

--------------------------------

### Update Certificate Password in Docker Compose

Source: https://github.com/duendesoftware/samples/blob/main/BFF/v4/docker/readme.md

Modify the 'compose.yaml' file to include the password for the development certificate in the environment variables for both the identity server and frontend host services.

```yaml
services:
  containerizedidentityserver:
    # ... other settings ...
    environment:
      # ... other variables ...
      - ASPNETCORE_Kestrel__Certificates__Default__Password=MyPw123 # <-- UPDATE THIS to match export password
  frontendhost:
    # ... other settings ...
    environment:
      # ... other variables ...
      - ASPNETCORE_Kestrel__Certificates__Default__Password=MyPw123 # <-- UPDATE THIS to match export password
```

--------------------------------

### Conditional Rendering with Error Handling

Source: https://github.com/duendesoftware/samples/blob/main/BFF/v4/Angular/angular.ssr/src/app/todos/todos.component.html

Handles and displays error messages when an error occurs, otherwise shows the main content. Ensure 'errorMessage' is properly bound.

```razor
@else {
@if (hasError) {

**Error:** {{ errorMessage }}

}
```

--------------------------------

### Import jQuery with ES6 Modules

Source: https://github.com/duendesoftware/samples/blob/main/BFF/v4/MultiFrontendSSO/MultiFrontendSSO.Client/wwwroot/lib/jquery/README.md

When using ES6 modules with a transpiler like Babel, you can import jQuery using the import statement.

```javascript
import $ from "jquery";
```

--------------------------------

### Require jQuery with Browserify/Webpack

Source: https://github.com/duendesoftware/samples/blob/main/BFF/v4/MultiFrontendSSO/MultiFrontendSSO.Client/wwwroot/lib/jquery/README.md

For module bundlers like Browserify or Webpack, you can include jQuery using the require function.

```javascript
var $ = require( "jquery" );
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.