Setting Up a Windows PC For Web Development: WSL, Git, Node.js, Docker, Oh My Zsh, & MySQL

hey welcome back to the channel in this video i'm going to set up a new windows pc for web development in other words i'm going to get wsl or windows subsystem for linux i'll get that set up get it integrated with vs code i'll get docker integrated with everything as well and will create a super simple express or nodejs app that connects to a mysql database before we go any further i do want to point out that you don't need to set things up this way you don't need to use windows subsystem for linux for everything like this i just thought it would be something fun to experiment with and i thought why not sort of document the steps that i take along the way having said that this video is a bit different from most of my other videos i left a lot of my mistakes in the final edit so if you're looking for the fastest possible zero mistake guide on getting everything set up this is not the video for you but if you sort of like someone documenting their steps you know showing the parts where they got a little bit confused so maybe you don't get confused there as well then hopefully this video can be helpful anyways let's jump into the action okay so first i'm going to install windows subsystem for linux i believe the easiest way to do that is just open start menu and search for powershell and we don't just want to open it normally we want to open it as an administrator so you could either click run as administrator or just right click on it choose cool now we just want to run the following command wsl space dash dash so two dashes install go ahead and press enter so just that one command is going to run through several processes and install basically everything we need so so far it's installed wsl it's installed the kernel now it's installing ubuntu by default i'm happy with that default choice for the distribution i'm not on the fastest wi-fi connection right now so this is going to take a little bit i'll resume the video once ubuntu has finished here i'm not sure why but mine got stuck at 0.1 percent i looked at task manager and there's not even any data being sent over the network so i'm going to try restarting this so in the command line i'll just press ctrl c on the keyboard okay i press control c a second time that actually looks like it closed or canceled it i'll run the clear command just to get rid of everything on the screen and let me try it one more time so wsl dash dash install hopefully the ubuntu download doesn't get stuck this time oh okay maybe ubuntu did finish downloading and the percentage number just wasn't getting updated it never even moved past 0.1 percent and there was no sort of success message but i'm just going to assume that it worked and at this point we just restart the computer so let me restart and i'll resume the recording okay i just restarted windows let me open up powershell again i don't think we need to run it as an admin now that we've already ran that command let's see can we run wsl windows subsystem for linux has no installed distributions okay i'm just following the official microsoft instructions so this is not off to a great start but that's part of the fun of this video you're kind of coming along on the journey with me seeing what sort of issues and bumps in the road i run into so the microsoft documentation says you can just run this command and that should download ubuntu it didn't work so let's try manually installing ubuntu i know you can do it through the windows store but the microsoft documentation says you can do it from the command line so let's see if we can try something like this maybe wsl dash dash install dash d for the distribution and then maybe just ubuntu okay it's actually downloading this time it's not going to take that long but i'll resume the video once this download actually finishes okay so we got stuck at 37 and a half percent not sure what's going on i'm thinking that anytime i click anywhere on the powershell window it somehow cancels the download i've never seen anything like that on mac or linux before i don't know if that's a thing or if it's just a coincidence i have no idea i looked in task manager there's not any data being sent or received so let me cancel this ctrl c i'll just try that exact same command again wsl dash dash install d ubuntu okay i learned my lesson do not click anywhere on the window somehow clicking anywhere on the window means cancel it i'm literally going to walk away from the computer until this gets to a hundred percent so i'll resume the recording if we get to that point okay through the magic of not clicking anywhere on this screen the download actually finished and then it installed it and then it launched this screen so it's launching ubuntu says that it's installing it may take a few minutes cool now we just pick a username i'll choose brad and just to be clear this does not need to match the username and password of your windows account this is for the new ubuntu user account cool so at this point i think we're in ubuntu see which directory we're in cool i think the first thing i'll do in ubuntu is something completely pointless but this will help you impress your friends and family make them think you're an elite linux hacker let's install a package called cmatrix just for the fun of it right because you couldn't do this in windows but you can definitely do it in linux let me clear the screen so we're back up at the top first let's make sure we're pulling the most recent packages so sudo apt update enter looks like i'm on a slow connection right now so i'll edit this part out of the video but your download should go fairly quickly okay i'm not actually going to bother upgrading any of the packages right now but that should fetch the newest packages when i run an install command let me clear the screen so now we just want to say sudo apt install the name of the package again this is just for fun you don't need to do this it's called c matrix cool that installs super quick now we can just run the command c matrix and now your friends and family will be convinced you are a super elite hacker okay when you're done looking at that just for fun you can press ctrl c now let's actually do something useful let's get our linux command line integrated into vs code so i won't bore you with that but right now let me just go download and install vs code if you don't already have vs code visual studio code it's awesome totally the industry standard so i recommend you download and install it if you're following along with the video so off camera i downloaded and installed vs code this is a brand new fresh installation from this welcome screen i'll just click mark all of these as done i'll uncheck this show welcome page on startup this is just personal preference and now let's pretend we were actually going to get some work done so maybe i will create a new folder on my desktop and i'll name it example project okay then i would open that in vs code so i would just drag that folder onto vs code yes i trust the authors cool so now on the left-hand side we have the file explorer so now from here let's open our command line in vs code our terminal so you can click view and then terminal or it's just control j on your keyboard to toggle it open and closed okay so vs code automatically points us towards that new folder project cool however this is using windows powershell we want vs code to use our new linux command line all we need to do to set that up with your terminal open in vs code is just click this little downward arrow to the right of the plus symbol so right here we'll just click that and choose select default profile and then from here we're just going to choose this ubuntu wsl option so it takes a few seconds now in my case that didn't actually do anything immediately let's test it out though so if we click the trash can to close that instance of the command line and then press ctrl j to fire it up again perfect so now it's using our linux command line so we're using ubuntu but it's pointing towards that folder on our windows desktop now to really prove to ourselves that we're using linux or ubuntu commands instead of windows let's try a command that doesn't exist in windows so we could say touch that's how you create a new file in mac or linux any unix operating system let's say touch index.html run that cool showed up on our windows hard drive you can create multiple files at once you could say touch main.css and main.js awesome cool now there's nothing wrong with this default visual appearance of our command prompt here but personally just coming from a mac environment i really like oh my zsh if you've ever seen my tutorials before in the command line it says just the name of the current folder you're in so it would only say example project instead of this full address and also it has git integration so you can very quickly see which branch you're currently working in and if there are unstaged changes so on and so forth so to set that up we're already in the ubuntu environment in our command line right here so if you want to set up oh my zsh the first step is to just have the zsh shell so we would just say sudo apt install zsh let's go ahead and run that enter your password it's very quick just say y for yes hit enter looks like it's a little under four megabytes so should be a quick download okay now that we have zsh we're ready to go get oh my zsh so just go to google and search for github oh my zsh should be the first result from the official github website if you just scroll down a little bit they will give you a command that will install oh my zsh cool so just for basic installation this first command this curl method this should work so just select this entire bit of text here highlight that copied into your clipboard back in vs code within our linux command line just paste that in and then press enter should be a very quick installation then it asks you do you want to change your default shell to zsh i'll say y for yes hit enter asks you for your password cool and it's done let me run clear just so it's towards the top again cool and that's what i was talking about so now it only shows you the current folder name you're in and it has git integration so let's turn this folder we're working on into a git repository what's cool is when we installed ubuntu through wsl it already has get installed so we don't even need to install git within our windows machine we already have it inside of linux so we can just say git init to turn this folder into a repo oh we see that that absolutely did not work let me try relaunching vs code if it still doesn't work i think we just need to install the extension for vs code for wsl oh well this pop-up message makes the problem pretty clear so get not found interesting because within our command line you can run git dash dash version clearly git is installed but i'm thinking it's some sort of integration issue with vs code so let's go ahead and install the official extension so on the left hand side under this extensions icon i'll just search for wsl i want the official package from microsoft so you can see this one has the check mark it's from microsoft i trust it so it's called remote wsl let me go ahead and install that okay now let me try closing vs code and i'll open it up again still getting that same get not found message i think we need to launch vs code from wsl and then git will be fully integrated let me show you what i have in mind so i'll close this window and let's launch a new instance of powershell and just run the wsl command cool so we're in linux but we've mounted the c drive of our windows computer so what i want to do now is just sort of navigate to this folder on my desktop right example project so i'm in my brad user home account i would just cd into desktop and then from here i would just say code so that's vs code and then you give it a folder that you want to open so i just want to open this example project folder so example dash project it's going to take a minute or two just to install the vs code server this is pretty cool though it lets you launch your windows copy of vs code from within the linux command line so it's almost done trust the authors i'm the one who created the folder cool so it opened vs code it used that wsl extension and now we are fully integrated but we can open up our command line control j we've got our linux command line we can turn this folder into a git repository we just say git init works like a charm and this is what i was referring to so now our command prompt we just get the current folder it tells us the branch that we have checked out and this symbol means hey you have unstaged you know uncommitted changes right we created our three new files so use the git command of you know git add dash uppercase a to stage everything or you can use vs code because it's fully integrated so you can just provide a commit message first commit click this check mark click yes should have known before you can commit and get need to configure your username and email so down in the command line is just git config dash dash global user dot name wrap it in quotes cool then do the same thing with your email so git config dash global user.email quotes test at localhost you would enter your real email address obviously okay now we should be able to commit so commit message click the check cool so our command line is integrated with the git system in vs code so you can say git status cool there are no changes you can test this out though if we make a quick change index.html just add an unordered list say hello hi we saved that cool vs code's like hey there's one uncommitted change you can do it through vs code the gui or you can just go into the command line run git status say oh i have one change and then just do it you know the command line way of handling git so just commit all of your changes git commit provide a message small html change cool see i committed that through the command line the vs code interface knows it's aware of that i won't include it in this video but if you wanted to now connect this to your github account well you would just look up a tutorial for github how to add ssh key in linux and then you would just follow those steps right in this command line down here cool at this point before we move on to the next step and integrate docker into our workflow i first want to improve the way that we're launching or opening these folders in vs code because at the moment i don't want to have to open powershell and then type wsl this just doesn't look super cool it's not super fun so let's use something a bit more modern let's use windows terminal in windows 11 windows terminal is included by default in windows 10 you need to go to the windows store and download it so i'll just search for store microsoft store okay from the store just search for windows terminal so this first main app choice the windows terminal app yep created by the microsoft corporation let's go ahead and click get okay that's a quick installation now you can click either open here or you'll always be able to find it in your start menu now so windows terminal cool so again it's using powershell but if we click this arrow right here not only can you switch to ubuntu we can actually go into settings and tell ubuntu to be our default so let's go into settings default profile just change that to ubuntu click save in the bottom right corner okay so now if you totally close this program and open it again it will know to just use ubuntu by default cool so again it's using linux but it mounted your c drive the home folder on your windows computer now next and this is totally pointless but you know if you want to impress your friends and co-workers why don't we make our windows terminal screen a little bit see-through to do that just click on this downward arrow click settings in the very bottom left-hand corner you see open json file so that's going to open your windows terminal configuration file in vs code let's scroll down just a little bit so for me it's around line number 36 we see defaults inside these curly brackets we can just say quotes use acrylic you can see it's already trying to suggest it for me set that to true comma and then quotes acrylic opacity and why don't we set it to maybe 0.7 give that a save if you look back at your terminal cool you can see it's a little bit transparent and you can tweak that setting to your liking so if you want it to be a little bit more see-through maybe drop it down to 0.6 give that a save cool okay next and this is totally personal preference but what if you didn't want to have to manually navigate anywhere when you open this up right so instead of having to navigate into the desktop and then to this folder what if instead we just wanted a folder on our desktop or anywhere on our computer named projects and then it could have you know all 20 or 30 different folders that you're working on and then you would just want your linux command prompt to sort of open that folder by default well let's do that i'll actually drag my example project into the projects folder but imagine the projects folder has you know 30 or 40 folders all the different projects you're working on so just to show an example i'll create a few more folders in here so example two and maybe third project okay so now we just want this projects folder to be the starting directory so to set that up you just go back into your windows terminal click this arrow go into settings in the left hand menu we see these different options startup interaction appearance scroll down under profiles click on ubuntu it's our default profile after all and then let's just change this starting directory option here so we can click the browse button let's go to my desktop this is the folder right the projects folder click into there click select folder cool so that path looks like it makes sense let's click save in the bottom right corner and then let me close terminal and reopen it so let me open up windows terminal awesome so now i'm in that folder you know you can run ls there are your three projects and now if you just type code for vs code and then the name of the project you want to open and there's even tab completion so for example if i'm interested in this third project you would just type t just start to type the word then hit tab it's going to auto complete it for you press enter yes i trust these files i'm the one who created them cool and now vs code opens to that exact folder with wsl and git and everything perfectly integrated at this point let's change gears a little bit and actually before we go ahead and install docker let's get nodejs installed within linux that's right instead of installing node in windows we can install it in ubuntu and then use it exactly like we would otherwise now you could install it directly from the command line right you could just say sudo apt install node or nodejs but that's going to get you a fairly outdated copy of node realistically it wouldn't matter you would get by just fine with the outdated copy of node but just to play it safe to get a current copy of node for a debian based distribution let's just visit the official node.js website we're not going to download for windows instead let's click other downloads scroll down a little bit and i'm going to click this installing node.js via package manager and then from this page i'm interested in this debian and ubuntu-based linux distributions if you click that it says node.js binary distributions are available from node source so i'm going to click that link that takes me to this screen if you scroll down just a little bit i'm just looking for an install command that i can copy and paste yep here we see installation instructions so for the newest version of node node version 17 it says using ubuntu i'm just going to select these two commands into my clipboard copy them back in the command line you could do this in windows terminal or vs code let's do it in windows terminal just for fun so ctrl v to paste it in push enter enter your ubuntu password should be a fairly quick process okay it actually did take a couple of minutes so i edited that boring part out but now we have node.js now even though we didn't install it in windows we have it in linux so for example when i just opened up my third project folder in vs code even though we don't have node in windows we could run this command of npm init dash y it's going to create a package.json file for us and now we can start installing node packages so we can say npm install express it's gonna go fetch that package cool and let's just set up a super quick express server so in vs code on the left hand side i'll create a new file let's name it uh you know index or start just a js file javascript file i'll name it index.js up at the top we would require in express so let's name it const express equals require the package name is express let's create an instance of that so cons let's name it app equals a new instance of express let's tell it to start listening on port 3000 so app.listen on that port before that line right above that app.listen line let's set up a route for the home page so app.git if you just visit slash the home page comma give it an arrow function with parameters of request response arrow symbol curly brackets and let's just say response dot send just send over a tiny bit of html so you can use backticks if you want let's say heading level one hello welcome helps if you spell welcome correctly let's give this a save and test it out so in our command line you would just run that file so node index you don't need the dot js but it doesn't hurt but just node index i'll allow that okay and then in our web browser if you just go up to the address bar visit localhost colon 3000 there you have it we don't even have node installed in windows but we do have it installed in linux and we're able to preview or you know actually visit it this easily now that we have node.js taken care of i think one of the final pieces of the web development puzzle would be to get docker installed and running so i'll press control c to stop that express server from running you don't need to and let's go ahead and get docker running so we can use it to maybe host a my sequel database locally or a mongodb database locally or if you wanted to run you know a php application python or any language basically any technology that you would want to use in your web development stack you don't need to install it in windows you can keep your windows installation super clean super minimal and just install everything through either linux or docker so for example in this video i'll set up a my sequel database with you and then we can practice connecting to it from our node express application here so first let's go get docker installed though so from google i'll search for docker really we're looking for the docker desktop application so from docker.com see under products we want docker desktop so here it is under features docker desktop click download for windows i'll edit this part out and i'll resume the video once i have it installed and opened okay so i downloaded docker i opened the installation file and this is perfect the default option has this checkbox checked to install the required components for wsl2 this is excellent so i'll just use the default options click ok ok it said the installation completed and it wanted me to log out before it could finish so i did that logged back in let's just accept the terms click accept i do not want to see tips let me skip the tutorial so what we do now is go into the settings screen of docker desktop in this left-hand menu click on resources and then in the submenu click on wsl integration so this option is checked that's great but it says you don't have any wsl2 distros and even if we click refresh yep we still don't have any so even though our wsl is version 2 we need to convert our ubuntu from wcell1 to wsl2 for instructions on how to do that we can just click this more info link right here so what i do is i just scroll down until i start seeing command line text that i can read or copy and paste okay so let me open my windows terminal let me actually bookmark that to the taskbar okay so to check the current version you type wsl.exe dash l dash v okay so you can see that yes we do have version two for docker and docker desktop but our ubuntu is still running version one so we want wsl2 so it looks like the command to do that is just this so let me just copy this into my clipboard back here paste that in and then we just change the parentheses distro name to be ubuntu press enter conversion is in progress so it looks like this might take a minute or two process exited with code what if i press ctrl c nope if i just close this open it up again and check the version nope still version one i'm wondering if the error has something to do with me being in ubuntu here maybe i need to run that command from outside of ubuntu so let me open up powershell again oops probably need to open it as an administrator okay and now what if we paste that back in change distro name to ubuntu and now press enter it's just going to take a minute or two cool conversion complete so now we can close this and now if we go back into the settings screen of docker desktop you can click refresh or just navigate to this screen again perfect so now we can enable integration for ubuntu so just slide that button to be enabled click apply and restart in the bottom perfect so now let me close the settings screen now we can use docker commands from our linux command line even though docker itself is actually running in windows well it's actually confusing because windows is using wsl to power docker the lines are getting blurred but the point here is that our docker desktop that we see here this is now integrated even if we're in the terminal of ubuntu so at this point let's do this remember this folder that i created in projects third project and we set up the express server at this point uh let me reopen that up again and then we'll add a mysql database and we'll host that database using docker i'll show you how to set up one example project and then with a little research you should be able to do this for mongodb php redis any technology that you want to use so let me open up terminal i'll just type code open up my third project okay and this is how i like to use docker over here on the left hand side with our different files and folders let's create a new file and name it docker dash compose dot yml okay now how in the world do you know what you're supposed to include in this file well if you google for docker hub so it's just hub.docker.com and then if you search for whatever technology you're interested in so if i want my sequel yes i want this official image it has over 1 billion downloads you can see if you click into that scroll down in the documentation what i like to look for is a docker compose example so you'll see example stack dot yml for my sequel so i would literally just select all of that code copied into my clipboard back in vs code just paste that into our docker compose file let's make a couple of adjustments so adminer is like phpmyadmin it'll be available in our web browser and it's going to be available on port 8080 in windows well let's add this ports option to my sql itself so that we can connect to it from within node.js technically you could run node inside of a docker image itself and in fact if you were actually going to publish this to a vps host somewhere that's what you would probably do but we're just using docker for a local development purpose in other words we can run node.js locally we really just want a mysql database so right about here i would just say ports colon drop down dash let's say port 3306 colon 3306 okay now this is just personal preference but instead of keeping the actual data for our database in the container itself i like to use volumes and create a folder in my actual project folder here you can name it anything like data or db and then the docker container will actually save its files it's sort of like a shared folder between you know this traditional folder and the docker container i like doing this because then you'll just have this one self-contained folder that has your source code and your actual local database data so imagine we want a folder over here called db what we would do after this ports line just drop down make sure you backspace out tab like that and we add another property called volumes colon drop down one space add a dash space and first we give it the folder on our system so it would be dot slash for the current folder we're in and then imagine we want it to be called db colon then you point towards the location in the docker container where the actual database data would be saved so this needs to be slash var slash lib slash mysql okay let's go ahead and give this a save and all we need to do to get things going is open up our terminal and just say docker compose up i'll edit out the time it takes to go download those images it's going to go download the my sequel image the admin or image okay so off camera i just realized this is going to continually restart forever and it's never going to work so let me show you how to stop this task and then i'll explain what i just discovered in my research off camera so just press ctrl c you might have to press it twice to fully stop the task then let's type docker compose down to completely get rid of what we just did and in the left-hand sidebar of vs code you'll now have a db folder let's delete that so completely delete the db now let me explain what the problem was from what i've found instead of keeping your project files on the windows file system it's actually a best practice to keep them in linux itself so right now let me show you how we can move this projects folder into linux so open up your terminal windows terminal let's actually close vs code because we're going to move this entire folder so let me close that and in our terminal we're just going to move the projects folder from our windows desktop into linux itself so for example in terminal if you type pwd to find the current folder or directory you're in you can see linux has mounted the c drive of windows right and then this is a windows path to your desktop folder projects however if you type cd tilde right and now press pwd this is the linux file system itself so slash home slash your name now if you run ls there's nothing in that folder currently so why don't we create a folder in there called projects so in other words how do we move this folder to live in the linux location first let's create a folder named lowercase projects within this linux native directory right so pwd we're in slash home brad just mkdir to create a folder and let's name it lowercase projects so now if you run an ls on your home folder you can go in there cd into projects run ls it's empty perfect so now we just want to move all of the contents everything in this windows projects folder into the linux native lowercase projects folder so to do that i would just say sudo mv to move first you spell out what you want to move then you spell out where you want to move it to so to begin it would be slash mnt slash c slash users slash brad slash desktop slash projects slash asterisk i want to move everything from this folder space where do i want to move it to well just slash home slash brad slash projects go ahead and press enter type in your password cool so it actually took a moment it's probably all the node modules that took a while to move but now on windows you can see the projects folder is empty so now those files live within linux in the command line if you type ls cool there are our three projects before we set up docker let's make a few adjustments so let me close this terminal so when we reopen terminal we no longer want to point towards this empty projects folder on windows we now want to point towards a linux native directory to do that we just adjust our windows terminal settings so click this arrow here click onto settings in the left hand menu click on ubuntu under profiles we need to adjust this starting directory so completely erase it and let's type slash slash wsl dollar sign slash uppercase ubuntu slash home slash brad slash projects i mean you don't need to have it point towards that specific projects folder this is just what i like to do the point here is that this beginning portion this is the syntax to point towards a linux native directory instead of a c mounted from your windows directory anyways with this in place let's click save in the bottom right corner let's close this out relaunch the terminal to test it out so when i relaunch terminal cool lowercase projects if i type pwd to make sure where we are cool if i type ls there are those three folders beautiful cool at this point we can finally get back to the task at hand so now docker volumes should work flawlessly because we're working on a linux native directory so to get back into vs code i would just say code third project let's run that cool let's open up our command line and just run docker compose up press enter so that's going to use our dockercompose.yml file only now it will actually work there won't be any file permission errors and it can successfully sort of share this db folder here with docker with that docker container you'll know it's ready when you no longer see a stream of new text continually appearing down here in the terminal so it looks like mine is completed so in our browser let's go visit adminer which is very similar to phpmyadmin so in a new tab just visit localhost colon 8080. cool okay let's try to log in and then create a table in mysql let's leave server as db our username is root and our password is example try to log in cool let's click create database i know we're going to move super quickly this is not a tutorial about my sequel let's just name this database maybe pets click save let's go create a table within that database so create table let's name the table users and let's give it two columns so the first column will just be id type of integer set that to auto increment so we'll have that checked let's have a second column called their name set that to varchar let's give it a length of 100 and that's all we need let's click save now let's just add maybe two or three pets so i'll click new item for the name let's name the first pet meows a lot click save and insert next let's add another pet named barks a lot and let's add a third pet called persloud cool so now in the left-hand sidebar if you click on select users if you click on users here and then select data here is our table has three items in it so now our goal is just to connect to this database from within our node express application and that'll be a nice little proof of concept to end on so back in vs code within our third project do this with me open up our index.js remember when we wrote this little bit of express code well from within node here let's connect to our mysql database we actually need to go install the mysql driver for node so in the command line you could open up a second terminal but let me show you what you can actually do if you type control c that's going to stop your docker container so it's no longer running okay now instead of docker compose up that's what you run the very first time when you're creating your containers now that our project already exists we can just say docker compose start and that will actually run in the background in other words you can still visit adminer and we can still connect to our database only our command line is free so at this point let's say npm install the name of the package we want is my sql okay now up at the top of our node file let's import that so const let's call it mysql equals require in the my sql 2 package and i actually don't have the code memorized of how to connect so just google for npm my sequel 2 let's visit the official npm page if you scroll down about halfway you see using promise wrapper this is the syntax i like to use so it looks like in these require parentheses we would actually add on slash promise just like this from here now let's just create an asynchronous function so we can use the await syntax so maybe right about here i would say async function you can name it anything i'll name it go you can name it start or anything and then right below the function definition just immediately call it but now inside this async function we can use await so let's say const you can name the variable anything i'll name it connection equals my sql look inside that package and there's a method you can see visual studio code already knows what we're looking for it's called create connection so we're going to call that we give it an object i like to drop down one property per line so let's give it a property of host this would just be localhost comma let's drop down next let's say port 3306 comma property of user this should be root comma property of password this is example comma finally database and the value we named it pets okay now the whole idea is we have no idea how long it will take to create or establish that connection could take five milliseconds could take 5000 milliseconds but right before this where we say equals my sequel where my cursor is if we just say await well javascript will wait until that actually finishes to run the next line of code so let's just do this let's move our app.listen line that's down at the very bottom let's cut that into our clipboard and paste it so it lives below this line our express app won't even really start listening or truly begin until we've established a database connection now let's do this right above our async function let's create a variable and name it db we don't even need to set it to anything and then instead of creating a constant variable here let's just get rid of const and we'll just modify the value of db to equal this in other words now we have sort of this global or universal variable called db that represents a connection to mysql so now here's what we can do down here in our route for when you visit the home page we can run a mysql query so let's first turn this function into an async function so we can use a weight so just the word async before these parentheses then in the body of the function let's say const let's destructure whatever mysql is going to give back to us we only want the first item from it because it gives you an array with two different things it gives you the results and then it gives you information about that query so we just want the first item in the array which is the actual data so let's call it maybe users right those three users from the database pers loud meow's lot barks a lot so we'll set that to equal and then we just await db dot execute in these parentheses just string a text quotes now you can just write a sql statement so let's say select all columns from the users table now first let's log that to our console just to make sure it's working so right below that console.log users okay let's go ahead and save this file let's run our node application so that's just node index.js now when we actually go visit our home page remember that's localhost colon3000 if we go check our console perfect there's that mysql data so now imagine we wanted to loop through that and on this web page actually you know show an unordered list with those three names well we could just say i mean in reality you'd want to use a template engine but just for a quick and dirty solution we could say clear this out so these are back ticks meaning in javascript you can do something dynamic inside there so before we get to anything dynamic maybe just have an unordered list right but inside the unordered list we want to loop through something so inside of backticks you can say dollar sign curly brackets let's start with that users array so users every array in javascript has access to the map method let's make up a parameter let's just call it animal and then still in those parentheses arrow symbol then another pair of backticks and let's just have an html list item inside that you'd have dollar sign curly brackets and it would be animal dot name okay finally at the very end of this parentheses here before the closing curly brackets but after the closing parenthesis let's say dot join and then just join on nothing just empty string of text that way javascript doesn't add a necessary comma in between each item but big picture if we save that and then restart our application so ctrl c run it again node index go visit the browser refresh beautiful and that's going to bring this video to a close in review we didn't need to install git on windows we didn't need to install node.js on windows we didn't need to install mysql on windows so our windows installation is still very clean very minimal really all we installed was vs code and docker desktop everything else lives within our copy of ubuntu from here i encourage you to experiment with other docker images so from docker hub instead of just mysql maybe you want to try out mongodb or mariadb or postgres maybe you want a caching layer so you use redis there are all sorts of cool packages on docker or i should say images on docker and you just pull the image you don't need to install anything truly within windows itself when you want to stop your docker images you can just run the command docker compose stop so you could press enter but i want to let you know that that's the same thing as just going into the docker desktop you know gui application and you can use this stop button here so i just click stop and then instead of clicking the start button that's essentially what you're doing when you say docker compose start cool so that's just a way of how to stop and start when you want to maybe free up some of your computer's resources i realized we moved really quick at the end here because this was not a tutorial on javascript and node.js so if you want this code that you can just copy and paste and test out i will include a link to a github gist file anyways that's going to do it for this video thank you so much for watching i hope you feel like you learned something stay tuned for more web development tutorials

Channel: LearnWebCode

Views: 22,505

Keywords:

Id: 2TKh3aokgec

Length: 48min 14sec (2894 seconds)

Published: Mon Dec 06 2021