Skip to content

Latest commit

 

History

History
173 lines (122 loc) · 6.84 KB

04-dotnet.md

File metadata and controls

173 lines (122 loc) · 6.84 KB

04: .NET Migration from JavaScript

Scenario

Contoso is a company that sells products for various outdoor activities. A marketing department of Contoso would like to launch a micro social media website to promote their products for existing and potential customers.

They already have a frontend app written in JavaScript, more specifically in React. However, all of sudden, they sent a new requirements to redevelop the frontend app using .NET, especially in Blazor.

Now, as a .NET developer, you should migrate the existing React app to Blazor. You've got very little knowledge of JavaScript and React, by the way.

Prerequisites

Refer to the README doc for preparation.

Getting Started

Check GitHub Copilot Agent Mode

  1. Click the GitHub Copilot icon on the top of GitHub Codespace or VS Code and open GitHub Copilot window.

    Open GitHub Copilot Chat

  2. If you're asked to login or sign up, do it. It's free of charge.

  3. Make sure you're using GitHub Copilot Agent Mode.

    GitHub Copilot Agent Mode

  4. Select model to either GPT-4.1 or Claude Sonnet 4.

  5. Make sure that you've configured MCP Servers.

Prepare Custom Instructions

  1. Set the environment variable of $REPOSITORY_ROOT.

    # bash/zsh
REPOSITORY_ROOT=$(git rev-parse --show-toplevel)
    # PowerShell
$REPOSITORY_ROOT = git rev-parse --show-toplevel

  2. Copy custom instructions.

    # bash/zsh
cp -r $REPOSITORY_ROOT/docs/custom-instructions/dotnet/. \
      $REPOSITORY_ROOT/.github/
    # PowerShell
Copy-Item -Path $REPOSITORY_ROOT/docs/custom-instructions/dotnet/* `
          -Destination $REPOSITORY_ROOT/.github/ -Recurse -Force

Prepare Blazor Web App Project

  1. Make sure that you're using GitHub Copilot Agent Mode with the model of Claude Sonnet 4 or GPT-4.1.

  2. Make sure that the context7 MCP server is up and running.

  3. Use prompt like below to scaffold a Blazor web app project.

    I'd like to scaffold a Blazor web app. Follow the instructions below.

- Use context7.
- Your working directory is `dotnet`.
- Identify all the steps first, which you're going to do.
- Show me the list of .NET projects related to Blazor and ask me to choose.
- Generate a Blazor project.
- Use the project name of `Contoso.BlazorApp`.
- Update `launchSettings.json` to change the port number of `3031` for HTTP, `43031` for HTTPS.
- Create a solution, `ContosoWebApp`, and add the Blazor project into this solution.
- Build the Blazor app and verify if the app is built properly.
- Run this Blazor app and verify if the app is running properly.
- If either building or running the app fails, analyze the issues and fix them.

  4. Click the the keep button image button of GitHub Copilot to take the changes.

Run Spring Boot Backend App

  1. Make sure that the Spring Boot backend app is up and running.

    Run the Spring Boot backend API, which is located at the `java` directory.

    NOTE: You may use the complete/java sample app instead.

  2. If you use GitHub Codespaces, make sure that the port number 8080 is set to public instead of private. Otherwise, you'll get the 401 error when accessing from the frontend app.

Migrate React Web App

  1. Make sure that you're using GitHub Copilot Agent Mode with the model of Claude Sonnet 4 or GPT-4.1.

  2. Make sure that the context7 MCP server is up and running.

  3. Use prompt like below to migrate React to Blazor.

    Now, we're migrating the existing React-based web app to Blazor web app. Follow the instructions below for the migration.

- Use context7.
- The existing React application is located at `javascript`.
- Your working directory is `dotnet/Contoso.BlazorApp`.
- Identify all the steps first, which you're going to do.
- There's a backend API app running on `http://localhost:8080`.
- Analyze the application structure of the existing React app.
- Migrate all the React components to Blazor ones. Both corresponding components should be as exactly close to each other as possible.
- Migrate all necessary CSS elements from React to Blazor.
- While migrating JavaScript elements from React to Blazor, maximize using Blazor's native features as much as possible. If you have to use JavaScript, use Blazor's JSInterop features.
- If necessary, add NuGet packages that are compatible with .NET 9.

  4. Once migration is over, use prompt like below to verify the migration result.

    I'd like to build the Blazor app. Follow the instructions.

- Use context7.
- Build the Blazor app and verify if the app is built properly.
- If building the app fails, analyze the issues and fix them.

    NOTE:

    • Until the build succeeds, iterate this step.
    • If the build keeps failing, check out the error messages and ask them to GitHub Copilot Agent to figure them out.

  5. Click the the keep button image button of GitHub Copilot to take the changes.

  6. Once the build succeeds, use prompt like below to verify the migration result.

    I'd like to run the Blazor app. Follow the instructions.

- Use context7.
- Run this Blazor app and verify if the app is running properly.
- Ignore backend API app connection error at this stage.
- If running the app fails, analyze the issues and fix them.

Verify Blazor Frontend App

  1. Make sure that the Spring Boot backend app is up and running.

    Run the Spring Boot backend API, which is located at the `java` directory.

  2. Click the the keep button image button of GitHub Copilot to take the changes.

  3. Verify if it's built properly or not.

    Run the Blazor app and verify if the app is properly running.

If app running fails, analyze the issues and fix them.

  4. Open a web browser and navigate to http://localhost:3031.

  5. Verify if both frontend and backend apps are running properly.

  6. Click the the keep button image button of GitHub Copilot to take the changes.

OK. You've completed the ".NET" step. Let's move onto STEP 05: Containerization.