semantic-kernel

Copilot Chat Web App

This learning sample is for educational purposes only and is not recommended for production deployments.

See ../README.md for complete instructions on setting up and running the application.

How to use HTTPS for local development

If you want to run Copilot Chat with HTTPS, you need to create a certificate and sign it with a Certificate Authority (CA) that is trusted locally by your device and browser. You have a couple of options on how to do this:

(Recommended) Reusuing the dotnet dev-certs generated for the webapi app

Note: the dotnet dev-certs command does not have a built-in option to generate a certificate for a specific IP address. It only generates a cert for localhost. If you need to use a specific IP address, use one of the two options below.
mkcert: a simple tool for making locally-trusted development certificates; requires no configuration
Azure KeyVault certificates: you’ll need to create the certificate in Key Vault using Portal, Azure CLI, or Azure PowerShell and then download the cert and key files to use in step 2.

Step 1: Creating the certificate

Option 1: Reusuing the dotnet dev-certs generated for the webapi app.

Open a terminal and navigate to samples/apps/copilot-chat-app/webapi.
Run
```
 dotnet dev-certs https -ep ../webapp/local-cert.crt --no-password --trust --format PEM
```
This will create a certificate for localhost, trust it, and export it to a PEM file including the private key.

Note: The --no-password flag specifies that a password will not be used for the key on export. This is intended for testing use only.
The certificate and key are now exported as a pair of files in PEM format at the root of this directory (/webapp):
- local-cert.crt
- local-cert.key

Option 2: Using mkcert

From an elevated shell, run

### Windows

On Windows, use Chocolatey
```
 choco install mkcert
```
### MacOS

On macOS, use Homebrew
```
 brew install mkcert
```
For installation on Linux, other operating systems, and advanced topics (e.g., supported root stores), see the official mkcert installation guide.
Create a new local certificate authority (CA) by running
```
 mkcert -install
```
Create a new certificate with all hostnames you wish to run the app on.

It is recommend you do this at the /webapp directory level.

Run
```
 mkcert localhost 127.0.0.1 example.test
```
You should see an output that looks like this:
```
 Created a new certificate valid for the following names 📜
     - "localhost"
     - "127.0.0.1"
     - "example.test"

 The certificate is at "./localhost+1.pem" and the key at "./localhost+1-key.pem" ✅

 It will expire on 1 September 2025
```
Warning: (from the developers of mkcert) the rootCA-key.pem file that mkcert automatically generates gives complete power to intercept secure requests from your machine. Do not share it.

Step 2: Configuring Copilot Chat to use the certificate

In the webapp .env file, uncomment the following lines and populate with your respective certificate and key files generated in the step above.

 ...
 # To enable HTTPS, uncomment the following lines
 HTTPS="true"
 # Replace with your locally-trusted cert file
 SSL_CRT_FILE=local-cert.crt
 # Replace with your locally-trusted cert key
 SSL_KEY_FILE=local-cert.key

In the webapi appsettings.json file, find the "AllowedOrigins" section, and add the URLs (with ports!) that you’ll be running the apps on with https prefixed. For instance, the "AllowedOrigins" section should look something like:
```
 ...
 // CORS
 "AllowedOrigins": [
     "http://localhost:3000",
     "https://localhost:3000",
     "https://127.0.0.1:3000",
 ],
 ...
```
Add the same URLs (with ports!) as single-page application (SPA) redirect URIs to your Azure Active Directory (AAD) application registration. This can be done in the Azure Portal.
Restart the webapi and webapp - Copilot Chat should be now running locally with HTTPS.

Authentication

This sample uses the Microsoft Authentication Library (MSAL) for React to authenticate users. Learn more about it here: https://learn.microsoft.com/en-us/azure/active-directory/develop/tutorial-v2-react.

Debug the web app

Aside from debugging within browsers, you can launch a debug session in Visual Studio.

Open the webapp folder (i.e./samples/apps/copilot-chat-app/webapp) in Visual Studio Code.
Go to “Run and Debug” and select on the “Launch Edge against localhost”.

Go here to learn more about debugging client-code in Visual Studio Code.

Serve a production build

By default, we run the app using yarn start, which starts a local development server. This enables some additional development behaviors and debuggings features, such as React.StrictMode, which will render the app twice to find bugs caused by impure rendering.

If you want to serve a production build of the webapp (as static files) without any development-specific features,

Run
```
 yarn build
```
This will generate an optimized and minified production-ready build of the app in the /build directory.
Once the build is complete, and you have the /build directory, run
```
 yarn serve
```
This will start the server and serve the production build. You should see an output similar to:
```
 Serving!
 - Local:    http://localhost:3000
 - Network:  http://192.168.0.100:3000
```

This site is open source. Improve this page.