Skip to content

Latest commit

 

History

History
94 lines (54 loc) · 3.28 KB

QuickStart.md

File metadata and controls

94 lines (54 loc) · 3.28 KB
Raw

image

QuickStart

This will walk you through creating a Crazor App Project using Blazor.

Prerequisites

Install Prerequisite tools

Creating a new project service for hosting card applications

Cards are part of card applications and they are hosted in a ASP.NET web service. There are two easy ways of creating a new hosting service.

Option 1: Creating from Visual Studio

Create a Crazor App Server project

image-20240621213410771

Option 2: Creating from CLI

NOTE: you can alternatively create the project from the cli by using

dotnet new crazorserver

Add a dev tunnel for local development

For bots to work with Teams and other apps they need a public addressable endpoint. Dev tunnels does exactly that, so we will create a dev tunnel with the following options:

  • TunnelType=Persistant
  • Access=Public

image-20240621213541534

Run the project. You will be launched a on page like https://jx4wclpb-7232.usw2.devtunnels.ms/. You will have an error, but that's OK. We just want to get the url for your project. Copy that and save it off someplace.

Configure tunnel

Click on your devtunnel settings to manage the tunnel:

image-20240621213914448

Make sure that Use Tunnnel Domain is turned on:

image-20240621214005832

(ALTERNATIVE) Create a public tunnel using ngrok.io

ngrok http --host-header=preserve https://localhost:7232

The URL it creates will look something like this: https://1a52-50-35-77-214.ngrok-free.app

Register your bot

In the same folder as your csproj, run RegisterBot tool to create a development bot called MyBot-Dev.

registerbot --name MyBot-Dev --endpoint https://jx4wclpb-7232.usw2.devtunnels.ms/

NOTE: By convention we use {BOTNNAME}-Dev because when we publish to production we want to register {BOTNAME} as the production bot

Run project

You should see this:

image-20240621214750538

And if you click on the card you should see this:

image-20240621214806458

Next Steps

More information

  • Card Views - How to define views with CardView with Blazor
  • Card Apps - How to create a CardApp class to define state and operations against state.
  • Card Routing - Information on customizing urls to support deep linking into cards
  • Authentication - Authenticating users and Authorizing access to create per-user secure views
  • Writing Unit tests - Writing unit tests for your cards.
  • Components (Advanced) - How to define reusable components via Blazor Components

image