Introduction and Deploying a Node web app from VSCode to App Service

Hello and welcome. My name is Natalia Vendito and I'm a program manager for JavaScript and Node.js end-to-end developer experience in Azure. This webinar series is for developers wanting to build and deploy their applications to our Azure App Service. Many of you may already be familiar with our powerful service and its functionalities. It allows you to build and deploy mission critical applications that scale together with your requirements and business, but what does this exactly mean and how does it relate to your use case? Let's dive in with a practical example that will help me and my colleague Jason Freeberg show you how you can use web apps capabilities and integrate services and products to build unique solutions. Let us introduce you to our customer Contoso Corporation. Contoso Contoso is a fictitious yet representative multinational business with headquarters in Paris, and they're growing. With so many new hires and so many promotions, employees are relocating and Contoso Human Resources needs a globally distributed application to help them with that. Of course, global distribution is not a problem for Azure Cloud infrastructure extended across more than 60 regions all over the world. We can serve from our global network to reduce latency and improve performance and allow you to scale to meet your needs. Let's now get started with our implementation. If you want to experiment as you follow along and enjoy the series, you can find the repo in the URL displayed on screen and in the description. Please make sure to meet the following prerequisites you need to have Node.js LTS installed with NPM, Git and a GitHub account to complete our gitops deployment and VS code and the following Azure extensions: Azure App Service Extension, Azure Database Extensions and Azure Storage Extensions. To better understand the architecture of the application and the products and services used, you can find a link to the architecture high level diagrams in the description. This is our project structure, and as you can see, this is a standard MVC or model view controller project. We will use vanilla JavaScript at its most basic form. Remember that our customer is the Contoso's Human Resources team and their in-house development team is working on their MVP. We will iterate and add more features in the following videos and you'll learn modules. As we mentioned before, the code repo is already on GitHub. If you follow repo, you will find instructions on how to create all the necessary resources and connect to them. For the sake of brevity, I am already logged into GitHub and Azure in VS code, so I will skip the Azure Account Subscription and Resource Group creation. I will use those to create a new web app with our VS Code Extensions. All I need to do is click on the App Service extension on the sidebar select the subscription, open the Command Palette and choose Azure App Service, Create New Web App. I will have to give a globally unique name for my new web app. I will select a runtime stack and Node.js version. Select a pricing tier we will select the F1 or free tier for now. And wait a few moments while all their resources are provisioned. You will have real-time information on what this system is doing at all times on the bottom right corner. You can also see the output in the terminal. Once the app is created, you can view the output or deploy it. Let's click on Deploy. We can deploy directly from a folder in our IDE. Amazing. The deployment was successful and now we can browse the web site. Wonderful. But we don't have any listings because to upload listings we would need a database in blob storage for the images we will add those later. Now let's go to the Azure Portal NCR Webapp. This is great. The application was deployed, but it's not connected to our GitHub repo. Let's configure our CI/CD pipeline by going to the deployment center under deployment. Now we can select the source and the organization. We select the repo and the branch. Let's make sure it is visible on screen this will create our workflow configuration file. We can preview the file over here or we can save it. Saving it will set up a GitHub Action Build and deployment pipeline and it's done. The build provider is now GitHub actions. We have created, built and deployed to Azure a Node.js application in minutes. Remember, you can find all repos with the sample code visiting our Azure samples in the repo URL displayed on screen and in the description let's meet again soon to create a database and storage account so we can finally add some listings.

Channel: Microsoft Azure

Views: 44,357

Keywords: Node, Github, Github Actions, VSCode, App Service, web apps, Microsoft, Azure, Microsoft Azure, Node web app, Natalia Vendito, JavaScript, end-to-end developer experience, Azure App Services, Azure Cloud Infrastructure

Id: P4vt-OmUM8E

Length: 6min 53sec (413 seconds)

Published: Tue May 31 2022