Deploying an Express.js API to Azure Using GitHub Copilot for Azure: A Step-by-Step Guide

Table of Contents

1. Introduction
2. Prerequisites
3. Step 1: Setting Up the Express.js API with TypeScript
4. Step 2: Installing GitHub Copilot for Azure Extension
5. Step 3: Configuring Azure Resources with GitHub Copilot for Azure
6. Step 4: Deploying the API to Azure
7. Step 5: Verifying the Deployment
8. Conclusion

Introduction

Deploying web applications to the cloud has become an essential skill for developers. Azure provides a robust platform for hosting applications, and with the GitHub Copilot for Azure Extension in Visual Studio Code (VS Code), you can get AI-assisted guidance throughout the deployment process.

In this guide, we'll deploy an Express.js API written in TypeScript to Azure App Service using GitHub Copilot for Azure. We'll leverage the AI capabilities to simplify steps, get quick answers, and automate commands directly from our IDE.

Prerequisites

Before we begin, make sure you have the following installed and set up:

• Azure Account: Sign up for a free Azure account, or Azure for students to get $100 azure credit.
• GitHub Account: You'll need a GitHub account to use GitHub Copilot.
• GitHub Copilot Chat: Signup for a 30-day free with GitHub Copilot
• GitHub Copilot for Azure Extension: Install it from the VS Code Marketplace.
• Node.js and npm: Download and install Node.js if you haven't already.
• Visual Studio Code: Download VS Code.

Step 1: Setting Up the Express.js API with TypeScript

First, we'll set up a simple Express.js API using TypeScript.

1. Initialize the Project

Create a new directory for your project and navigate into it:

mkdir my-express-api
cd my-express-api

Initialize a new Node.js project with default settings:

npm init -y

 

2. Install Dependencies

Install the necessary dependencies for Express, TypeScript, and other tools:

npm install express  dotenv
npm install --save-dev typescript /node /express rimraf tsx

 

3. Configure TypeScript

Create a tsconfig.json file in the root of your project with the following content:

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "es6",
    "rootDir": "./src",
    "outDir": "./dist",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "skipLibCheck": true,
  },
  "exclude": [
    "node_modules",
    "dist"
  ],
  "include": [
    "src"
  ]
}

 

4. Create the Project Structure

Create the following directory structure:

my-express-api/
├── src/
│   └── server.ts
├── .env
├── package-lock.json
├── package.json
├── tsconfig.json

 

5. Create the Server File

Create a server.ts file inside the src directory with the following content:

import express, { Request, Response, Application } from 'express';
import dotenv from 'dotenv';

dotenv.config();

const port = process.env.PORT as string;

const app: Application = express();


app.get('/', (req: Request, res: Response) => {
    res.send(`server running on port: ${port}`);
});

app.get('/users', (req: Request, res: Response) => {
    res.status(200).json(
        [{ id: 1, name: 'John Doe' }, { id: 2, name: 'Jane Doe' }, { id: 3, name: 'John Smith' }]
    );

});

app.listen(port, () => {
    console.log(`Server is running on http://localhost:${port}`);
});

 

6. Configure Environment Variables

Create a .env file in the root of your project with the following content:

PORT=8080

 

7. Update package.json Scripts

Update the scripts section in your package.json to include the following:

"scripts": {
  "dev": "tsx watch src/server.ts",
  "build": "rimraf dist && tsc",
  "start": "node dist/server.js"
},

This sets up scripts to run your application in development and production modes.

8. Create a .gitignore File

Create a .gitignore file in the root of your project with the following content:

node_modules
dist
coverage
.env

This ensures that sensitive information and unnecessary files are not committed to your repository.

9. Run the Development Server

Start the development server using the following command:

npm run dev

Visit http://localhost:3000/ in your browser. You should see the message "Server running on port: 3000". Test the /users endpoint by visiting http://localhost:3000/users to see a list of users in JSON format.

10. Build and Start the Production Server

To build and start the production server, run:

npm run build
npm start

This will compile your TypeScript code to JavaScript and run it using Node.js.

Step 2: Installing GitHub Copilot for Azure Extension

Now, let's set up GitHub Copilot for Azure in VS Code.

1. Install the Extensions

• Open VS Code.
• Go to the Extensions view (Ctrl+Shift+X or Cmd+Shift+X on Mac).
• Search for GitHub Copilot for Azure and Install.

 

 

• Search for GitHub Copilot, click Install, GitHub Copilot will give us a chat interface to query.

 

 

• Search for Azure Resources, click install.

 

 

2. Sign In to GitHub and Azure

• In VS Code, click on the Accounts icon in the Activity Bar.
• Sign in to your GitHub account.

 

 

• Search Azure Resources and install.
• Sign in to your Azure account via Azure Resources extension.

 

 

• After a successful login, you should see your subscription.

 

Step 3: Provisioning Azure Resources with GitHub Copilot for Azure

Now that your Express.js API is set up, it’s time to configure the Azure resources needed to deploy your app. Instead of manually searching through Azure documentation or setting up services manually, we’ll use GitHub Copilot for Azure to guide us through the process directly from VS Code.

1. To open your Copilot chat interface use (CTRL + ALT + I) or

 

 

azure will reference to GitHub Copilot for Azure extension.

2. Initialize Your Azure Resources with AZD
   Start by initializing the Azure resources required for your application. Open the terminal in VS Code and ask GitHub Copilot for Azure to help you set up the necessary resources.
   For example, you can prompt Copilot with:
   “azure where will I deploy my express.js api, walk me through the process and services I need to provision?”
3. You will be required to sign in, click the sign in button

 

 

4. Going back to the response provided.

 

 

5. Let’s create an Azure App Service via VSCode:

“azure How do I Create an Azure App Service via VSCode?”

 

 

6. Let’s install Azure Tools Service Extension

 

 

• Select "Sign in to Azure..." and complete the authentication process.

 

 

• Type Azure App Service: Create New Web App...Advanced.

 

 

 

• If this pops out, choose your subscription, I will go with Visual Studio Enterprise Subscription.

 

 

• provide a globally unique name for your web app.

 

 

• create a resource group ie express-api-unique-demo-rg or select the ones you have

 

 

• Select runtime stack (e.g., Node.js), I’ve chosen Node version 20

 

 

• Select operating system (Linux or Windows), I’ve chosen Linux.

 

 

• Select location to deploy your app. I’ve chosen North Europe.

 

 

• Select an App Service plan, I’ve to create a new one. Give a name to your service plan

 

 

• Select a pricing tier, I’ve chosen Basic B1

 

 

• You can create an Application Insights for your app

 

 

• Give it a unique name

 

 

• After provisioning, check the Azure console to watch real time messages of the whole provisioning process

 

 

• Using the extension we installed, we can confirm our provisioned app in App services, by clicking the Azure Icon.

 

 

Step 4: Deploy the Express.js app

• If we go back to our previous prompt, we can confirm we are done with Create an azure App Service, lets deploy the express.js app

 

 

• Right-click the created Web App in the Azure App Service explorer in Visual Studio Code.

 

 

• Select Deploy to Web App and choose the root folder of your Express.js app.

 

 

• Confirm deploy

 

 

• Check the Azure console to see real-time logs

 

 

• Click browse website to view your deployed API

 

 

Step 5: Verifying the Deployment

• You can confirm your deployment via your domain name “https://express-api-unique-demo.azurewebsites.net/users”

 

 

• You can also confirm your files

 

 

• You can ask how to securely add env variables and follow these instruction

 

Conclusion

Deploying your Express.js API to Azure might initially seem intimidating, but as we've demonstrated in this guide, GitHub Copilot for Azure simplifies the entire process, making cloud deployment accessible even for those new to it. By leveraging the power of GitHub Copilot within Visual Studio Code, you can efficiently set up your TypeScript-based Express.js application, configure necessary Azure resources, and deploy your API with ease.

Throughout this step-by-step journey, we've covered everything from initializing your project and configuring TypeScript to provisioning Azure App Services and verifying your deployment. GitHub Copilot not only provides intelligent code suggestions but also assists in automating tasks and navigating Azure's extensive ecosystem, significantly reducing the time and effort required to get your API up and running in the cloud.

Here are a few key takeaways:

• Streamlined Setup: With GitHub Copilot's guidance, setting up your development environment and configuring your Express.js API becomes a straightforward process.
• Efficient Resource Provisioning: Automating the provisioning of Azure resources ensures that your deployment environment is correctly configured, scalable, and secure.
• Seamless Deployment: Deploying your application directly from VS Code simplifies the workflow, allowing you to focus on building features rather than managing infrastructure.
• Verification and Monitoring: Ensuring your API is live and functioning correctly is crucial, and GitHub Copilot aids in quickly verifying deployments and monitoring application performance.

As you continue to develop and scale your applications, the integration of AI-assisted tools like GitHub Copilot for Azure can enhance your productivity and streamline complex tasks. Azure's robust platform combined with intelligent development tools empowers you to build, deploy, and manage applications with confidence and efficiency.

Thank you for following along with this guide. We hope it has demystified the process of deploying an Express.js API to Azure and inspired you to explore further possibilities in cloud development. Happy coding and successful deployments!

Read more

• Get started with GitHub Copilot for Azure Preview
• Getting started with Azure App Service