How to build Radix dAPP UI with dot net core 7.0

Developers Scrypto
1

This is a tutorial for enabing TypeScript and integrating Radix dApp Toolkit with dot net core 7.0 on Windows and Visual Studio 2022

Introduction
In this tutorial we will see how to do the follwing:

  1. Add TypeScript support on visual studio 2022 dot net core 7.0 project
  2. Add npm support to a project (ASP.NET Core)
  3. Using WebPack instead of microsoft tool to convert *.ts files to *.js files that web browsers can understand natively with no work-arounds
  4. Install WebPack Task Runner extension on visual studio to automatically run WebPack conversion task before each build to the project.
  5. Add Radix support and Install Radix Connect Button
    ====================================================================================
  6. Add TypeScript support on visual studio 2022 dot net core 7.0 project
    follow the following steps to create a TypeScript-enabled project on dot net core:
  • Create a new dot net core 7.0 MVC project
  • Install the Nuget Package “Microsoft.TypeScript.MSBuild”
  • Right-click the project node and choose Add > New Item. Choose the TypeScript JSON Configuration File, and then click Add
  • Open tsconfig.json and replace the default code with the following code:
{
  "compileOnSave": true,
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5","outDir": "dist",
    "skipLibCheck": true,
    "module": "CommonJS",
    "lib": [
      "es2015",
      "es5",
      "dom"
    ]
  },
  "include": [
    "scripts/**/*"
  ],
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

====================================================================================
2. Add npm support to a project (ASP.NET Core)

  • Install latest long-term-support (LTS) version of node.js from the following URL:
    Download | Node.js
  • Right-click the solution and choose Manage NuGet packages. Search for npm and choose Install to install npm.
  • To add the package.json file, right-click the project in Solution Explorer and choose Add > New Item (or press Ctrl + SHIFT + A). Use the search box to find the npm file, choose the npm Configuration File, use the default name, and click Add.
    ====================================================================================
  1. Using WebPack instead of microsoft tool to convert *.ts files to *.js files that web browsers can understand natively with no work-arounds
  • Include the following npm packages in devDependencies section of package.json:
  "devDependencies": {
    "typescript": "5.1.3",
    "ts-loader": "9.4.3",
    "webpack": "5.86.0",
    "webpack-cli": "5.1.4"
  }
  • Add a file with the name webpack.config.js to the project files and the following contents into it:
const path = require('path');

module.exports = {
    entry: {
        app: './Scripts/app'
    },
    mode: 'production',
    optimization: {
        minimize: false,
        splitChunks: {
            chunks: 'all',
            minSize: 0,
            name: 'shared'
        }
    },
    devServer: {
        contentBase: ".",
        host: "localhost",
        port: 7052
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/
            }
        ]
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js']
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'wwwroot/js'),
        library: 'sample',
        libraryTarget: 'umd'
    }
};
  • Make sure to modify the devserver section to reflect your actual project settings (simply use the URL you see when you run the project)
    ====================================================================================
  1. Install WebPack Task Runner extension on visual studio to automatically run WebPack conversion task before each build to the project
  • Install WebPack Task Runner extension on visual studio from the following URL:
    WebPack Task Runner - Visual Studio Marketplace
  • Right-click on the file webpack.config.js and select “Task Runner Explorer”
  • On Task Runner Explorer, Right-click the node “Run => Run - Development”, choose “Bindings” and from the sub-menu click on Before Build
    ====================================================================================
  1. Add Radix support and Install Radix Connect Button
  • Include the following npm packages in devDependencies section of package.json:
  "devDependencies": {
    "@radixdlt/radix-dapp-toolkit": "0.2.0",
    "@radixdlt/wallet-sdk": "0.8.1",
    "@radixdlt/connect-button": "0.12.0"
  }
  • Save the package.json file
  • Wait for the packages to finish installing (See the background tasks icon on bottom-left of the screen to check progress), if the installation did not start automatically, Right-click on the package.json file and select “Restore Packages” and
  • In Solution Explorer, right-click the project node and choose Add > New Folder. Use the name scripts for the new folder.
  • Right-click the scripts folder and choose Add > New Item. Choose the TypeScript File, type the name app.ts for the filename, and then click Add
  • Open app.ts and add the following TypeScript code (the code is taken from the GumballMachine example, modify as per your needs):
import { RadixDappToolkit } from '@radixdlt/radix-dapp-toolkit'

const dAppId = 'account_tdx_c_1pyu3svm9a63wlv6qyjuns98qjsnus0pzan68mjq2hatqejq9fr'

const rdt = RadixDappToolkit(
    { dAppDefinitionAddress: dAppId, dAppName: 'GumballMachine' },
    (requestData) => {
        requestData({
            accounts: { quantifier: 'atLeast', quantity: 1 },
        }).map(({ data: { accounts } }) => {
            // add accounts to dApp application state
            console.log("account data: ", accounts)
            document.getElementById('accountName').innerText = accounts[0].label
            document.getElementById('accountAddress').innerText = accounts[0].address
            //accountAddress = accounts[0].address
        })
    },
    {
        networkId: 12, // 12 is for RCnet 01 for Mainnet
        onDisconnect: () => {
            // clear your application state
        },
        onInit: ({ accounts }) => {
            // set your initial application state
            console.log("onInit accounts: ", accounts)
            if (accounts.length > 0) {
                document.getElementById('accountName').innerText = accounts[0].label
                document.getElementById('accountAddress').innerText = accounts[0].address
                //accountAddress = accounts[0].address
            }
        },
    }
)
console.log("dApp Toolkit: ", rdt)
  • in _Layout.cshtml file Add the following script reference before the call to @RenderSectionAsync(“Scripts”, required: false):
<script type="module" src="~/js/shared.js" asp-append-version="true"></script>
<script type="module" src="~/js/app.js" asp-append-version="true"></script>
  • In your desired location within the page, add the followig code for Radix Connect Button:
<radix-connect-button />
  • Run your application and check your Radix connect button

Now you are all set, Have fun

====================================================================================
For information about the underlying logic of the steps above or more details about the subjects discussed in this tutorial, please check the following references:
- Create an ASP.NET Core app with TypeScript - Visual Studio (Windows) | Microsoft Learn
- Manage npm packages - Visual Studio (Windows) | Microsoft Learn
- Add TypeScript to an ASP.NET Core project | by Darren Neimke | Medium
- WebPack Task Runner - Visual Studio Marketplace

3 Likes