 Hi, I'm Matt. I'm a Program Manager on the Azure Tools for Visual Studio Code team and I'd like to welcome you to Microsoft Connect. I'd like to show you some stuff today that my team has been working on to help you be more productive, building your apps locally, and then extend that productivity to the Cloud as you deploy your apps and adopt Azure App Service and Cosmos DB. We'll start with this app here, which is an Express app built with React and uses a Mongo database on the back end. I'll start this app in debugging mode just to give you an idea of what it looks like. As you can see, it's a sticker app with no stickers. This will let customers come and browse and order stickers and customize them. But again, there's no data, so let's populate our database with some data. So the first thing that I want to show you is the Cosmos DB extension, that I'll actually let you work with your databases locally as well as on Azure. In this case, I'm connected to a Mongo database that's running locally on my machine, and this app is configured to use a stickers database on local hosts. So let's go ahead and create the database that we need in the collection, which is just called stickers. There we go. Now we have a database in a collection with no data. So I have some initial data that we can use. I'll copy this entire array of sticker objects, and I'll open up what's called a scrapbook. So this is a fairly unique concept to the Cosmos extension. What a scrapbook is is a way to write your Mongo queries and get Intellisense for the database that you're actively connected to. I'm already connected to the stickers database, but to do that, what you would do is click on the Connect button, choose my attached account, my local database, and the database we just connected to or we just created. Again, you will get some Intellisense in here. So when I type DB, you'll see the stickers collection is automatically recognized as available. We're going to do an insert mini. I'll paste the array of sticker objects. I just took from my initial data and we'll execute this command. You can see 15 stickers were added. We can expand the collection and actually see those documents within the collection. I can actually click on these documents and make changes to them directly in the editor. Saving will upload the changes to database. But for now, let's just go back to our app and make sure that the data works. Okay, cool. So this is what it's supposed to look like, and it's working on our local machine, and let's go ahead and deploy that to Azure. To do that, I'm going to use the Azure App Service Extension, which is our platform as a service offering that lets you deploy your applications and scale them as the demand arises. This all starts with the blue up arrow, which is the deploy button. I'll create a new app. Let's give it a name and I'll pick my node version. So what this is going to do, it's going to call out to the Azure APIs to create an app service plan, which is basically a VM where the app instance will run. You can have multiple app instances running on an app service plan. It'll also create a resource group, which is a logical grouping of Azure resources that you can use to manage various pieces, and it will create the app instance itself where our app will be deployed. Now that the app is created, I'm prompted to choose the directory that I want to deploy to the app instance. We'll skip this part for now, but if you wanted to, you can actually let the app service extension remember which app was deployed to this particular app instance so that in the future, you aren't prompted for which app you want to deploy to. So at this point, it's going to package up the app. Since we're in the default configuration, it's just going to use a zip archive. It's going to take all of your code, put it in a zip archive, push it over to the Azure API where Azure is going to take over, extract all of the code, run MPM install in the root of the project, and then start the application. So now that our app has been deployed, we get a notification letting us know that we can connect to the log stream or we can just go ahead and browse to the site. So let's do that and get an idea of how it's working. Again, we have the same problem with no data. But in this case, I've actually created a database out on Cosmos that we can connect to. To do that, let's go into the App Service extension here, expand the node for the app, and choose connections. This will let us connect to a MongoDB instance that's running on Cosmos out on Azure. Choose Connect. I'll pick from my subscription. Again, I've already created a database for this, and it's going to automatically create the environment variable that we need on Azure to connect to the database. I'll use the default value of Mongo URL because that's what this app is looking for. Now that it's connected, we can actually reveal this database in the Explorer, which will take us directly to the Cosmos extension. We can expand this and the same functionality that we had on the local environment, we have again here in the production environment on Azure. I can do something like make a change here. When I click Save, prompted to upload, and we'll refresh the page, take a second for our environment to be reset to use the correct environment variable. Now our stickers are loading. You saw that I made a quick edit to the markdown sticker, and that did show up right here in the production version running on Azure. Now we have our app running. It's connected to the database, but deploying from the editor is a little strange. So what we're going to do is we're going to set this up to automatically deploy from our GitHub repository, and we'll do that from the deployment node. I'm prompted automatically to connect to a GitHub repository. I'll click that, choose my username, pick my sticker app project, and we'll choose the master branch. So what this will do is set up all the hooks out on GitHub to automatically pick up pushes to the master branch. This also includes things like pull requests that are merged into master, and then anytime that happens, the code will automatically be synchronized over to Azure, and it'll be running just kind of automatically as we develop our app. This step takes a little bit of time because it is actually setting up the hooks and then it's going to do a sync or deploy and get all of your assets out on the worker and running. Now the application is connected to the GitHub repo. You can see the commits that have been deployed to this app before. At any point in time, I can actually right-click these and redeploy to revert changes if I find that they aren't quite working as expected. So we have our app now configured to deploy automatically, but the app service extension will let you do other things as well such as manage the state of the app. You can browse directly to the website, stop, start, restart. You can actually set up your continuous delivery here as well. Your next step would be to set up continuous integration on your GitHub repository using something like Azure Pipelines and this will run your lint and unit test tasks as you validate PRs and you do your code reviews. Once you merge those items into master, they will automatically be deployed to app service. For more information or to run through these things on your own, you're welcome to visit us at any of these resources. Visit our docs page. There are specific tutorials that walk through the steps that I just showed you and also please reach out to us if you have feedback about any of these features. I'd like to thank you for your time. Enjoy the rest of Connect and happy coding.