Skip to content

Workshop Challenge: Changing the Logo in the App

One of the easiest and most fun changes you can make to the app is updating the logo! Follow these step-by-step instructions to replace the current logo with your own or use the provided ContosoImg logo.

  1. Create or use a new logo (e.g contosoImg logo) in src/app/src/Assets/.
  2. Save the logo as an image file (e.g., logo.png).
  3. Ensure the image has a reasonable size (e.g., 100x100 pixels) for better display.
  4. Place the logo file in the following folder: src/app/src/Assets/

Step 2: Update the Logo Component

  1. Open the App.tsx file located at:

    Text Only
    1
    src/App/src/App.tsx

  2. Comment out the original import on line 24:

TSX
1
// import { AppLogo } from "./components/Svg/Svg";
  1. Add a new import statement for your logo image:
TSX
1
import AppLogo from "./Assets/contosoimg/ContosoImg.png";

  1. Locate the current logo implementation (around line 309):

    tsx <AppLogo />

  2. Comment out the existing logo component and replace it with the image tag:

TSX
1
2
// <AppLogo />
<img src={AppLogo} alt="Logo" style={{ width: '30px' }} />

Step 3: Run the App

  1. Go to the Azure Portal.
  2. In the search bar, type the name of the Resource Group you created during Challenge 1.
  3. Within the resource group, look for the API App Service ending in -api.
  4. In the App Service, navigate to Settings > Environment variables. Azure Portal Settings > Configuration
  5. Locate the following environment variables:
  6. AZURE_AI_SEARCH_API_KEY
  7. AZURE_OPENAI_API_KEY
  8. Copy their values and paste them into your local \workshop\docs\workshop\.env.sample file: AZURE_AI_SEARCH_API_KEY=your-key-from-portal AZURE_OPENAI_API_KEY=your-other-key-from-portal
  9. Rename the .env.sample file to .env
  10. Open a terminal or command prompt.
  11. Navigate to the project directory where start.cmd is located:

Bash
1
   cd src/
10. Make sure your Python virtual environment is activated, as done in the Challenge 1 deployment steps.

  1. Start the application:

Bash
1
 ./start.cmd
12. Two terminal windows will open — one for the backend and one for the frontend.

Once the app starts, you should see your new logo!