In this guide, we’ll walk through the steps to connect an Azure Web App to Azure Key Vault securely using Managed Identities. This setup ensures seamless integration without the need to store sensitive credentials in your application code.

1. Create Your Azure Key Vault​

Start by creating a Key Vault in the Azure portal:

• Navigate to Key Vaults and select + Create.
• Provide the required details such as Subscription, Resource Group, Region, and a Name for your Key Vault.
• Once completed, your Key Vault will be ready to store secrets, keys, and certificates.

2. Grant Yourself Access to the Key Vault​

Even if you’re the owner of the subscription, you need explicit permissions to access the Key Vault. To do this:

• Go to the **Access control (IAM) **section of the Key Vault.
• Select + Add role assignment.
• Choose the Key Vault Administrator or Key Vault Secrets User role and assign it to yourself.

This step ensures you can manage secrets and other Key Vault resources.

3. Enable Managed Identities for Your Web App​

A Managed Identity acts as a secure bridge between your Azure Web App and the Key Vault. Here’s how to enable it:

• Go to your Azure Web App in the portal.
• Navigate to Settings > Identity.
• Under the User Assigned tab, select + Add and link the Managed Identity you want to use.

This identity will later be granted permissions to access the Key Vault.

4. Assign Key Vault Permissions to the Managed Identity Using IAM​

With the Managed Identity created, the next step is to grant it access to your Key Vault through Azure IAM:

• Navigate to your Key Vault in the Azure portal.
• Select Access Control (IAM) from the left-hand menu.
• Click + Add role assignment.
• In the Role dropdown, select a role like Key Vault Secrets User or Key Vault Contributor, depending on the level of access required.
• In the Assign access to field, select Managed Identity.
• Under Members, choose the Managed Identity linked to your Web App.
• Save the role assignment.

By granting permissions through IAM, your Managed Identity now has the required access to interact with the Key Vault securely.

Integrate the Managed Identity in Your Web App​

Option 1 - using DefaultAzureCredential with Environment Variable​

you need to specify AZURE_CLIENT_ID in your Web App Environment Variables. refer to official doc. AZURE_CLIENT_ID is the client ID of your managed identity.

using Azure.Identity;
using Azure.Security.KeyVault.Secrets;

var keyVaultClient = new SecretClient(
  new Uri(keyVaultUri), new DefaultAzureCredential());
var secret = await keyVaultClient.GetSecretAsync(secretName);
var apiKey = secret.Value.Value;

Option 2 - using DefaultAzureCredential​

using Azure.Identity;
using Azure.Security.KeyVault.Secrets;

var keyVaultClient = new SecretClient(
  new Uri(keyVaultUri), new DefaultAzureCredential(
    new DefaultAzureCredentialOptions
    {
        ManagedIdentityClientId = "<your managed identity client ID>"
    }));
var secret = await keyVaultClient.GetSecretAsync(secretName);
var apiKey = secret.Value.Value;

Ref: How to use managed identities for App Service and Azure Functions

In modern web development, creating seamless and responsive user experiences often involves handling real-time data updates and server-side interactions effectively. React 19 introduces two powerful hooks, useActionState and useOptimistic, designed to make these tasks more manageable. These hooks are particularly useful when implementing features like form validation with optimistic updates and server-side actions, especially in frameworks like Next.js.

This blog will guide you through using useActionState and useOptimistic to build a robust form validation workflow. We’ll explore how to:

• Implement Optimistic Updates: Allow users to see immediate feedback on their input while ensuring server-side consistency.
• Validate Forms Seamlessly: Use client-side validations in sync with server-side validations for a smooth user experience.
• Leverage Server Actions in Next.js: Integrate server-side logic to enhance validation and manage state effectively.

Whether you’re looking to improve user interactivity or streamline server communication, this tutorial will equip you with practical insights and code snippets to get started. By the end, you’ll have a fully functional example of a form that leverages React’s latest hooks and Next.js capabilities for an optimized and user-friendly experience.

Basic Idea​

Implementation​

The index page that fetch comments and pass to <Comment />

import Comment from '@/components/comment';
import { Comment as IComment } from '@/typing';

export default async function Home() {
  const commentsResult = await fetch(
    `http://localhost:${process.env.PORT}/api/comment`,
    { next: { tags: ['comment'] }, cache: 'force-cache' }
  );

  const comments = (await commentsResult.json()) as IComment[];

  return (
    <div className='flex flex-col items-center justify-center mt-6'>
      <div className='flex flex-col  w-64'>
        <Comment comments={comments} />
      </div>
    </div>
  );
}

The <Comments /> component that contains form and list.

'use client';

import { createComment } from '@/app/actions';
import { Comment as IComment } from '@/typing';
import { useActionState, useOptimistic } from 'react';
import CommentForm from './commentForm';
import CommentList from './commentList';

export default function Comment({ comments }: { comments: IComment[] }) {
  const [state, formAction, pending] = useActionState(createComment, null);

  const [optimisticComments, addOptimisticComments] = useOptimistic(
    comments,
    (state, newComment: IComment) => {
      return [newComment, ...state];
    }
  );

  return (
    <div>
      <CommentForm
        state={state}
        formAction={formAction}
        pending={pending}
        addOptimisticComments={addOptimisticComments}
      />
      <CommentList comments={optimisticComments} />
    </div>
  );
}

<CommentForm /> including the error message

'use client';

import { Comment } from '@/typing';
import { FormEventHandler, startTransition } from 'react';
import { Button } from './ui/button';
import { Input } from './ui/input';
import { Label } from './ui/label';
import { Textarea } from './ui/textarea';

type State =
  | {
      errors: {
        name?: string[] | undefined;
        email?: string[] | undefined;
        message?: string[] | undefined;
      };
      values: {
        name: string;
        email: string;
        message: string;
      };
      success?: undefined;
    }
  | {
      success: true;
      errors?: undefined;
      values?: undefined;
    }
  | null;

export default function CommentForm({
  state,
  formAction,
  pending,
  addOptimisticComments,
}: {
  state: State;
  formAction: (payload: FormData) => void;
  pending: boolean;
  addOptimisticComments: (action: Comment) => void;
}) {
  const onSubmit: FormEventHandler<HTMLFormElement> = (e) => {
    const name = (e.target as any).name.value;
    const message = (e.target as any).message.value;
    startTransition(() => {
      addOptimisticComments({ name, message });
    });
  };
  return (
    <form action={formAction} onSubmit={onSubmit}>
      <div className='flex w-full flex-col gap-1.5'>
        <div>
          <Label htmlFor='name'>Name</Label>
          <Input
            type='text'
            id='name'
            name='name'
            defaultValue={state?.values?.name || ''}
            placeholder='Name'
            className={state?.errors?.name ? 'border-red-400' : ''}
          />
          {state?.errors?.name && (
            <p className='text-red-400 text-xs'>{state.errors.name[0]}</p>
          )}
        </div>
        <div>
          <Label htmlFor='email'>Email</Label>
          <Input
            type='email'
            id='email'
            name='email'
            defaultValue={state?.values?.email || ''}
            placeholder='Email'
            className={state?.errors?.email ? 'border-red-400' : ''}
          />
          {state?.errors?.email && (
            <p className='text-red-400 text-xs'>{state.errors.email[0]}</p>
          )}
        </div>
        <div>
          <Label htmlFor='message'>Your message</Label>
          <Textarea
            placeholder='Type your message here.'
            id='message'
            name='message'
            defaultValue={state?.values?.message || ''}
            className={state?.errors?.message ? 'border-red-400' : ''}
          />
          {state?.errors?.message && (
            <p className='text-red-400 text-xs'>{state.errors.message[0]}</p>
          )}
        </div>
        <Button disabled={pending}>Submit</Button>
      </div>
    </form>
  );
}

'use server';

import { revalidateTag } from 'next/cache';
import { z } from 'zod';

const commentSchema = z.object({
  name: z.string().min(5).max(100),
  email: z.string().email(),
  message: z.string().min(5).max(100),
});

export async function createComment(
  previousState: unknown,
  formData: FormData
) {
  const name = formData.get('name') as string;
  const email = formData.get('email') as string;
  const message = formData.get('message') as string;

  const formValues = {
    name,
    email,
    message,
  };

  const { success, error, data } = commentSchema.safeParse(formValues);
  if (!success) {
    return {
      errors: error.flatten().fieldErrors,
      values: formValues,
    };
  }

  await fetch(`http://localhost:${process.env.PORT}/api/comment/`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ name: data.name, message: data.message }),
  });
  
  revalidateTag('comment');

  return {
    success,
  };
}

Conclusion​

With React 19’s useActionState and useOptimistic hooks, building a form with seamless validation and responsive updates has never been easier. By combining client-side and server-side capabilities, you can create a user experience that feels instantaneous while maintaining data integrity.

Dev Container lets you use a container as a full-featured development environment.

I always remember when a new team member joins. We always give them the documentation on how to set up the development environment. Sometimes, the documentation is out of date and makes the setup a bit tricky, especially for newbies. I’m not saying documentation is a waste of time. There’s definitely a better way to simplify setup and maintenance. It’s not just for new colleges, but for every team member when all the development environments are consistent across the team. That way, we can avoid those pesky “it works on my machine” problems.

That's where dev containers come into play.

How it works​

Workspace files are mounted from the local file system or copied or cloned into the container. Extensions are installed and run inside the container, where they have full access to the tools, platform, and file system. This means that you can seamlessly switch your entire development environment just by connecting to a different container.

Quick demo with frontend project​

Create an new project in Dev Container​

1. Create an new container in vscode -> Dev Containers: New Dev Container.
2. Type Node.js and select:
3. Once the Dev Container is up, we can see a folder .devcontainer with an devcontainer.json file. It defines the development environment.
4. Creating new project via pnpx create-next-app@latest.
5. Now we can push the code to remote via Git.

Work with github​

If you utilize a Git credential manager(Github Cli), your container should already have access to your credentials. Alternatively, if you opt to share your SSH keys, please refer to Sharing Git credentials with your container for further details.

Integrate Dev Contaienr with exsisting project​

It's even easier! You just need to exec Dev Containers: Add Dev Container Configuration Files in vscode. And Reopen project in Dev Container.

Using own Dockerfile​

{
	"name": "Dev Container Demo",
	// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
	// "image": "mcr.microsoft.com/devcontainers/typescript-node:1-22-bookworm"
	"build": {
        // Path is relative to the devcontainer.json file.
        "dockerfile": "Dockerfile"
    }
	// Features to add to the dev container. More info: https://containers.dev/features.
	// "features": {},
	// Use 'forwardPorts' to make a list of ports inside the container available locally.
	// "forwardPorts": [],
	// Use 'postCreateCommand' to run commands after the container is created.
	// "postCreateCommand": "yarn install",
	// Configure tool-specific properties.
	// "customizations": {},
	// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
	// "remoteUser": "root"
}

FROM node:22
RUN npm i -g pnpm

While React can be used without a framework, most applications and websites eventually require solutions for common challenges like bundling, compiling, code-splitting, routing, data fetching, and HTML generation. These issues aren’t unique to React but apply to all UI libraries. Using a framework from the start allows you to begin working with React more efficiently and avoids the need to create your own framework down the line.

Next.js​

Routing​

A file-system based router built on top of Server Components that supports layouts, nested routing, loading states, error handling, and more.

Rendering​

Client-side and Server-side Rendering with Client and Server Components. Further optimized with Static and Dynamic Rendering on the server with Next.js. Streaming on Edge and Node.js runtimes.

Data Fetching​

Simplified data fetching with async/await in Server Components, and an extended fetch API for request memoization, data caching and revalidation.

Styling​

Support for your preferred styling methods, including CSS Modules, Tailwind CSS, and CSS-in-JS

Optimizations​

Image, Fonts, and Script Optimizations to improve your application's Core Web Vitals and User Experience.

TypeScript​

Improved support for TypeScript, with better type checking and more efficient compilation, as well as custom TypeScript Plugin and type checker.

Step 1: Create a Repository on GitHub​

First, go to your GitHub account and create a new repository for your Docusaurus project.

Step 2: scaffold a skeleton Docusaurus website​

npx create-docusaurus@latest my-website classic --typescript

Step 3: Update docusaurus.config.ts​

To ensure your site works on GitHub Pages, update the url and baseUrl fields in the docusaurus.config.ts file:

module.exports = {
  url: 'https://<your-username>.github.io',
  baseUrl: '/<repository-name>/',
};

Step 4: Add the deploy.yml GitHub Action Workflow​

Create a new file at .github/workflows/deploy.yml and add the following content. Refer to official website for the latest yml configuration:

name: Deploy to GitHub Pages

on:
  push:
    branches:
      - main
    # Review gh actions docs if you want to further define triggers, paths, etc
    # https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#on

jobs:
  build:
    name: Build Docusaurus
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 0
      - uses: actions/setup-node@v4
        with:
          node-version: 18
          cache: npm

      - name: Install dependencies
        run: npm ci
      - name: Build website
        run: npm run build

      - name: Upload Build Artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: build

  deploy:
    name: Deploy to GitHub Pages
    needs: build

    # Grant GITHUB_TOKEN the permissions required to make a Pages deployment
    permissions:
      pages: write # to deploy to Pages
      id-token: write # to verify the deployment originates from an appropriate source

    # Deploy to the github-pages environment
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}

    runs-on: ubuntu-latest
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

Step 5: Enable GitHub Actions​

Go to the Settings tab of your repository, navigate to Actions, and enable workflows if they are not already enabled.

Your Docusaurus site is now live on GitHub Pages! Visit https://<your-username>.github.io/<repository-name>/ to see your site in action. With this setup, any changes pushed to the main branch will automatically update the site.

Update​

Implement Search on site​

You need to enbale algolia crawler service for search. You can apply the service via DocSearch program. But you don't have the full permission to manage the api keys (You may need the permissions for Github Action).

official configuration

export default {
  // ...
  themeConfig: {
    // ...
    algolia: {
      // The application ID provided by Algolia
      appId: 'YOUR_APP_ID',

      // Public API key: it is safe to commit it
      apiKey: 'YOUR_SEARCH_API_KEY',

      indexName: 'YOUR_INDEX_NAME',

      // Optional: see doc section below
      contextualSearch: true,

      // Optional: Specify domains where the navigation should occur through window.location instead on history.push. Useful when our Algolia config crawls multiple documentation sites and we want to navigate with window.location.href to them.
      externalUrlRegex: 'external\\.com|domain\\.com',

      // Optional: Replace parts of the item URLs from Algolia. Useful when using the same search index for multiple deployments using a different baseUrl. You can use regexp or string in the `from` param. For example: localhost:3000 vs myCompany.com/docs
      replaceSearchResultPathname: {
        from: '/docs/', // or as RegExp: /\/docs\//
        to: '/',
      },

      // Optional: Algolia search parameters
      searchParameters: {},

      // Optional: path for search page that enabled by default (`false` to disable it)
      searchPagePath: 'search',

      // Optional: whether the insights feature is enabled or not on Docsearch (`false` by default)
      insights: false,

      //... other Algolia params
    },
  },
};

Below steps tell you how to setup a crawler on Algolia:

Step 1 Create an application​

once the app is created, go to datasource page and crawler tab to set domian for crawling. Then add and verify the domain by instruction.

Step 2 Add a crawler​

Step 3 Paste api keys​

Find your apikeys and paste them in docusaurus.config.ts.

You can see the docSearch is functioning in your site.

Github Action for recrawling​

algoliasearch-crawler-github-actions allows you to recreawling you site after each deployment. Add job below to deploy.yml.

  algolia_crawl:
      name: Algolia Recrawl
      needs: deploy
      runs-on: ubuntu-latest
      environment: github-pages
      steps:
        - name: Algolia crawler creation and crawl
          uses: algolia/algoliasearch-crawler-github-actions@v1.0.10
          id: algolia_crawler
          with: # mandatory parameters
            crawler-user-id: ${{ secrets.CRAWLER_USER_ID }}
            crawler-api-key: ${{ secrets.CRAWLER_API_KEY }}
            algolia-app-id: ${{ secrets.ALGOLIA_APP_ID }}
            algolia-api-key: ${{ secrets.ALGOLIA_API_KEY }}
            site-url: 'https://chen-wenyi.github.io/devoops/'
            crawler-name: 'devoops'

Create your secrets in repository settings.

You may find you crawler apikeys here:

For ALGOLIA_API_KEY, you have to create a new key (get error when using admin apikey) and grant proper permissions for it.

Now, push your code to remote and see if it is working!