### Start project with npm start

Source: https://github.com/dotnetcore/agileconfig/blob/master/src/AgileConfig.Server.UI/react-ui-antd/README.md

Starts the development server for the project.

```bash
npm start
```

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

### Install dependencies with npm install

Source: https://github.com/dotnetcore/agileconfig/blob/master/src/AgileConfig.Server.UI/react-ui-antd/README.md

Installs the required node_modules for the project. Run this in the project root before starting development.

```bash
npm install
```

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

### Install AgileConfig.Client from NuGet

Source: https://github.com/dotnetcore/agileconfig/blob/master/README.md

Install the AgileConfig.Client NuGet package.

```powershell
Install-Package AgileConfig.Client
```

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

### Install dependencies with yarn

Source: https://github.com/dotnetcore/agileconfig/blob/master/src/AgileConfig.Server.UI/react-ui-antd/README.md

Alternative to npm install for installing dependencies using the yarn package manager.

```bash
yarn
```

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

### Run Docker cluster end-to-end test

Source: https://github.com/dotnetcore/agileconfig/blob/master/src/AgileConfig.Server.UI/react-ui-antd/e2e/README.md

Runs the Docker cluster test, which builds the image, starts MySQL and three AgileConfig nodes, and verifies WebSocket reload and configuration retrieval. Requires a running Docker daemon.

```powershell
npm run test:e2e:docker
```

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

### Add AgileConfig client services in Main

Source: https://github.com/dotnetcore/agileconfig/blob/master/README.md

In the Main function, add AgileConfig client services by calling UseAgileConfig() on the host builder.

```csharp
   public static IHostBuilder CreateHostBuilder(string[] args) =>
            Host.CreateDefaultBuilder(args)
                .UseAgileConfig()
                .ConfigureWebHostDefaults(webBuilder =>
                {
                    webBuilder.UseStartup<Startup>();
                });
```

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

### Build project with npm run build

Source: https://github.com/dotnetcore/agileconfig/blob/master/src/AgileConfig.Server.UI/react-ui-antd/README.md

Builds the project for production deployment.

```bash
npm run build
```

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

### Run Playwright end-to-end tests

Source: https://github.com/dotnetcore/agileconfig/blob/master/src/AgileConfig.Server.UI/react-ui-antd/e2e/README.md

Installs the Playwright Chromium browser and runs the complete end-to-end test suite from the react-ui-antd directory.

```powershell
npx playwright install chromium
npm run test:e2e
```

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

### Run AgileConfig node on Docker

Source: https://github.com/dotnetcore/agileconfig/blob/master/README.md

Run the AgileConfig node as a Docker container with SQLite storage, admin console enabled, and port 5000 exposed. After startup, visit http://localhost:5000.

```shell
sudo docker run \
--name agile_config \
-e TZ=Asia/Shanghai \
-e adminConsole=true \
-e db__provider=sqlite \
-e db__conn="Data Source=agile_config.db" \
-p 5000:5000 \
-v /etc/localtime:/etc/localtime \
#-v /your_host_dir:/app/db \
-d kklldog/agile_config:latest
```

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

### Read configuration values with IConfigClient

Source: https://github.com/dotnetcore/agileconfig/blob/master/README.md

Use IConfigClient to retrieve configuration values by key, iterate over all data, and pass values to the view via ViewBag.

```csharp
public class HomeController : Controller
{
    private readonly IConfigClient _configClient

    public HomeController(IConfigClient configClient)
    {
        _configClient = configClient;
    }

    /// <summary>
    /// By IConfigClient
    /// </summary>
    /// <returns></returns>
    public IActionResult ByIConfigClient()
    {
        var userId = _configClient["userId"];
        var dbConn = _configClient["db:connection"];

        foreach (var item in _configClient.Data)
        {
            Console.WriteLine($"{item.Key} = {item.Value}");
        }

        ViewBag.userId = userId;
        ViewBag.dbConn = dbConn;

        return View();
    }
}
```

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

### Test code with npm test

Source: https://github.com/dotnetcore/agileconfig/blob/master/src/AgileConfig.Server.UI/react-ui-antd/README.md

Runs the project's test suite.

```bash
npm test
```

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

### Access configuration via ConfigClient.Instance singleton

Source: https://github.com/dotnetcore/agileconfig/blob/master/README.md

Use the singleton ConfigClient.Instance to access a configuration value without dependency injection.

```csharp
var userid = ConfigClient.Instance["userid"]
```

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

### Configure AgileConfig in appsettings.json

Source: https://github.com/dotnetcore/agileconfig/blob/master/README.md

Add the AgileConfig section to appsettings.json with appId, secret, nodes, name, tag, and env settings.

```json
{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft": "Warning",
      "Microsoft.Hosting.Lifetime": "Information"
    }
  },
  "AllowedHosts": "*",

  //agile_config
  "AgileConfig": {
    "appId": "app",
    "secret": "xxx",
    "nodes": "http://localhost:5000,http://localhost:5001",
    "name": "client_name",
    "tag": "tag1",
    "env": "dev"
  }
}
```

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

### Inject IConfiguration and IOptions<T> into a controller

Source: https://github.com/dotnetcore/agileconfig/blob/master/README.md

Use this constructor injection pattern to access configuration values through the standard IConfiguration and IOptions<T> interfaces in an ASP.NET Core controller.

```csharp
public class HomeController : Controller
{
    private readonly IConfiguration _IConfiguration;
    private readonly IOptions<DbConfigOptions> _dbOptions;

    public HomeController(IConfiguration configuration, IOptions<DbConfigOptions> dbOptions)
    {
        _IConfiguration = configuration;
        _dbOptions = dbOptions;
    }
}
```

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

### Check code style with npm run lint

Source: https://github.com/dotnetcore/agileconfig/blob/master/src/AgileConfig.Server.UI/react-ui-antd/README.md

Runs the code style checker to identify linting issues.

```bash
npm run lint
```