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 going to 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,
Jimmy's Internet Marketing Business Blog 