in this course you'll learn about a few different methods to deploy web applications coros magdi is a software engineer at Microsoft and he developed this course the first section of the course covers deploying using open- Source options the second section of the course covers step-by-step how to deploy using Microsoft Azure the steps to deploy are similar no matter which programming language or framework you use hello everyone want and welcome to this inps tutorial on deploying web applications my name is caros MBE I'm a software engineer and I'm also a big fan of Open Source today I'm thrilled to share my expertise with you in this course we'll explore deploying web applications using different Technologies and platforms we'll cover various types of applications and these steps we discuss can be applied to many others the Technologies I use in this video are just examples the plat forms support a wide range of programming languages and Frameworks the objective is to equip you with the knowledge to choose the most suitable deployment solution for your product let's begin the journey so let's deploy our first application the first app we have is called exams exams has two repositories the first one is the backend API and the second one is the front end so we're going to use render so let's search render um render allows us to deploy both the back end and the front end so let's get it started we're going to register um Coline your information your password and then you're going to receive a verification an email um you need to use that to activate your Bender account all right so now that I've activated my render account um give yourself a name and how you're going to use um render and everything um so the first thing we need to create is a postgressql database because exams uh back end uses POS SQL it depends on it so let's create a new POS SQL database we need to give it a unique name so my DB um DB name user optional um so one important thing here here is to choose the same region for the database and the backend web servers so I'm going to choose Frankfurt and uh I'm going to leave BOS kill version to6 I'm going to choose the free version um which is suitable for hobby projects so let's create the database all right um it's currently creating the database so let's create a new web service to deploy the back end next um so we're going to deploy a public G repository but if you need to deploy a private one you can connect your GitHub gitlab or bbox account so I'm going to just copy and paste paste the URL to the um backend API all right so it has detected that the app is using node and it has also uh set the region to Frankfurt uh which is the one that we use for the um for the date base is um it also has some you know like commands to configure for the build command we're going to use mpm install and we're also going to add mpm run DB generate because our app is using Prisma so we will need to generate the Prisma client uh we also need one more step which is MBM wrong build because the app is uh using types scrip so we need to transpile the files back to um JavaScript last thing we're going to use MBM start as the stor command we're also going to choose the free uh instance type and finally we have the environment variables so let's get back to the repository we have a DOT and example file this file has the uh necessary like environment variables for you to deploy your application so the first one is the port which is going to be uh set automatically by render uh so we don't really need to care about that the second one is the database URL so we need to add a database URL according to uh let's go to the dashboard according to the created database instance here we can um get the internal database URL I'm going to copy that and paste it here so I'm also going to add one more environment variable for the what else do we have we need a d JWT secret key so um I'm going to generate that it's going to give it random Val value so um random value here C the admin username so that we can use it for uh the admin is the one responsible for creating uh exams here in this app and we also need a password um so the admin password and I'm going to generate that um we don't really need to care about anything else so I'm going to skip the advanced section and um I believe we're good to go so let's create web service it's going to take a few moments to uh pull uh to clone your um app and then run the build command which we said to mpm install and then uh generate the Prisma client uh which is the DB generate that's what I've defined in the package Json and it's finally going to build uh using typescript so I believe that when successfully build successful it's currently deploying as you can see it says that your service is live um great so let's test that cool it says are you lost we for example we have an endpoint called questions you try to hit that it says token is needed great it's it's working um let's try to deploy the uh front end so this creat a new static site and I'm also going to paste in the repo URL and cool it it says that this is the build command mm install MBM R build but the publish directory is is T and and I believe we need to set an environment variable here um which is the yeah that's the the base URL for the um for the back end that we have so this is our back end this is the base URL let's copy that and based it or the uh front end cool um and we're good to go let's create our static site nice it is that your side is live which means that now we can visit our site right here and let's um check to see the network tab sending requests to our back end um so if we say like the name caros and age 10 store exam sends a request to the um let's see yeah exams uh. on uh back and right here um great which means that our front end and the back end are working as expected the second web application we're going to deploy is called my super awesome app you know naming things is the second hardest thing in computer science but anyway we also have two robot trees the back end API and the front so the backend API here is built using bun and fastify cool um let's see what services it uses according to the environment variable it has a port uh it uses mongod DB um also requires a JWT secret key email API key email from name email from address front end ways URI and image upload API keyy cool so let's start by creating our mongodb inance we're going to use a free service called mongodb Atlas you need to register create your Atlas account we going to receive a verification email now let's verify our email cool email successfully verified let's continue cool uh we need to answer a few questions like what's your primary goal how long have you been developing software with mongodb we need to choose the free instance and let's uncheck preload sample data set and then just create deployment cool so it says that um my current IP address has been added to enable local connectivity uh we can add another later in network access we also need to create a database user us first user will have Atlas admin permissions and we can you know like we can skip that and go to network access then add IB address and allow access from anywhere then let's go to database access add new database user they call it user one and auto generate secure password we need to keepy these so that's um copy the generated password and save it here all right and add buil and roll read and write to any database and and add user all right now let's get back to database connect and we drivers choose the um noj driver which is going to give us a connection string we need to copy that and save it as well we need to replace the uh password um section here with the password that we generated before and keep that to use it when we deploy our backend API all right so we're done here now let's get back to see what else do we need okay we need an email API key so go to mailor send.com and let's sign up cool we need to verify our email let's get the link great mail verification done we need to go to SM smtb relay and then we need to click manage mail or send has created a trial domain for you to use it to send emails so basically we're going to to need that for our email sending that's is that's the domain and we need to generate an API token let's give it a name uh my super awesome token and create copy the value keep it here and and what else do we need um so API key we have that um the address and everything okay we need the image blow API key so there is a service it's called image hippo um it's free you can create an account and after creating an account go to API and add an API key let's copy that and save it all right the only thing that we need here is the front end basri but in order to deploy the the front end we need a backend so we're going to deploy the back end and then deploy the front end and after we deploy the front end we're going to change the environment variables for our back end to add um our front and base URI which is used to send emails for user verification to deploy the back end we're going to use a service called Ki let's sign up I'm going to sign up with email great let's confirm our email address all right we need to give our organization and name and then continue let's continue you can skip that okay now let's create a web service we're going to use GitHub and we're going to enter our public GitHub repository link that's the one it's imported make sure to choose the free CPU and next okay now for the back end we have a Docker file this Docker file has the required configuration to create a Docker image uh which uses bun as you can see to run our back end so for the ER we're going to choose a Docker file configuration and for the environment variables we're going to bulk import and let's use our and example here let's remove the port definition for the mongod DBU we're going to use the link we have here copy and paste is here all right for the email API key this is the email API key from name that can be like literally anything and um the email from address we could say ABC at this domain um frontend Bas we're going to leave that for now and the image upload API key we're going to use the image upload API key that we got from image hio and let's save that cool we have everything here um great so let's deploy it's going to take a couple of minutes to build the docker container and start deployment so the build and deployment has completed successfully as you can see it says that the anistan is healthy and all health checks are passing which is great um now we need to get the base URL for our back end um your servic is almost ready skip that a few fres great it says that route gets is not found um so let's check the Articles endpoint it turns an Mt array cool now let's deploy the front end for the front end we're going to choose Cloud flare Pages which is a web service provided by Cloud flare so we need to register type in your email and password sign up now as usual we're going to get a verification email so let's verify our email great let's explore all products now go to workers and Pages click pages and connect to get let's connect GitHub now let's install and authorize Cloud flare pages to use our GitHub account I'm going to select the my super awesome app front content and let's begin this setup for the framework we choose spelt the build command is nbm run build but the build out directory is going to be this and for the environment variables we're going to add a variable for the um we have the do n example here it has one environment variable V API Bas URL so we're going to use that and the value is going to be the base URL from kib um where we deployed our backend API so let's save and deploy it's going to clone the rapo and then all the dependencies then it's going to build um the front end um so we have the desk folder here it's deploying success um it's very fast actually um so we have the URL here it might take a few um moments for the URL to be ready to view so you can wait a couple of minutes um then try again cool now we can use the um base URL for the front end to redeploy our back end again so let's get back to coib go to our super awesome API and go to settings environment varibles let's change our front end base URI to the one that we got from Cloud Player pages and let's build and deploy now let's try using the super awesome app it's very simple we can sign up here give it an email password and sign up okay so it says that a verification mail has been sent to your email address let's get that link and let's copy and paste the link here it says that the email has been verified successfully now let's log in I the email log in cool currently we don't have any articles so let's create a new article give it a title maybe hello for all this great uh you could give it an image which is optional but let's publish that for now article created can see the article here let's test the image thing uh this is an image why super awesome image um let's choose a file so I'm going to use that one and publish created and it loads the image so now we have everything deployed our back end our front end we have image uploads we have an email service that sends emails everything is breaking and during this tutorial I try to use free platforms that don't require credit cards or anything it's very easy to use very easy to sign up and register an account so feel free guys to use these services to deploy your hobby projects so they're not just some code sitting there of GitHub or gitlab or whatever hello guys in this video I'm going to show you how to deploy a full stack web application on an Azure virtual machine um let's get it started I'm going to create an Azure virtual machine and uh I'm going to give it a name maybe Hello World um choose the 22 um 04 LTS opp2 version and I'm going to stick to the standard b1s size um I'm going to generate a new key pair and um I'm going to also allow the http and https uh inbound traffic um let's sh you and create it's going to take a few seconds to like validate um your choices and then create let's download the private key okay let's save it all right so we have the hello worldcore key um as you can see that the deployment is in progress we have to refresh um you're going to see that it's uh creating the resources the network interface um the public IV address and it's currently creating the virtual machine so while that's loading let's change the permissions uh for the downloaded a Sit key which is called Hello World um all right let's go to the created resource the virtual machine and hit connect then select native s let's St P machine I don't know why it's stopped okay it's starting right now all right and we're going to need this command and let's change that one to use the downloaded s key hello world right let's H enter yes and cool we're good to go I'm going to use a REO uh called exams I've built that one before it's a symbol with application it has like an admin can create exams link questions to the exams students can uh answer the questions and the admin can see like the the results um so this is the back end API going to get clone at to the server and we're also going to need the front end um let's clone that one as well clone right cool um now let's go to the back end and the back end it uses nodejs and um we're going to need to install that on the server So currently we don't have node I'm going to use fnm which is a fast uh node version manager it's built in rest uh so that's why it's blazingly fast everything is built and rust these days so anyway it says that we need to ensure that curl and and onz are installed so let's make sure we have those curl unzip right unzip is not here let's go to install it great and then we can use this command to install right and great in order to apply the changes let's use this command so far right if know it's working let's me install the latest uh long-term support version of node Jazz which is currently node version 20 uh1 15.0 at the time of the recording okay great we have node let's mpm install and what else do we need we need to copy um the DOT the file we could have like another terminal here um so we could use both all right uh let's copy the M example to the end and then we need to MBM run we need to MBM run build first because that's a typescript project right so MBM uh uh Want Build and all right while that's working let's nbm run DB generate um okay yeah okay we need to CD into the my goodness what's wrong with that okay so we've installed everything right we need to first run de generate then we need to run nbm run build all right um so this project expects a poql database so we're going to spin up a Docker container um I'm going to ask some help from TBT um okay so Docker run hress ql opine um all right Docker run okay I'm going to use this command it's going to uh run a container on the I believe we need to with PS exposed we need to expose the pores yeah we need dashb command yeah the dashb argument okay um so I'm just going to ignore the name of the container and here we're passing an environment variable Poore password set to my secret password and when we hit enter okay we don't have Docker so let's stcker inst install uh we need to install on one two and what do we have here installation using App cool throw in these commands and then we need to install the darker packages all right sto the Tucker packages Co what El else do we need um lenux post install okay we need to create the docker group I believe that's already created for you we need to add the current user to the docker group right so we add current user and then we do that and let's try the docker on it where is the dock that's it all right so it's unable to find the image locally it's going to pull it and okay so we should have the EV draing great so what else do we need okay we need an admin username that to admin and let's stupid um and save quit reing them so that's um to get into the insert mode you hit I and then you type and after that you had Escape shift um then colon WQ all right um I believe we should be ready to mpm start H yeah okay forgot to fix the the one should po what about we go to Chad give me the uh connection string where the running here we go here's your name okay that's rest to place yeah okay that's right that's what I wanted um all right so let's least that one right here um let save what if we mm start again all right the migration done server is listening cool um so to run the server like in the background we could use a process manager like pm2 uh so pm2 um quick start okay install it little and then we could all right right pm2 it's working pm2 um what's the command for yeah pm2 s and PM like pm2 BM do have pm2 and BM um okay pm2 sort and PM sort is all right into LS right it's working and yeah cool um so if we curl like uh Local Host Port 5000 we get are you lost cool it's working great let's deploy the um the front end um like let's get it over running um exams front end try that here so we build uh stall first um then build cool great so we have a this folder all right so I'm going to use a whip server in order to serve the front end and the back end and I'm also going to link them to a domain uh but first let's try the um let's go with installing the web server I'm going to use caddy um which is a super fast uh and the most interesting thing is that it's super simple uh web server um so let's go to the documentation um get inst started yeah so install caddy um I'm going to follow these steps and okay so we have caddy and let me S do system CTL check the status of caddy all right it should be active and running to ensure that let's give me the m i address the of the virtual machine and yeah means caddy Works cool now that's um all right let me show you where caddy keeps the configuration it's uh under Etc caddy caddy file that's where uh like serves that's that's where the configuration so what I'm going to do now is that I'm going to link two domains to this uh running virtual machine so I'm going to use DNS that's free dn. afa.org let's sign up um end the information and uh get password information and um what's that uh I agree send the activation email all right um then I'm going to hide that from you here uh and I'm going to just get the URL for deactivation all right here we go and let's get back okay cool um let's add the subdomain and I'm going to use the manyi menu for option shared the main registry and I really like the simple ones like a for two and I'm going to set the destination to be with the public IP address of the virtual machine and I'm going to use api. exams and save all right I'm going to add one more to exams directly I can't see this one all right okay so I have these two subdomains pointing to um our virtual machine so in the caddy configuration I'm going to do a couple of things um first first of all let's move the um let's move the front end part under the um V so I'm going to create V www HTML uh directory and I'm going to move the exams front and rebel under that one right uh permission denied Soo and then I'm going to play with the configuration a little bit uh D file all right let's clear everything up and first of all I'm going to say that for the front end I'm going to use this domain and this is the configuration um give me the uh okay I'm going to use T app to be honest um give me caddy file config for the following um so for this one use uh the front and uh use the exams ront and under under what where is it under ww. HTML to serve the this folder um and Spa single page application and for the api. exam42 uh forward the traffic to Port 5,000 um let's see all right uh I'm not really sure about this I believe there is is like the Spa Port is missing Cy file spba um let me see because we need to yeah I believe that's it try files any path yeah I believe that's the messing part all right let's where is T that's it let's this configuration and use it here um going just paste and let's fix that to exams front end slist that's where the build files and I'm going to add the missing Port uh which is try files right and uh anyway um let's sud sudo system CTL uh reload caddy all right let's check the status of caddy it says that sered Keys indication served Keys indication it's automatically generating an https certificate um a TS certificate uh in order to enable https uh traffic okay certificate obtained successfully seems like everything is working now there's I believe there's like one more thing we need to do with the um let's go to for wwh HTML exams front end and there is an adult and file and we just need to fix that to Sams do uh that's me. f.2 and let's MBM run build again right it's building um let's reload caddy stus M load complete sub previous ER great let's may go to exams. i42 and voila let's ensure that the network so if we say like n Sage anything sign up cool um so that's going to https SL yeah API exams for it's it's working guys it's working um so let me illustrate real quick um what we have here so first we created and um Azure virtual machine all right and in this inside this Azure virtual machine we cloned two reos first is the exam's API it's running using pm2 uh it's no Jaz and this we also clone one more thing which is the exams front end and uh we built the D directory um it's built in it's built I believe I'm not 100 sure 100% sure um and we also have a post grass ql container running Let's uh uh post grass K container running inside Docker and we have here we have caddy working as a whoops server um and caddy is redirecting the traffic to whatever uh any of those is like requested so if we have like an incoming traffic from a client and uh it's requesting uh API it's requesting exams uh f42 it's going to redirect that to the exams from and um and as as we already have here we have the configuration uh caddy caddy file um we have the configuration for the exams. f.2 uh it's using the the root it's it's just creating a file server it's just serving static files um thebuilt files here and um the tri files thing is for so for example if we like hit refresh here um we don't really have a file called exams it's it's redirecting everything to so whatever the pause coming here we're just redirecting that to the slash so that's what the tri files is doing and it's here saying that's uh basically a file server and for the right here for the uh a api. exams i42 it's going to redirect the traffic to the uh container uh not the container the um the the the back end that's running on Port uh 5,000 right here okay it's using pm2 as we already mentioned um so uh that's what it's doing it's foxing the traffic to Local Host uh Port 5000 and um the API is using the docker container the bql docker container that's shying locally and as you can see um everything is working as expected so uh thank you guys for watching and hope to see you next time goodbye