>> 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 in Cosmos DB. We'll start with this app here which is an Express app built with React and uses a Mongo database on the backend. I'll start this app in debugging mode just to give you an idea of what it looks like. 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 database is 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 localhost. So let's go ahead and create the database that we need and the collection which is just called stickers. There we go now we have a database and 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 scrap book because 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 accounts, my local database, and the database we just connected to or we just created. Again, you will get some intelliSense on here so when I type Db, you'll see the stickers collection is automatically recognized as available and 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. As you can see, 15 stickers were added, we can expand the collection and actually see those collections or those documents within the collection, and 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 will 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 the app will be deployed. Now that the app is created, I'm prompted to choose the directory that I want to deploy it 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 gonna take all of your code. Put it in the zip archive push it over to the Azure API where Azure is going to take over extract all of the code, run NPM install in the root of the project, and then start the application. So now that our app has been deployed we get 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 or in Azure. Choose connect or 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. So, I can do something like make a change here. When I click "Save" prompt it to upload and refresh the page and 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. Okay. So now we have our app running it's connected to the database but deploying from the editor's 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 deployments 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 automatically as we develop our app. This step takes a little bit of time because it is actually setting up the hooks and that it's going to do a sync or deploy, and get all of your all of your assets out on the worker and running. Okay 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 tests tasks as you validate PR's and you do your code reviews. Once you merge those items into Master they'll 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 walks through the steps that I just showed you. 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.
No comments:
Post a Comment