Building Python Web Applications with Visual Studio Code Docker and Azure - BRK3020

Building Python Web Applications with Visual Studio Code Docker and Azure - BRK3020

Show Video

All. Right welcome everyone so, my, name is Dan Taylor I'm a principal PM manager for our Python developer tools at Microsoft, and I'm. Really excited to be here this is one of my favorite things to do I spend. Hours and hours playing. With a bunch of technology, and putting it together using all the latest features and our tools and then I get to come here for, an hour and show you all the highlights so. Speaking. Of Technology some. Of the technologies, that we'll be using, today in this talk. Of. Course is Python. Which. Is incredibly. Popular. 41.7%. Of developers, use it and, we'll. Be doing a bunch of web development so. 52%. Of Python developers use. Python for web development, now also we'll do a little bit of machine learning because, that's driving a lot of the use of Python. As well and a lot of people actually use these two, technologies. Together a lot of people maybe start by a building machine learning algorithm and then they want to host it and. Then an API and they can use Python for that or maybe you're building a web application and you. Want to add a little bit of machine learning to it so we'll be mixing a little bit of this in terms of web frameworks, we'll be using both flask, and Django. And. Those, are both kind, of very, prominent technologies. To use for building backends, and then, we'll do be doing a little bit of react because. Surprisingly. If you need to build a front-end for your web application. You. Need to use JavaScript and, technologies. Like react, angular, and view are increasingly, popular and, then. I will, will include a little bit of Postgres in. Our application, it's, the most popular database used by Python developers, and. We'll do a little bit of virtual environments, so, if you're not familiar with virtual environments, they're a way to isolate, your packages, and dependencies, very. Popular. Tool. Used by Python, developers, and then, also. Docker a, very, common technology, used by Python, developers actually docker was first announced. In a lightning talk at PyCon, so it kind of grew out of the Python community so. We're gonna be taming all of this technology using. My. Favorite tool Visual Studio code, and if, you're not familiar with Visual Studio code, it's. A free cross-platform and, open source at. From Microsoft it's fast and lightweight it's, got great, extensions. And. Support, for multiple languages and actually. It's got built-in support for JavaScript, and typescript. With, things like intellisense, debugging, and source control and then, the, team I work on we build, the Python extension, which gives you all those great rich capabilities. But. For Python developers, and the, Python extensions, actually, it. Adds you, know rich support for many of the things you need like intellisense, debugging, linting, testing and refactoring, it's got support for virtual environments, which we mentioned before and. Other environments, like condit pipe npm poetry, nice, to see poetry just added to that list recently, support. For formatting tools like black auto pep 8 and Yap, linters. Like pi lint and flake eight and this, is the most popular, extension, on the visual studio code marketplace, and. Actually. I'm very, happy. To. See recently the visual studio code is now the top free tool used. By Python, developers, and the PSFS, 2018, developer, survey so we're, very excited about what we're doing with Python and I'm even more excited about, the new Visual Studio code remote development, features that. We just announced this past week and. That's that's really what's, why, I'm including a lot of containers in this talk because we've announced these new, features. That allow you to work as a developer, in workspaces. And environments, that you couldn't work before by. Separating, visual, studio codes UI from, all the extensions in the backend of the visual studio, code development my experience, allows, you to develop inside, of containers, in windows, subsystem for Linux or over remote SSH connections, and get a development, experience that's just like, your local development experience. So. We'll be spending a lot of time with that today now, putting all this together what will be building is a tweeter. Application, the. First part of the talk will be building a sentiment, analysis API from scratch using. Some Python libraries in flask and, we're going to deploy that to add your web apps and. Then we're gonna add a full stack Django, rest framework with, react, application. That talks to a Postgres database and we're going to deploy that to Azure web apps for containers and then. In. The last few minutes of the talk we'll just go briefly, through how to set up an azure, pipelines, deployment, pipeline to take this code from github and. Push. It up to Azure. So, the.

First Part like I said we'll do a little bit of a hello world getting started with vs code and build. That API and deploy it then, we'll go, through the new remote features, using dev containers, and we'll. Open an existing def, container for, the that, I have clone from github and we'll deploy that and then finally like I said setting, up that CI CD running some tests and deploying a docker image. Alright. So. Let's. Get started with the first part and that's enough talking for me and I like to jump right into the demo that show you how you can get started building. A sentiment analysis, API in, flask. And I like to get started right here from the command prompt so, assuming, I've got vs code installed. This. Is how I like to develop it usually adds code to the command line here I will. Just call make, a new folder for our sentiment, API. And, I. Really hope I can remember all the code but. The tools will help me, so. There's nothing here so to get started I can, type. Code, space, dot that will open a visual, studio code from the command line and open up this folder in Visual. Studio code now if you didn't open it from the command line you can open it a folder. Here by clicking open folder, or or, file open folder it's generally good to work inside, of a folder with vs code because. We can store various settings about your workspace, understanding. Of where your imports, are and things like that rather than just working with one file at a time so really recommend this. Way to get started now the, first time you get started with vs code you can just click the, Python. Link there to get a link to the python extension, and. So you, can install that from the marketplace I already have it installed one. Other thing I want to call out here is that. There's, a good QuickStart here and the extension, just to show you how to get get. Going and set up your virtual environment, pro, tip click on the Python version in the status bar a lot of people don't know that but it's very useful and and, things like that and it also links off to our tutorial, if you want to go more in depth in exploring, all the features. But. You're watching my talk so this is the, tutorial for you alright, so. To get started with Python I'm gonna open a new file we'll just call this hello, dot py and when I write when I do that as soon as I open a Python file it, activates, the Python extension. So, if, you're not seeing Python features in vs code you have to open a Python file first because otherwise we don't know that you want to work with Python, once. I activate the Python extension, I'll try and zoom, in a little bit here I'm. I can type prints hello, world I. Can, save that and then right click and say, run. Python file in terminal and that will run. Hello. World, ok. So, that's how you build. Code. With the with, Python and the vs code python extension so. I'm, going to use the, I'm going to start building up my sentiment, analysis, API.

Here And to, do that I need to use the text, blog package, I need to install that text blog package now I could do that by. Going to the command line and saying pip install text, blob but. Then this is going to install it globally and, that might install some dependencies, that other applications, on my machine, might. Have conflicting, versions and things like that so I want to start by creating a virtual environment for, this application which will contain, all my packages, now. To do that I can. Type. I, can, run Python to create a virtual environment and I'm, going to do that using PI - 3 on Windows this. This guarantees I'm running Python 3. So. If, you don't have python on the path by the way you can just type py, and that will give you python so. I'm gonna run pi - 3 -, m which says run, a module, i'm going to run the virtual environment module, called them and then. I'm gonna pass an argument m to, say I want to create that. Environment you so you, can see vs. Code as helpfully said hey do you want to use this virtual environment for your workspace and we can select yes, so. That will then change in the status bar that virtual, environment so that's now the active. Interpreter. Being used by vs code now I mentioned you can click on that if you want to change it you can see I've got tons of different versions, of Python installed, on my machine but. But. Yeah we kind of help you out there now, to activate, this virtual environment in the terminal I can, type M scripts. Activate. And. Then now if I say which PI you can see it's running Python out of this virtual environment. Also. Once I have this activated, if I just create a new terminal we automatically, will activate, run that activate script for you on the command line see if you say which Python, we. Have that so the key there is to. Get this virtual environment selected, in vs code and then you can start doing things like installing. Text. Blob package, that I want to use so. Once I install that text blob package it'll pull down. Some. Of the, packages. That this depends on so this actually is a wrapper over, ltk. Natural language toolkit it's a really nice API that lets us start playing with. Some. Natural. Language things. So. Now. I can import a text. Blob. And. You know what I'm going to actually change that and say from text blob import. Text. Blob you can see I get nice auto, completions, here as I'm writing my. Code and. Let's. Just let's just play with this a little bit so let's create, a new text blob and say, this. Is amazing. And. See. What. That, looks. Like if, I do I, just. Print that out I can see the result so. I. Can, select, this piece of text here and just press shift. Enter and, that will open a new Python, ripple, in. My terminal and, I'll run that piece of code and you can see it says this is amazing, okay. That's. That's cool so now, you can see I. Can. Add in dot sentiment, there I. Can. Run that again and you can see it gives us a polarity, so 1.0 presumably, means, positive. And. If. I change this to say Perl is not great. Let's. Try this okay. So that's that's, negative, sentiment, there okay, got, it so, I think I figured out how to use this sentiment, analysis library now. Let's build a little flask API so I can call. This from an external web server and and be able to submit. Submit. Some messages to it and get the results back here so let's. Create a new. A flask. App called, app py this is the the default name that you should use for flask, apps otherwise, you have to set up some config, and things like that which we don't want to do and. I'm and I can type out the flask code I do have it memorized but I also want to show you how to use something called snippet, so I have a snippet.

That I've added to my application. Called. Flask app that I just pressed, tab and that creates a new flask app for. Me that's it's only a few lines of code and. You. Can define your snippets, by, going file preferences. User. Snippets, there and. You. Could parameterize them and things like that so I've got this basic flask app define there now. If I want to run this I can say flask you. Know what I probably should install. Flask, before. I try and run it so. I can pip install flask just like I installed the other package. Let's. Give that a go and I. Could, do flask run. Now. If I go, to so. It's running the server on localhost, I can control click this and will open my browser hello, universe alright we're not satisfied with hello world anymore by the way we got a bigger. Okay, so this is working, let's. Go back to our text. Blob package now let's pull some of this code into our flask app so. We want to now. Instead of just taking nothing we can take a message right. So that's how you define a parameter, let's pass that message into, our API and, let's. Move the text blob import to the top. Ship. Tab. Alright. So now. We want this API to, analyze, this. Message, you. Know I copy-paste, a lot of my own code, so. That's just. How I do it so okay let's start by assuming that sentiment, is positive, right. Always assume. Positivity. Unless. We have any data to indicate otherwise so. Let's pass the message to that sentiment, and then. We'll, say if the polarity is less, than zero then. Sentiment. Is negative. All. Right and then let's just return. The. Sentiment, from the API. It's control-c, and rerun it again and now. We, can say, this. Is amazing and. We. Have our sentiment, Alice's API written in flask wonderful. Alright. So. Let's. Go ahead and deploy this API, to Azure so it's available to the world so, we can do that using a, new, feature I've got the azure CLI, installed. Just search as your CLI and install, whatever you find there as long as it comes from a Microsoft website, by. Running easy web app up, -. An I must, build sentiment. So this is the the website it's gonna be hosted on so if I just run that command it'll, take this oops I forgot one thing. Yeah. Terminated - um so I can. First. I need to freeze my requirements, into a requirements, txt, file. So. I run pip freeze and put the output requirements. At txt and that cut that gets all the packages that I've used with their exact version numbers, so. That when. I deploy it. It's. Guaranteed to work so. I'll. Run an easy web app up so this deploys this app - as your web apps, what. It does is it will use. The requirements, set txt, file to figure out which packages, might have depends on on it'll, zip up the code and. Then on the server side it'll. It. Will install the packages found in, the requirements, txt, file and. This. Will just take a minute, and while that's doing that I'm going to. Do. A quick recap of what we. Talked about. So. So, just a quick recap we installed, the Python extension, we created a new file we ran that file in terminal then we use. Shift enter to run the selection in the terminal then, we created a virtual environment and we use snippets to create a flask application just. Some Tippit's on create tips, on using virtual, environments, the instructions, are actually different on Mac, and Windows so. On Windows use PI - 3 on Mac, and Linux use Python, 3, pretty. Soon you'll be able to use Python 3 on Windows if you install Python through the Windows Store so. I'll be looking forward to that and then if you want to install packages into your virtual environment you can use pip install -, our requirements. Txt. And. Then freezing, the package and if you want to get out of the virtual environment run deactivate, now, I used, virtual environment here with. Visual. Studio code we also support, PI NPM, Conda and. Etc, and. Then. We, ran a Zee web app up. So. As. Your web apps this deploy is to add your web apps for Linux if, you want a free, tier.

Of As your web apps you can pass - Scooby, one that will run it on the lowest here so, as, of build, this, is now a GA service, for, Python and you, get one free tier one freebie one instance. From. Your subscription. So. Let, me just pop back here. It's. Taking a moment here to deploy my API. All right let's go okay. It just finished all right I talked a bit too fast this time right. So our, API is just finished it's deployed to msbuild sentiment, as your website's dotnet, and. And. We can see. That comes up here and. So. Here we go this, is amazing and Perl. Is not great you try not to be too harsh okay, awesome. So one thing we want to do before we move on if we want this application to be available. To other applications too cause we want to enable, across. Origin and site calls so. Let's hop over to the portal here and take a look. By, default this app is deployed to this app, service. Linux. Resource, group and. If you're not familiar with what a resource group it's just a folder that contains. Your. Resources and address so you can group related resources, together. In, this case the AZ web app up command has picked a. Default. One and so there's the app that our. App. Is deployed to and, then. To enable cross-origin. Calls we just just, search for cores here and then. We, press Start. It says any website could call this API without getting an error in the browser we'll, hit save and that's. Just gonna save us some time a little bit later. Okay. Now. Let's talk about developing using containers so as I mentioned we. Have the new remote. Containers extension, that allows us to get a great development containerized. Development, environment but why would we want to do that so. There's. A couple of different reasons. If. You think about your getting started steps, at your company if you want to start a new developer, on the team and you. They walk through all the steps on that getting started guide usually, one of their first actions, is to update the getting started guide to fix all the broken instructions, if you have a containerized development, environment you can define all of the things that you need to using your, in.

All The packages, all the tools and things like that and it just minimizes, the amount of time that you spend getting going the. Other thing is that you. Can a, lot of people don't like install, a lot of dependencies on their machine because they might might, cause issues or things like that, um, so containers, can help minimize develop, dependencies, installed on your dev machine and then, for deploying if it works locally it'll, it'll work in production. So. The. Only downside, or the main downside is that tooling, with these environments, can be kind of a challenge your, your codes inside of a container how do I edit that how do I get Intel isense how do I get debugging, and, so that's what we've really solved, with the remote, containers, ability what it does as I mentioned is that your UI runs on your local, machine, there. On the left and then, there's a server that we run inside of the container that. Runs your extensions, it runs it, talks to the file system and it can talk to other containers, that get spun up, alongside. Your, your dev container. And. So this allows you to get a, user. Interface that feels just like you're developing on your local laptop, and so, let's just take the app that we built and. Let's. Just quickly. Rebuild. It inside of a dev container. So. This, is where we left off right we, had our app with our sentiment, analysis API. So. If I want to add a dev container here I can. Forgot. I need to switch over to vias code insiders, for now because this is only available in, the insiders, edition of code code. Insiders is a it's, a separate. Side by side install, of es code it's the Devi Daley development, build this will be available in the stable build in a couple of weeks so. So. In. Here I have the remote containers. Extension. Installed and that gives me this little button, in the bottom left-hand corner that says open remote window, so. I get this menu and I want to create a new dev container so I want to select create container configuration, file and. This allows us to pick from a bunch of templates in, my case I want to select Python, 3. And. Then if. We look over here that creates a bunch of these files here I've got a dev container JSON, I've got a docker file, and. If, I open and this, just does, standard things like it installs our requirements, that txt, into the container so. One thing I want to do on this container before we open it is I want to specify my app port. To be 5,000. Because that's the port my flask application listens. On and, now I can select this and say reopen, this folder in this container and, so that will create, a new instance of Visual Studio code. And. It. Will build that docker container. It. Will it. Will install, the. Vs code remote server it will install the extensions, that are specified in, the dev container dot JSON and then, it will give me a, development. Environment here, so, we can see here that it's running some docker built commands. Give. It a second and. A, lot of the the neat, thing here is that docker is built in a set of layers so. It's. Sort of that build on top of each other this one builds on top of a Python 3 image and then it adds some things in so, if I just make some small tweaks to this container it, doesn't have to rebuild it all from scratch it can use a lot of the cached, layers. There. And. I'm guessing I. Don't. Know what that means. Hopefully. I don't have a docker err. Let's, take a look at what containers, are running on my machine here. Okay. That's. Odd. Okay. That was a. Fluke. All. Right. All. Right so now this is opened inside of this development container now I can see my files but when I'm opening these files I'm not actually editing. These files locally I'm adding them inside the container so. If I select my Python interpreter now, I get python interpreters, that are in /user local, bin Python, etc, etc and. If I open a terminal I get, a terminal, inside, of the container, so if I do LS and all these things so I've got a development environment here, that I can use and if. I. Get. My intellisense, my debugging, and all sorts of things actually comes from within that that container, okay.

So That was kind of a hello world of containers. Let's, move on to something a little bit more complicated so. Just. A quick recap, to. Do this we ran code insiders, dot because this is an insiders we, open the command palette using ctrl shift P and then, we ran the create container configuration, file command we, added port, 5000, and then we reopened, the folder in the container. So. Let's. Switch over to something, a little bit more complicated. That. Is a our, Django, and react container. I lost. My command prompt okay. So. Here I've got a folder that I've cloned from github. This, codes available that's, just a fresh clone and. I'm, gonna open it using code insiders, and. If we take a look this, defines a more complicated development, environment, and to. Work with this environment I don't need anything installed, locally on my machine other, than docker I just need to this, def container so, in this case we're using a docker compose file, which actually defines multiple, containers that we want to start and, if we actually look inside the docker compose file I'll use alt click here to do a nice, side-by-side. Tab, this. Contains. An app container as, well as a database container which. Contains Postgres, and so. This out container. Is. Just reopen there so. Let's reopen this folder in the container and build this development, environment. The. Container, contains, Python, it contains node.js for building, our react front-end and. And. Then the Postgres, database right. So. Again in this case it's running docker compose up to build the container and then, our files will appear momentarily. So. There. We go that was nice and fast so. Again, I'm, working with all. These files on inside. Of the the app container so if I create a new terminal I can. Now, use NPM. I don't have to have node installed on my development machine I could, say npm. Install', which i've actually already done that to save a bit of time but. I can build my front-end by typing NPM run dev. And. So. This, is this is really cool I can. Start. My Django. Web. Server here by saying Python, manage people I. Actually. I can I need to initial if I well, if I start my Django. Web server it'll tell me that there's. An error because I haven't set up my database yet so I can initialize my database by saying python manage py. Migrate. Which will apply. The database, migrations, from my Django application. Django. Is a, has. A ORM. Where, you specify. All of your data as models, and then it creates, a database from that so running the Django migrate, command will then apply. Those those, those, models and create database tables from them and then we can load some initial data here. Initial. Data so, as I'm typing it's it's it's it's, communicating. To, a server inside of the container and then just getting back to, the UI all. The messages so everything, that works in the Python extension, or yes, code automatically, just works here. So. I can now, I can, manage. People I run server, and. So. This an interesting point here this is actually binding to port to, the IP address Which. Because, my codes running inside of the container and that's the IP. Address you want to bind. To if, you're binding to localhost but you also want connections, to be available from external, and. External. Incoming, clients, so, now if we come back here and say localhost, 8,000. We, act, django. Application that, just works i've. Given this to other people on my team and they can just do the follow the same steps and they get the same application, every. Single time, alright. Let's let's add a tweet. Okay. I'll keep saying this is amazing, okay. So, if we added this tweet it didn't work okay why. Didn't it work. Okay. It says i must be logged in well I don't want to login let's see if we can debug.

This A little bit and. See. If we can have, a default user so that we can always play with the application, here for for. For. Demo purposes at least so. To, start debugging I'm going to move over to the debug tab here and. I, want to add a debug configuration. Now this isn't remote debugging this is local debugging, it's just that vs code is running remotely so, this. Is actually very straightforward, so I select add configuration. I'll select. Django. And then, this generates your standard, Django debug configuration I, don't need to modify anything here and. Then let. Me just make sure I've control seed that okay, we. Can click play and that. Will start. The debugger. So now I'm debugging my application. Pretty. Easily and. Let's. Go ahead and set a breakpoint but I need to figure out where to set a breakpoint so. Let's do some code. Navigation, so if I press ctrl P will, allow me to browse, through a lot of the files in my workspace I can type views there. To go to my, my views file I can press pound to see all, of the symbols in my workspace for, example so, if I wanted to find. User. Let's find something with user. Let's. Go there. And. If. You scroll down here we can say this, is where we actually create the create the tweet, if. I want to look at other. Symbols. In this file I can press at which will just let me navigate symbol. Symbol by symbol kind, of through this file one at a time so your some cool, code navigation things we can do, alright. So if. I want to set a breakpoint and, debug this tweak creation I just click put, a little red dot there on the left hand side and. Let's. Try this again click tweet look. At that we hit our breakpoint, so let's. See what we can do here on this user object, so. Let me pop. Open the. Debug. Console, and now, let's start poking, at this this object so I can say self dot. Request. So. I get auto completions, and my debug console as I'm typing here and I can type, expressions, into the into, the debug console and I can expand. Variables and I can see. In. This case the. Is anonymous is true let's, see if we can pick. A default, user that. We want to use let's see if we can get Bob as our, default user so I can write a little expression here to query the database so. I can say user. Dot. Objects. Dot. Filter. First. Name, equals. Bob. And we'll just put dot first and. If I press ENTER there we can see. That. Returned to our user Bob okay so let's let's, see if we can return this user instead. All. Right. Let's. Press stop. Go. Back. Coding. On high resolution is, kind. Of an art by itself all, right so we'll say if user dot. Is anonymous. Then. We, could say user equal user objects. All. Right let's. Go back to the terminal and rerun. That. And. Let's see if we can now, okay. So now we can tweet from our application that's fun. All. Right so as I mentioned earlier I started, a an. NPM. Script. That built our front-end this is actually running in a watch mode so I can I can, go ahead and I can start editing the JavaScript, here, inside the container and get my reactive, Ella / tools so. If I browse, through my files here I can go well. Let's. Just go. To our tweets JSI, did ctrl P there and, let's. See if we can add that, sentiment API into the application. So. I've got a react, component. Here. Called sentiment, that what it does is that, you pass it the text, and. When. This when the component loads it will make an API call to the API we just built and when. It gets the it. Will get back the positive, or negative sentiment, and then, until. It receives a response it'll just show an empty div and then it when it gets a response it will render the did with the sentiment, so. If we go down into our HTML code here.

We. Can just add. This. Sentiment, component. So. I'm getting my react. Auto-completion, here, so it's one of the great things about vs, code is it's got great support for multiple languages and then I can say tweet dot text. Beautiful. Alright press. Save, I can, come in here and I hit refresh and then, the sentiment, API, calls are there and then, let's go back to our our, go. To. Bashing. On Perl okay. So. That's all working that's, cool. Now, let's let's, run some tests, so I've got tests. That I've defined in this application, and my tests up why file if. I want to, configure. Vs code to use these tests I can use, ctrl shift P to run a command and say Python. Configure, tests, these. Tests are built using the PI test framework so I can select PI test and then, they're in the tweeter, folder, so. That will initially, initialize. Tests. Here I get these cool code lenses inside. My application, where I can run an entire test class or I can run individual, ones or debug tests I also, get a new test Explorer that we've recently added two Bs code where. I can see all of my tests in a tree view I can, run all the tests like that or I can run them one at a time and again I'm running all this in, this, containerized. Development, environment. So. I can, be. Like perfectly, productive, here. And. I. Think. The. Main thing alright so that was a quick tour of. Opening. An existing application inside. Of a dev container working. With it and, using a bunch of features so to do that we ran the reopen, folder and container command you get a prompt to do that when vs code opens if there's a dev container folder, and. Then. We opened a new terminal, we installed, we. Our, node modules, built the front-end and then we opened a second terminal and we initialize, their database and ran our server and then. We added a Django debug configuration just, a quick tip if you try. This at home and you're not seeing, Python. Show up just open, a Python file first that will initialize the Python extension, and give you your debug configuration, options. And, then we use the debug console to inspect, some variables, and then, we did a little bit code navigation, with control P and, to. Open files symbols, and and browse, around and. Then. We configured our tests and then once, we configured our tests we could use the test Explorer or code lenses in our, code. All. Right so. Now. That. Was our development, container so something interesting about, the development, container is that your, files are of volume mounted in there so as I'm making changes inside the container they're available outside of the container as well but. When you build a container for production you. Want to just package your you just want to copy your file all in there you want to use a production web server so, we actually need to build a production, version of this application and, so. Let's walk. Through how we want to do that. So. The first thing I want to do is get out of this dev container mode I can, click in the bottom left hand corner and say reopen, folder locally, so, that will exit, Def container and just open this in a normal boring. Desktop. Sort. Of version of the application. And. We'll ignore this for now okay, so. If I open my docker extension. Tab here I can see the. Various containers actually, just want to stop these because they'll be using, the, ports that I want to use so I can right click and say stop and select all containers, so. That'll stop those. So. I've got a docker file here, that that's my dev container now what I want to do is add a docker file to my main workspace. So, that I can build up this production docker, container, that I want to deploy this app in so. To do, that I'm gonna run another command and select, docker. Add docker files to workspace. So. I can never remember all the docker stuff off the top of my head so this helps me get going with a predefined. Template. I'll select Python. My. App listens, on port 8000. So. That will generate a docker file as well as a docker, compose file that I can start with so. Some things I want to do to. This container definition, I want to want to change a few things so. First, of all I want to build. This from. An, image that somebody else has to find on docker hub. So. I've got this image there's. A person. Out there who's created, a really good image. That hosts, an, engine X webserver so.

I'm Getting Auto completions, here this is actually coming from docker hub so I can I can, look up these containers, as a hat without having to leave my developer, tool. So. This. Is an engine X web server. Which. It's. Really fast and efficient it's. Really good at serving static files and it also connects, to the Django application using. This you. WSGI or you whiskey interface. So, I don't actually need to start my application, it. Knows how to find Django in this in, Tanner the. Few. Things I do need to do is configure, a listen, port so I can say I can. Tell the web server to, listen. On port 8000. And. Then. I also want to find. Esthetic, URL where my files will be found and, will. Say tweet or 3. All. I just need to check my notes. Yep. Static. And. Then. For. Django applications, when you deploy them you need to run a command to collect your static files because you can have multiple different applications, and so if you run Python. 3 manage py collect static that, will pull all, of your static files from all the different applications into one static folder that we can serve up which. Will be this folder here. Alright. So one, thing I need to do though as I still need to build, my node front-end, and package it into this container so to, do that I can actually use a multi-stage, builds, so, I can say from so. I can start with, a node image and I. Can run some commands like NPM install I, can. Run. NPM. Run, build which will build my, container. Image and then. The last thing I want to do is actually run. I want. To delete my node modules so I'm not packaging, those up inside the container so I'm just, left. With my static, front-end and. I. Want. To run this inside, of a. Node. Build folder and. I. Want. To add all of my code into a node build folder. So. Down, here what I want to do is I want to copy I want to put the I, want to copy the output, of this, basically. Into my second, stage of the, container basically. As soon as I say from this, docker container, it, throws away everything, that was generated beforehand, so I actually want to copy.

So. We'll say worked your app and I want to say copy and then. From, I get some nice auto completions, from, 0. Into. App so, that will copy the results of. This. Step. Yeah. There, we go so. Hopefully I didn't forget anything there so this is our production container. And. Then if. We go to our compose file. We. Actually wanted to find some environment, variables. So. In. This case we're going to be creating a production, Postgres. Database and, a few other things so we need some secrets, and things like that that our application, uses so. Those, are to, set. Our application, up with that we can use this end sample file here and. Where. We define our database. User so, we can say tweeter, we. Can fill in some things here actually sorry let me just copy paste this into. The. Sample. So. We're, just configuring. From, the command line what, user. Names and passwords we, want to use for our database so these will be used to connect. And create the database so. If. You want an easy-to-remember, password, that passes the password. Requirements of Azure there's a good one for you, and. Then. Here. We go and. So. So. This dead-end file is a standard way to define, environment, variables and actually when I run my application Django, will actually pick this file up and use, it to configure it for a production configuration. So, if I want to create the database I've. Got a script here that I've that I've created that will that, will load this dot end file and create a post rest database, in. In. Azure, using the variables here now I can create the database using, the portal but, this just allows me to create the database and, then. And. Then. Also instantiate. My app using. The. Same credentials. So. That'll go ahead and. Spin. That up. So. So. We've started creating the Postgres database this takes a minute so I'm going to, also. Build my container, at the same time so. Back. To my compose file sorry switch back and forth there I want, to say when I start to container up use that end file that I've created that will configure it to point at the right database and and things like that so.

To Build this container I can right click and say compose. Up. That. Will. Build. The application, and. One. Thing so this will build it with this image name here Python sample Twitter app but I actually want to push this application, up to, a Azure. Container registry that I've created so. That I can deploy it to my web app so to do that I want to update this and say. Python. Demos to adjure CR dot IO which. Is the name of a registry that I've created this. Can be other, it could be docker hub or whatever but this is a private. Container. Registry that I've created. So. One. Second here. And. Just. To show you what that looks like. If. We go back to our Azure portal if we go to our, resource groups and we, open our Python demos account. There's. The container. Registry that I've created so, if. I want to be able to push to this registry, I just need to open my access keys and, copy, the. Secret for that and then I can log. Into this, from. The prompt by typing. Docker. Log in python, demos as your CR dot io and, I've. Already got my credentials saved but there would prompt, you for a password and, then you got indicate. So. I've got a bunch of stuff running in parallel here I'm, creating my Postgres server I'm building, my container and. I always mistyped, that for some reason. Collect. Stetic. All. Right so let's. Right. Click compose, up this, again. So, that will build that container there and. Let's. Check in on our database so, that's still working that's fine. So. Now, I want to push this image. That I've created up, to our Asha container registry, and. I, can see I can use the docker extension, to browse the images that I've created locally, this is the one that I just built there with. Compose, up and. So. I can select this image and select push and, that will push. It up to the container. Registry you. Can see it's already got a version of this cache it's only pushing the you. Know 50 megabytes, or, so, Delta that I've created, here. All. Right this is still running we'll give that a second.

All. Right so. While that's running we can poke. Inside of our container oh. Man. I finished just in time. All. Right. So. This, container is running locally and, I've, got my database created now I need to initialize, that database when I ran this locally I ran manage py migrate. To generate the database tables, I need to do that same thing in Azure but. I need to be running in an environment, that has my environment variables, my passwords. And things like that setup so, if I go to my daugher tab here. I can I can get into this container by, right clicking and saying attach shell, so. When I do that I get a command prompt that's running inside the container, and. And. My, environment environment, variables are mapped in here so now if I run, django. Manage, py migrate. It'll. Now be, generated. Pointing, at the production database now. It gives me this error that says no PG aah comp entry for this host this, just basically means that my IP address needs, to be added to a firewall rule to that production database, my. Script is supposed to do that but I'm a. Tricky, employee, that's connected through a VPN so that's throwing off what. What to Azure thinks my IP address is and so. I can. Browse. My resources, and measure, go to my Python, demos resource group where. I have provision. That database I. Can. Go into my connection, security, and then, I can just update the allow, my IP address rule, to. Use my. IP address but I'm gonna actually add a range here because I happen to know that, my. IP address bounces, around between different values so. I'm just going to add a range of IPs for the the Microsoft subnet, here so. I'll save that. But. Just a pro tip you, can use the error output here to figure out what your real IP address looks like to Azure so. Now that I've said that I can migrate my, database. I can generate, it so it's now applying the, migrations, to that production database. Let's. Give, it a second here and. Once. That finishes I can load some initial data into it. All, right let's take, a look at this local, container here. Running. So now this is running. Locally but it's talking, to the production database that I just initialized, so I'm just checking to make sure that this app works on my local machine before I ship it off to production so it's, working here that's, great, now. I can, deploy. This image, and. Create. A new web application from, it so now. I mentioned I pushed, this image earlier to Azure container, registry I can use the docker extension, to actually browse my. My. Registry, I can, sign, in so, I just click to sign into Azure button here this will be nice and simple, so. I just sign in and then it. Tells me I'm now signed. In and I can close this so when I come back to BS code I can see my Python. Demos registry, that I've created there and Azure. There's. That tweeter, app image that I just published and then, I can right click on this and I can select deploy image to add your app service so. That'll create a new ad wrap service. From. This configured. To use this container image so I want to put it in that Python, demos resource, group we'll, select an existing app. Service, plan. Here which basically just allows me to share one. VM to host multiple multiple, websites and, then. We'll call it a tweeter app. And this build after. The name of the the front-end. So. That's, gonna go ahead and deploy that now one. Thing I still need to do after I create this new web app is, I need to apply. The environment, variables that I have locally, the da 10 file I have is not is not checked in here is just for the local environment if you notice I've actually added it to the git ignore file so I don't accidentally, check. It in when I'm putting typing in passwords in, there so. If I go to my Asscher tab. This. Is added by the azure app service extension I, can. Start, to explore my my Twitter app here and if, I open my application, settings these are the environment, variables that are on my application, I can. Right-click and, I can upload. The local settings and I can select that same 10 file I've been using to imply. My environment variables so, this will take all of the configuration. And all the settings they have we'll apply it to that web, so. It's got all the right passwords, and things like that, and then I can browse. To this website, here and it will. Give. It a second and it it'll, load up. So. When I when I browse to this website it's actually pulling down, that.

Container, It takes a little bit of time the very first time actually that was quite quick well. I love being pleasantly surprised so there's my application, my react, app connects, to my Postgres, database talking, to my sentiment analysis api it's. All here and I can again. Say this, is amazing. Cool. And it's coming, from Bob that, was the change we just made all. Right that was a lot of stuff, let's do a quick recap to catch up on where we are so we, use the da. 10 files to soar our settings. In secrets this is local only you. Should delete, this file when you're done and, then in our settings. Production, py, file I didn't, actually show this but in. There we configure to use the. Production. Database and the way we we actually told it. To use a production databases, there's an environment variable that says that tells Django, which configuration, to run in so, we set an actual the end file set a production, environment variable, then, we use this create DB script. To create the database. And. Then we created. The production. Docker file that. Used, multistage, builds, to build the note app and then build. The Python, app. On, top of that once. We define those files we do to compose up to build it and then. We. Attached into the container locally, and ran our, database migrations, from the production container locally, to initialize, the production. Database. And. Then. Missing. The step we're actually right click and deployed from add your Web Apps it may be out, of order and the slides yeah. So. We created a container registry, and. Then we did a docker login to get access to that and then. We. Set the image name in the, compose, DMO so, that we, prefix, the image name with the container registry so that when we push it knows where to deploy it to. And. Then. From there we right clicked on the container registry and said deploy image. To a perhaps, service and we browsed and, well we didn't have to wait that long for it to come up so that's good so in. The last few minutes I want to talk about how we set up CI CD for this application with Azure pipelines, so if. You're not familiar with Azure DevOps, it's. Actually a suite, of services for. Building. For. For developer. Tools. Right so there's a few different things as azure artifacts, which actually. Gives you a private, packaged. Feed so if you're building Python, packages and distributing them internally, you, can. You. Can use as your artifacts - well you can use it for both a private and a public feed, and, then there's Azure, pipelines which gives you hosted builds, so. We're going to be using that to deploy the app and, there's also as your repos for source control and then boards for work, and issue tracking now. Just a quick note on Azure, pipelines if you're using an open source project, you. Get 10 parallel builds, for free with open source projects, and you, get Linux Mac and Windows build machines so. This. Has actually been. Very. Useful to the open source community. Popular. Python projects, like Python. Itself is actually using Azure pipelines, for CI pandas. You may have heard of pandas and a, bunch of other Python. Packages have been using Azure pipelines because, of this free hosted builds and you can connect, it to deploy from. Github or as your repos and you. Can define your build steps using. Yellow files that are in your. Repo. So. I've got a couple of those set, up here let's. Take a look. So. From. My. Application. Here, I've got two yellow files that define my. Pipeline I've got a CI pipeline. Here. This to find some tests that I want to run so, remember those tests, that I had set up in my test explorer earlier. So. This just basically defines a set of steps that I want to take in my pipeline, it. Says trigger master, so this use, whenever a code, change is committed to the, master. Branch of my repo it'll, trigger this continuous. Integration pipeline, to come on this. Is a matrix, that says I want to test with both Python 3.6, and 3.7, and then.

We, Have a set of steps the first thing is this used Python version step. Which. Allows, us to pull in that whatever Python version we want to use with Azure pipelines so if we want to use Python 2 or Python 3 this. Build tasks here we'll pull down the right version of Python and then, it can run scripts so this script here can install, our, requirements. That txt, and then it installs the PI, test in a PI test as your pipelines plugin that was actually meant made by Anthony. Shah I was a member of the Python community, and. Then finally it runs PI, test there. And. Then, so, let's actually just jump over to our build pipeline so I'm in Deborah comm, you can anyone can go to dev calm, and and that's how you get started you can create one of these things if. You go to pipelines, and builds, you. Can get started in creating a new pipeline just by selecting new and going new build pipeline, and then, that, will allow you to select. A. Github, repo so I can click on github. And. That. Will just, give it one second here. So. It's got my repository here here's that tweeter, app repo. And, so you can click, here to generate a ml template if you don't already have one and this will actually check in the yamo file into your github repo so that's nice and convenient in. This case I'll select existing as your pipeline zmo file and then, I can select the CI. Pipeline, that I have here, I've. Already set that up so I'm just going to imagine. I click to continue here and then. If I go back to my build. You can see there's the Twitter app tests and so. This runs whenever I, check. In a code change you can see there's the Python 3.6, and the 3.7. Version of that and, I can actually view my test output here by going to the tests and I can see it ran six tests, they all passed and I, can look at all the the passed tests, here by by filtering changing the filter. When. I click on oh there. We go I can see the each, test that ran and how long it took so, if this pipeline succeeds, then, I've got another pipeline here set up it. Does my deployment. So. This is part, of this deploy, pipeline, this. Basically just pulls in our our. Docker, container. It pulls it down it logs. In it builds. It and. It, runs the container and then it actually runs a migrate here, so if I have any changes to. My database this will automatically, apply those changes as part of the deployment pipeline and. Then. It just simply pushes the container and that will update it and, update. The image used by the agile web app so. If. I if I go, here and we just take a look at the multistage. Build pipeline, we could see all those steps succeeding, and so. Now. For secrets in order to pass the secrets into these build queue here, so. For example if we look at the docker login step you, can see is says docker login, dollar sign docker login password so you can't see the secret here, in the terminal. The. Way we specify, those is if we go to the Edit pipeline we. Click in that step. There and we look at our variables, I actually. Went in and edited. All the passwords, here this, ACR key. My. Database password, and you can just click that little, this. Icon, here that lets you lock these and if, you, if. You unlock them it doesn't let you get the secret back out again so if I cried, to unhide, this password here I wouldn't be able to get at it so that's like, a one-time thing that you put in so. If you delete the end file you can kind of put your secret in in, there. Okay. And. So. That was a quick run-through of how you set up those. Pipelines. So let's switch, back and do a quick recap and then we'll wrap it up, so. So. To. Create a new pipeline you can go to dev comm. You, can select an, existing github, repo and then, you can pick a yellow file or you can add in a yellow file into, your repo. That'll, define a bunch of steps that get run inside of those yellow files and then you can store secrets, inside of, environment. Variables in the portal. Alright. So we're nearing the end of the talk that. Was, a tour, of building. This. Tweeter, application, and taking. It using dev containers, to get a nice pretty productive. Local. Development environment using, containers and then deploying. That to asher we talked about AZ web app up is a quick way to deploy, to.

Add Your web apps and then we, use a bunch of tools to, build a production docker container to apply that to a j''r finally. We set up a CI CD pipeline, and. That's. Sort of the full, lifecycle so thank. You for much coming, thank, you much for coming today the repo. All the code that I went through today is is here at the Microsoft Python, sample tweeter app I'm, you can learn more about Python and Azure at Adyar comm slash Python there's a lot of great. Resources linked, to the documentation, from there and if you want to see anything I want to keep up to date on anything we're doing with Python at Microsoft check out our Python blog at AKMs, slash Python blog there's. My twitter handle and I'm, available for questions after, the talk, and. Make sure to fill out a session, evaluation, I like. Seeing, your comments and learning how I can, tweet the talk for next time so. Thank, you everyone. Have, a great. Luxury day.

2019-05-10 17:22

Show Video


Fast is true when we compare it to vs itself but compared to sublime it's sh…

+Oussama Essamadi vim is faster, better.

Well, sublime text sure is fast, but let's be honest, VSCode is more than a casual text editor.

Oh please! Everybody knows Vim is better than this crappy bug fest!

When are we getting a Visual Python???

ⵉⵜⵔⵓⵏⴰⵓⵜ Sure but JS code cannot be really hidden anyways especially not when the used a Texteditor as a basis that required it to be open sourced. So you cannot use VS also because it's closed source? How about Windows is that also not a possibility? And if so how about the drivers that are living in your kernel that you cannot get the source for? Also how about YouTube you currently using it's also closed source at least the server side.

Sublime is also closed source, which is a deal breaker for me.

Oussama Essamadi Yeah actually it's an Electron app too. Anything more? Here to note i don't think it's a good idea or the way to go to make software more generic to hardware aka js/java/.net …

Installing Node.js on the server just to build React is a shame. After all, React doesn't need Node.js if you use don't use JSX and you can run tests on the browser with Mocha and Chai.

Why would you use this instead of just running docker normally? What is the purpose of starting separate vs code instance bound to a container?

When you run VS Code outside of the docker container you don't get the functionality of VS Code such as auto-completions, debugging, testing, etc.. When running VS Code outside of the container you don't have access to that functionality (at least not without complex/buggy workarounds).

Thank you for clarifying.

Actually Node.js is just installed during the container build step, not in the final container image. I am using multi-stage builds so the Node image is thrown away and just the output is copied from the node stage to the python container build stage. I can see how that might not have been clear!

He spins it up in a container!

Why crappy bug fest?

They have a bug that replaced my files with older versions, when I reported it they closed my bug report because it was a duplicate of a January 2018 bug that they still have not fixed

Can't import textblob, someone else got this error that the import is not found even though you installed it?

You may not have installed textblob into the same environment that Visual Studio Code is using, try selecting your Python interpreter by clicking on the version in the status bar. Also try re-loading VS Code after installing the package.

@Oussama Essamadi vim is faster, better.

Only 38% use Py for ML ??? How ???? What about the rest ??? R, Py, C++ are the main Lang I thought that Py dominates the ML industry

well it's something with textblob, since if I remove it the flask API works fine

@Dan Taylor I'm getting this error on azure, not sure why... " ModuleNotFoundError: No module named 'textblob' "

Jack Foster You wanna tell me you gonna build a webApp with Vim ???

Platin 21 VS Code is open source And also so powerful and it’s more then just text editor Try it first after that defend your little sublime If you find it good you can interchange between them It’s fine In the end it’s just a software The difference sublime keeps asking you to pay / no store or easy way to add extensions ..etc And VS code free and open source It’s really a no brainer but I guess you didn’t really worked much with VSCode For the other stuff like Youtube and the other Q Many already discussed that and it’s so dumb to answer at this time

Azul Amazigh Go and build something with VIM Ooooh what is that ??? You can’t ???

xOr i think you should better try sublime before you say such sh… there is package control to download plugins and it's very straightforward. VS Code is especially one thing a application that runs in Chrome wich was already a memory hog for no reason else than there excessive use of the C++ standard library. VS Code just needs even more memory and settings up a build env with it for example for C++/C is terrible i use VS before i use VS Code. In sublime i can use just a single file C++ build for fast things and if i need something more complex i can add other build systems or just use there own scripting sh… I have no problem with paying for good software but i think generations change and others like more to send them telemetry data or whatever because one thing i learned in business nothing is just free without a reason or a way to make money from it. For debugging i don't need the broken stepping of VS Code i just use RemyDBG or CDebug way more pleasant doesn't need half an hour to just step to the next instruction. It's so power full that it doesn't even have a semantic highlighter without the need of very complicated to setup third party plugins if there are even one for you language. And then there is the entire lsp thing who had the stupi. idea to use sockets for ipc. For you (probably a JavaScript guy) it can be fine but for me a guy that works on drivers that typically have some milliseconds delay it's very unresponsive and slow.

@Giovani Altelino make sure to add textblob in your requirements.txt file, Azure Web Apps installs the requirements.txt files on deployment (pip freeze -r > requirements.txt to install all dependencies from your dev environment)

Python is the next thing that needs to die after Javascript, not only is Python shit, it comes in 2 distinct semi-incompatible flavors of shit.

@xOr why is that a question? Vim is text editor and web app code is text

While replicating step at 12:08, I got this error. * Environment: production WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead. * Debug mode: off Usage: flask run [OPTIONS] Error: Failed to find Flask application or factory in module "app". Use "FLASK_APP=app:name to specify one.

Other news