Azure Tips and Tricks

TIP

🔥 Help shape the future of Azure Tips and Tricks by telling what you'd like for us to write about here (opens new window).

💡 Learn more : GitHub Codespaces overview (opens new window).

📺 Watch the video : How to work with your Azure apps in GitHub Codespaces (opens new window).

# How to work with your Azure apps in GitHub Codespaces

# An Integrated Development Environment in the cloud

You can now use GitHub Codespaces (opens new window) to develop your applications. This means that you can open a browser and start coding. Or you can use VS Code (opens new window) on your local machine and connect that to GitHub Codespaces. This is a great way to develop a resource-intensive application on a simple device. You run VS Code on a laptop or tablet without much power and GitHub Codespaces does the heavy lifting in the cloud.

In this post, we'll use GitHub Codespaces to develop a simple Azure Function (opens new window) in a browser.

# Prerequisites

If you want to follow along, you'll need the following:

# Developing an Azure Function in GitHub Codespaces

You use GitHub Codespaces with GitHub repositories. So let's start by creating a repository.

  1. Go to github.com (opens new window) and log into your account
  2. Change the URL to github.com/new (opens new window) to start creating a new repository
    1. Enter a Name for the repository
    2. Check the "Add a README file" box
    3. Click "Create repository". This will take you to the landing page of the new repository
  3. In the repository, you'll see a button that says "<> Code". Click on it and select the Codespaces tab
  4. Click "New codespace". This will create a GitHub Codespace and open it in a browser window

(Create a GitHub Codespace)

You are now connected to GitHub Codespaces in your browser. It looks and feels exactly like VS Code, and it has the same capabilities. By default, it has features like IntelliCode (opens new window) enabled, and you can install any VS Code extension that you want.

If you switch back to GitHub, you can see and manage the codespace from the codespaces menu in your profile.

(Manage codespaces in GitHub)

Let's create an Azure Function and run it.

  1. In the GitHub Codespace, go to the Extensions tab
  2. Search for the Azure Functions extension.
  3. Install the official Azure Functions extension (opens new window) and click reload to reload the environment
  4. We just need one more thing: the Azure Functions Core Tooling. Open the Terminal (Menu > Terminal > New Terminal)
  5. Install the Azure Functions Core tooling by executing the following command in the Terminal:
npm i -g azure-functions-core-tools@4 --unsafe-perm true
1
  1. Next, open the Command Palette (Menu > View > Command Palette)
  2. In the Command Palette, type Azure Functions: Create New Project
    1. Select the repository folder in which to store the files for the project
    2. Select C#
    3. Pick the latest version of .NET
    4. Select HttpTrigger
    5. Fill in a Name for the Function
    6. And enter a name for the Namespace of the Function
    7. Select Anonymous for the AccessRights and press Enter. This creates a default HttpTrigger Azure Function

(Azure Function in GitHub Codespace)

  1. Leave the out-of-the-box code and Run and Debug menu
  2. Click on the start button to run the Function and start debugging. The terminal will show the build progress and will show the URL of the Function
    1. The Azure Function is reachable through a URL and its port is forwarded to your local machine automatically. You can see this in the Remote Explorer
  3. Click on the Azure Function URL in the terminal to open it in your browser. This uses port forwarding technology to call the Function

(Azure Function called from local machine)

# Conclusion

GitHub Codespaces (opens new window) provides a full-fledged development environment in the cloud that you can access from your browser, or from your local VS Code (opens new window). It can replace your development computer and enables you to do compute-intensive work from any device that has a browser. Go and check it out!

←
Tip 365 - How to debug and run code locally with Bridge to Kubernetes for VS Code →