Skip to content

Commit d393198

Browse files
WirelessLifeWirelessLife
authored
Merge pull request #228 from RayPops/fix/module2-codespaces-consistency
docs: Update Module 2 to use GitHub Codespaces consistently
2 parents f440e2f + a73a713 commit d393198

File tree

1 file changed

+140
-59
lines changed

1 file changed

+140
-59
lines changed

‎Using-GitHub-Copilot-for-Azure-to-Deploy-to-Cloud/02-Build-and-deploy-your-application-with-GitHub-Copilot-for-Azure.md‎

Lines changed: 140 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,118 +1,199 @@
11
# Build and deploy your application with GitHub Copilot for Azure and Azure MCP
22

3-
This module is a continuation of module 1 and provides a step-by-step guide on using GitHub Copilot for Azure and Azure MCP to create and deploy a new website in Azure.
3+
This module is a continuation of Module 1 and provides a step-by-step guide on using GitHub Copilot for Azure and Azure MCP to create and deploy a new website in Azure.
44

55
It highlights an approach to seamlessly integrating the extensions and their tools into your development and deployment workflow.
66

7+
- **Who is this for**: Developers, DevOps Engineers, and Cloud Architects.
8+
- **What you'll learn**: How to use GitHub Copilot for Azure to scaffold and deploy a Flask application.
9+
- **What you'll build**: A Python Flask website deployed to Azure using the Azure Developer CLI (`azd`).
10+
- **Estimated time**: 30-45 minutes (excluding deployment wait time)
11+
712
## Prerequisites
813

9-
Completion of [Module 1 - Getting Started to use GitHub Copilot for Azure](https://github.com/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming/blob/main/09-Using-GitHub-Copilot-for-Azure-to-Deploy-to-Cloud/01-Getting-Started-with-GitHub-Copilot-for-Azure.md)
14+
- Completion of [Module 1 - Getting Started with GitHub Copilot for Azure](./01-Getting-Started-with-GitHub-Copilot-for-Azure.md)
15+
- Your Codespace from Module 1 should still be running
16+
- Azure authentication completed in Module 1
17+
18+
## 📚 Prerequisite Reading
19+
20+
- [What is the Azure Developer CLI?](https://learn.microsoft.com/azure/developer/azure-developer-cli/overview)
21+
- [Azure App Service overview](https://learn.microsoft.com/azure/app-service/overview)
22+
23+
---
24+
25+
## 💪🏽 Exercise: Create and Deploy a Website Using GitHub Copilot for Azure
26+
27+
### 🛠 Step 1: Set Up Your Project Directory
28+
29+
> **Note:** These instructions assume you're continuing in the same GitHub Codespace from Module 1. If your Codespace has stopped, restart it using the button below.
30+
31+
[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming)
32+
33+
1. In Visual Studio Code (within your Codespace), open the integrated terminal by selecting **View** > **Terminal** or pressing `` Ctrl+` ``.
34+
35+
2. Create a new directory for your Flask project and navigate into it:
1036

11-
## Create and deploy a website by using GitHub Copilot for Azure and Azure MCP
37+
```bash
38+
mkdir -p ~/flask-azure-app && cd ~/flask-azure-app
39+
```
40+
41+
3. Verify you're in the correct directory:
42+
43+
```bash
44+
pwd
45+
```
46+
47+
You should see output similar to: `/home/codespace/flask-azure-app`
1248
13-
1. Create a new folder on your local computer where you can create a local clone of a GitHub repository.
14-
1. In VS Code click **File**, then **Open Folder**.
15-
1. In the **Open Folder** dialogue box, click **New Folder**, give the folder a name, select it, then click **Select Folder**.
49+
4. Open this new folder in VS Code using the Explorer:
50+
1. In the **Activity Bar** (left side), select the **Explorer** icon (top icon, looks like two files).
51+
2. Click **Open Folder**.
52+
3. Navigate to `/home/codespace/flask-azure-app` and select it.
53+
4. VS Code will ask if you trust the authors of this folder—select **Yes, I trust the authors**.
1654
17-
1. VS Code will ask you **Do you trust the authors of the files in this folder?**
18-
1. click the **Yes, I trust the authors**.
55+
> **Tip:** Alternatively, you can use **File** > **Open Folder** from the menu bar.
1956
20-
1. In Visual Studio Code, select **View** > **Terminal**. On the terminal pane, go to the new folder.
57+
---
2158
22-
1. On the status bar, select the **Chat** (GitHub) icon to open the chat pane.
59+
### ✍️ Step 2: Start a Conversation with GitHub Copilot
2360
24-
1. Start a new chat session by selecting the plus icon (**+**) on the pane's title bar.
61+
1. Select the **Chat** icon in the **title bar** (top of the VS Code window, near the search field) to open the GitHub Copilot Chat pane.
62+
63+
2. Start a new chat session by selecting the plus icon (**+**) on the pane's title bar.
2564

2665
![Screenshot that shows the GitHub Copilot chat pane](https://github.com/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming/blob/main/images/mod2-CopilotChat.png "Start a new chat session")
2766

28-
1. In the chat text box, type the following prompt. Then select **Send** (paper airplane icon) or select Enter on your keyboard.
67+
3. Ensure you're in **Agent** mode and the model is set to **Claude Sonnet 4** or **GPT-5**.
2968
30-
```prompt
31-
Help me create a simple Flask website using Python and deploy it to Azure
32-
```
69+
4. In the chat text box, enter the following prompt and press **Enter**:
3370
34-
> **IMPORTANT**
35-
The exact wording of the response is different each time Copilot answers, due to how large language models generate responses.
71+
```prompt
72+
Help me create a simple Flask website using Python and deploy it to Azure
73+
```
3674
37-
After a moment, Copilot may suggest starting with an `azd` template or may start building the application from scratch.
75+
> **Important:** The exact wording of responses varies each time due to how large language models generate text. Your conversation may differ slightly from the examples shown.
3876
39-
Just Remember that the Large Language Model will understand what you tell it. Therefore, just have the conversation with it.
77+
5. After a moment, Copilot will suggest an approach—typically starting with an `azd` template or building the application from scratch. Both approaches are valid.
4078
41-
1. If the response provides a command that begins with `azd init` in a code fence and Copilot doesn't offer to run the command for you, hover over the code fence to reveal a small pop-up action menu.
79+
**Remember:** GitHub Copilot understands natural language. If something isn't clear, just ask follow-up questions conversationally.
4280

43-
![Screenshot that shows the GitHub Copilot chat pane](https://github.com/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming/blob/main/images/mod2-CopilotChat-4.png "Screenshot that shows a pop-up menu with an option to insert a code-fenced command into the Visual Studio Code terminal.")
81+
---
4482

45-
Select **Insert into Terminal** to insert the command into the terminal.
83+
### 🔍 Step 3: Understand the Azure Developer CLI Commands
4684

47-
![Screenshot that shows the GitHub Copilot chat pane](https://github.com/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming/blob/main/images/mod2-CopilotChat-5.png "Screenshot that shows the Visual Studio Code terminal after insertion of a code-fenced command.")
85+
Before running any commands, it's best practice to understand what they do.
4886
49-
1. Before you run the `azd init` command or allow Copilot to run it for you, you might have questions about how it affects your local computer and your Azure subscription.
87+
1. If Copilot suggests a command starting with `azd init`, ask about it first:
5088
51-
Use the following prompt:
89+
```prompt
90+
Before I execute azd init, what does it do?
91+
```
5292
53-
```prompt
54-
Before I execute azd init, what does it do?
55-
```
93+
![Screenshot showing explanation of azd init](https://github.com/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming/blob/main/images/mod2-CopilotChat-6.png "Screenshot that shows a response from GitHub Copilot for Azure with an explanation of what the initialization command does.")
5694
57-
You might see a response that resembles the following screenshot.
95+
2. Learn about the resources that will be created:
5896
59-
![Screenshot that shows the GitHub Copilot chat pane](https://github.com/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming/blob/main/images/mod2-CopilotChat-6.png "Screenshot that shows a response from GitHub Copilot for Azure with an explanation of what the initialization command does.")
97+
```prompt
98+
What resources are created with this template?
99+
```
60100
61-
1. Use the following prompt to learn more about the `azd` template:
101+
![Screenshot showing resources explanation](https://github.com/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming/blob/main/images/mod2-CopilotChat-7.png "Screenshot that shows a response from GitHub Copilot for Azure with an explanation of the resources created by the suggested template.")
62102
63-
```prompt
64-
What resources are created with this template?
65-
```
103+
3. Ask any clarifying questions about Azure services:
66104
67-
You might see a response that resembles the following screenshot.
105+
```prompt
106+
What is the purpose of a virtual network?
107+
```
68108
69-
![Screenshot that shows the GitHub Copilot chat pane](https://github.com/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming/blob/main/images/mod2-CopilotChat-7.png "Screenshot that shows a response from GitHub Copilot for Azure with an explanation of the resources created by the suggested template.")
109+
![Screenshot showing virtual network explanation](https://github.com/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming/blob/main/images/mod2-CopilotChat-8.png "Screenshot that shows a response from GitHub Copilot for Azure with an explanation of what a virtual network is.")
70110
71-
1. Ask questions about the services that the template uses with a prompt like:
111+
---
72112
73-
```prompt
74-
What is the purpose of a virtual network?
75-
```
113+
### 🚀 Step 4: Initialize and Deploy Your Application
76114
77-
You might see a response that resembles the following screenshot.
115+
1. **Run the `azd init` command** when you're ready. If the command appears in a code fence in the chat, hover over it to reveal the action menu and select **Insert into Terminal**, then run it.
78116

79-
![Screenshot that shows the GitHub Copilot chat pane](https://github.com/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming/blob/main/images/mod2-CopilotChat-8.png "Screenshot that shows a response from GitHub Copilot for Azure with an explanation of what a virtual network is.")
117+
![Screenshot showing insert into terminal option](https://github.com/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming/blob/main/images/mod2-CopilotChat-4.png "Screenshot that shows a pop-up menu with an option to insert a code-fenced command into the Visual Studio Code terminal.")
80118

81-
1. When you're satisfied, run the `azd init` command. Answer its prompts. If you're unsure what to answer for a prompt, ask Copilot for help.
119+
![Screenshot showing command in terminal](https://github.com/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming/blob/main/images/mod2-CopilotChat-5.png "Screenshot that shows the Visual Studio Code terminal after insertion of a code-fenced command.")
82120

83-
1. Before you can continue, you must authenticate the `azd` tool by running in the terminal, the following command:
121+
2. **Authenticate with Azure** (if not already authenticated from Module 1):
84122

85-
```cmd
123+
```bash
86124
azd auth login
87125
```
88126

89-
1. This will open a browser that will require you to authenticate to Azure. Select the same credentials as before.
127+
- A browser window will open for authentication.
128+
- Use the same credentials from Module 1.
129+
- Return to VS Code after successful authentication.
90130

91-
1. Once the new project is initialized and you've authenticated to Azure, use the `azd up` command to deploy the application to your subscription. In the terminal, run the command according to the instructions in the original prompt's reply or let Copilot run it for you if prompted.
131+
3. **Deploy your application** using the `azd up` command:
92132

93-
```
133+
```bash
94134
azd up
95135
```
96136

97-
1. The `azd up` command asks for information about your subscription, where to deploy the resources, and more.
137+
4. The `azd up` command will prompt you for:
138+
- **Subscription**: Select your Azure subscription
139+
- **Location**: Choose a region (recommended: **Canada Central** or a region close to you)
140+
141+
> **Need help choosing?** Ask Copilot:
142+
> ```prompt
143+
> azd up is asking me what location I want to deploy the website into. How should I respond?
144+
> ```
145+
146+
![Screenshot showing location guidance](https://github.com/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming/blob/main/images/mod2-CopilotChat-9.png "Screenshot that shows a response from GitHub Copilot for Azure with an answer that describes what the Azure locations are and how to choose one.")
147+
148+
---
149+
150+
### ⏳ Step 5: Wait for Deployment (or Continue Learning)
151+
152+
Deployment typically takes **20-40 minutes** depending on the template and selected region.
98153

99-
If you're uncertain how to answer, you can ask Copilot for help. For example, you might ask:
154+
While waiting, you have two options:
155+
156+
- **Option A**: Continue to [Module 3 - Get Answers to Your Questions about Azure Services and Resources](./03-Get-Answers-to-your-Questions-about-Azure-Services-and-Resources.md)
157+
- **Option B**: Monitor the deployment progress in your terminal
158+
159+
---
160+
161+
### 🔧 Troubleshooting
162+
163+
If `azd up` encounters an error:
164+
165+
1. Copy the error message from the terminal.
166+
2. Use the **paperclip icon** at the bottom left of the chat pane to attach the terminal output.
167+
3. Ask Copilot for help:
100168

101169
```prompt
102-
azd up is asking me what location I want to deploy the website into. How should I respond?
170+
I received this error during deployment. How can I resolve it?
103171
```
104172

105-
You might see a response that resembles the following screenshot.
173+
> **Tip:** GitHub Copilot for Azure doesn't automatically see terminal output. Always attach or paste error messages for accurate troubleshooting assistance.
174+
175+
---
176+
177+
### ✅ Conclusion
178+
179+
Congratulations! 🎉 You've successfully used GitHub Copilot for Azure to:
180+
181+
- Create a new Flask application project
182+
- Understand the Azure resources required for deployment
183+
- Deploy your application to Azure using the Azure Developer CLI
184+
185+
Your Flask website is now running in Azure! Once deployment completes, `azd up` will display the URL where your application is accessible.
106186

107-
![Screenshot that shows the GitHub Copilot chat pane](https://github.com/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming/blob/main/images/mod2-CopilotChat-9.png "Screenshot that shows a response from GitHub Copilot for Azure with an answer that describes what the Azure locations are and how to choose one.")
187+
---
108188

109-
5. Continue to answer prompts from `azd up`. Ask Copilot more questions as needed.
189+
## 📖 Additional Resources
110190

111-
1. When asked the location select **Canada Central**.
191+
- [Azure Developer CLI documentation](https://learn.microsoft.com/azure/developer/azure-developer-cli/)
192+
- [Flask documentation](https://flask.palletsprojects.com/)
193+
- [Azure App Service documentation](https://learn.microsoft.com/azure/app-service/)
112194

113-
Depending on the `azd` template that you're deploying and the location that you selected, the template might take 20 to 40 minutes (or more) to deploy. But we can Move on to [Module 3](https://github.com/microsoft/Mastering-GitHub-Copilot-for-Paired-Programming/blob/main/09-Using-GitHub-Copilot-for-Azure-to-Deploy-to-Cloud/03-Get-Answers-to-your-Questions-about-Azure-Services-and-Resources.md) while it completes
195+
---
114196

115-
1. If `azd up` experiences an error, ask Copilot about the error and how you can resolve it.
197+
## ➡️ Next Steps
116198

117-
> **TIP**
118-
> For an easy way to attach the last terminal command results, use the paperclip icon at the bottom left of the chat pane. GitHub Copilot for Azure doesn't know the terminal command results unless they are copy/pasted or attached via the paperclip.
199+
Continue to [Module 3 - Get Answers to Your Questions about Azure Services and Resources](./03-Get-Answers-to-your-Questions-about-Azure-Services-and-Resources.md)

0 commit comments

Comments
 (0)