2021 Setup Guide for Mac Web Development (including Ruby on Rails)

[Music] hi welcome to this guide setting up your mac for web development in 2021 we're going to skip a lot of the obvious stuff but get you started as soon as possible up and running with web development in particular this video we're going to set up at the end ruby on rails but if you want to set up other frameworks the rest of the guide will be perfectly fine for you as well including if you want to do a laravel php django for python and other languages uh basically all the javascript frameworks for web development but we'll get onto those and do those in other videos to get started however this this this wrestler guide is going to be applicable for pretty much every web development thing that you want to do so to get started i don't need to tell you the obvious stuff get yourself chrome and if nothing else other than a trivial reason that when i actually press maximize apple um i actually want it to maximize on the screen thank you and and safari just doesn't and chrome does but not the legitimately there's an actual good reason for having chrome it's pretty much the standard as far as web development is concerned for looking at the developer tools online uh you can use firefox of course you probably want to have all the browsers available but i'm not going to go into those in particular detail instead what i'm going to go into is the stuff first of all step one the stuff that drives me crazy with any new mag now i'm using here a 2012 era retina macbook pro to show that you can use a much older mac you don't have to buy a new one to actually get started but i do also have an m1 mac next to me i know i will use the m1 mac for for future videos um just because if nothing else all the fans don't kick on and that's one thing with using older older macs that you may well hear fan noise you shouldn't hear them on the video but i can hear in the room so um where that gets with that started um if you did want to buy a new one by the way don't feel free to don't don't um don't feel the need to buy the most expensive mac there is there's no need for it the modern m1 max are all amazingly fast so buy something reasonable for your particular budget if you wanted something new the mac mini is fine the macbook air is fine um they're both very very good if only the upgrade that i would suggest that you may want to do because it's not something that you can upgrade later is upgrading the ram from eight gigabytes to 16 gigabytes in case you want to do extra stuff like xcode and ios development in the future and we are going on to other videos about that then but let's get started with changing all the system stuff that drives me crazy first and this is nothing to do with installing programs this is just to get me some decent uh defaults so let's just go into system preferences and first of all general i'm just going to go across and hide and show the menu bar because when i'm doing about performance i don't want to get distracted with other stuff coming in apart from the stuff i want and that also means i can right click down here and click on turn hiding on now i mean catalina on this mac but the m1 max will have a more up-to-date version of mac os it doesn't matter for web development pretty much you you're okay to use whichever is is fine for you you know uh the latest version is is obviously preferable so now we have a blank image on the screen and uh we need to get going so to get started one of the first things you're going to want to do is customize a little bit the finder i have some issues with the finder and also i'm using a mouse so i would very much suggest if you're used to using a mouse i'm going to mouse down here and turning off scroll direction natural i like using natural scroll direction on track pads but on mice i want the upward scrolling of the scroll wheel to actually move upwards on the page not downwards and that's that drives me crazy in new max also in finder by default this thing is awful there is there's not much here that i actually uh well not much that i actually use here on the left hand side and instead i actually do want to use stuff um and have them available so a few things are just worthwhile changing go into finder go into preferences and then down here you can see a list of other things you want might want to add so for example my name's tom so i want to add my home folder i might want to add movies that's what my this video has been recorded to and maybe pictures and stuff like that on there as well uh other stuff you can add here uh so i can turn that off and you can see them you can also do that by going into any of the folders and by the way the with the keyboard combination to move upwards through folders in the mac is not obvious either it is basically command and up so that will let you go up one level that's back and forward so that doesn't make much difference however you can then add more folders to the left hand side here just by dragging them across so if i wanted let's say my pictures folder oh the picture's already there let's just say music folder i can just drag them across and put them in the list available and uh tom should be at the top up there good so that's an easy thing to do the other thing is to press command forward slash to say to show this bar at the bottom it shows then all the amount of space you've got available on your mac you can also get to that by going to view and then show show and hide status bar here it is so you can just do that turn it back off again turn it back on and that's good so you've got everything here if you want a quick reference for things so for example if i want to get to applications quickly you can also drag them down here onto this uh sort of right side of the bar and then you can just click and see all your applications that are installed i have nothing installed here other than what comes with catalina and of course there may be slight differences when you go to different newer versions of mac os but this is what we've got so far so in utilities one of the first things you're going to be using is the terminal and here's the built-in one which works perfectly fine however it's sort of limited you can add extra tabs by pressing command t but i think pretty much every web developer is going to just use a different something else other than that so to get started we're going to go install a few programs step one we're going to go for item to maximize is horrible in safari um item two pretty much the standard terminal emulator for uh mac os so go ahead and download that uh yes i wanna allow downloads i should probably switch to chrome at some point but that's perfectly fine so i'm just going to go ahead and install it and have that available did i not have my downloads available here that's the other thing that i often want so let's just have a new thing just to show me my downloads down here as well i can just then grab things and open them and we'll install that that's chrome i didn't want no it's just actually created the application so i just drag that across applications and there we go so item 2 is now installed and if we just do command space i can type item and get that to run yes let's open it analyze notifications that's going to be quite useful and the pip3 command requires command line developer tools yes you're going to want to install these so that's automatic you don't have to do anything else but what this is basically installing um command line tools like compiling applications and uh git for version control and stuff like that so it'll download then it'll install and we'll carry on with the video with that installed we're now going to just change a few things mainly so that you can see this on the screen a lot easier i'm going to maximize this uh this up alt click on the maximize button to maximize it without going full screen i don't really like the full screen options but this is obviously far too small for you guys to read so i'm just going to go into item 2 then to preferences go across to profiles then text and down here you should be able to choose the text size i'm going to choose 18 so that is hopefully a lot easier for you to actually see so there it goes and we are on i'm going to change my system name in a little bit but we're on my macbook pro as you can see i've got ls i can see everything there that i have uh oh we need to we need to go across and install some other things so uh first of all i'm gonna go then and just quit that we've done that and then we're gonna install oh my zsh omazed h is um basically zsh is the shell environment that you've got in item so this thing basically here that i type into that i can do things like for example uh type git status is yeah do we have git yeah we do have git available and then i can scroll up through things i can do tab completion like um get uh can i do sub commission get status i don't think i can but i'll show you some of it all later and also the things up here it shows you what we're actually doing uh what what directory we're in and other stuff like that will appear however uh the default one is not exactly how i particularly like it so i'm just going to install uh over zsh which is going to be quite easy to do we can just copy and paste this line down here and do that and then we should be able to copy and paste it in here and i don't have to do anything else so you can see that is started and now you can see the the the prompt has changed and also some defaults have changed so folders then show up as is l install yes it is good so you see the folders are showing up as blue and then i've got uh sort of white for files and stuff like that and i can see hidden files and stuff like that as well anywhere so everything's good there the other thing i was going to just mention in finder is in finder preferences so uh there is you have options in here for different things mainly that you can also then choose to show all file name extensions you may well want that depending on uh depending on what you what you want personally anyway let's get that out of the way and then um carrying on with terminal so from terminal here we've got oh my zsh installed um that's that out of the way the next thing i'm going to want in my case well let's just move those along i don't want those just yet is homebrew homebrew is essentially a an easy way to install lots of things that need compilation or grab it's basically a package manager as it says the missing package manager for mac os if you're not familiar with the package manager from the windows world uh basically it makes your life a lot lot easier as far as that's concerned you just click it here and then press this paste and press enter this is probably going to take a little while now let's see if it's actually going to start it can ask me for my password yes let's go and uh off it goes and there it goes so i'm going to pause the recording now until it's finished but once it's finished we'll then be able to use homebrew or the brew command to install other stuff really really easily with homebrew now installed we're going to move on and look at text editors text editors you're going to use pretty much all day every day as part of any web developer's life and there are three main good options i know of all that i use on mac os one is video visual studio code this is quite a modern uh application and i would be quite happy with doing that or using it on any mag and we can just grab that and say allow the other two are older but both very good text mate is available essentially free which is worthwhile grabbing yeah and we'll grab that as well and also sublime you can get a free trial but it is actually a paid software um it is nag ware so it will not ever shut you down but every few file opens it will say hey you really should buy a license the the only downside to that is the license for this thing is around about 100 pounds i think yeah it's 99 so about 70 pounds or whatever the exchange rate is these days um yeah i lost track really the whole pandemic but we've got those three options all three are good in this particular um set of c this set of videos i'm going to use visual studio code it has a few nice features including things like showing when files are um are in get version control and whether they've been updated and stuff like that so yeah worthwhile having if you don't know what gate version control is don't worry we'll show it in future videos but it is just uh useful to have so get whichever text editor you prefer i'm going to grab all three so they're real on my system and there's lots of really really good stuff with these text editors including snippets uh letting you massively increase the amount of code you can write with very short amounts of keyboard keyboard input there is a few more text editors i should mention that i'm not going to cover and that's things like emacs and v and bim and various gvm and all kinds of other stuff like that that are perhaps out of the context of like a nude web developer um they are very much expert systems uh they're able to get even more productive than these tech services but it takes a lot of doing to actually do that so i'm gonna leave those out of this particular install and we can always come back to them later now we should get homebrew to install for us a database now in any framework in for example ruby on rails is one of them or laravel you're going to want a database now by default ruby on rails ships with um just installing sql lite sqlite is a file based database so you don't have to install anything but that's not what you're going to do when you're going to put it onto a server out for the world so i pre much prefer having that database installed on my local machine so it's as as close as it can possibly be to wherever we install our applications places like heroku aws etc etc so to do that that's really easy i'm going to use postgres by here but you can also use my sql they're both different types database so i'm just going to type in brew install postgresql and now now this may take a little while while it goes and grabs postgres and installs it for you and that's now installed so you just want to make sure that it is actually running so to start that we're just going to basically type this line right here brew services start postgresql and that's going to just start it in the background so that it's available for you okay uh that's gonna basically do some stuff and should be ready while that's going on uh we're going to just want to go across to and install a client for it so this is just a program you can use on your desktop that will see your progress database or other databases you can have different ones this one's appropriate for postgres and just download uh the latest version in this case a pg admin there are others the ones you can pay money for pg admin happens to be free so it's kind of nice that i'm just basically choosing lots of free tools that you don't have to do anything so there we go that's the that particular file and we're just going to then install that once it downloads are you finished with installing yes it started in the background and we can see it's homegroup based postgresql and then we'll just do the same thing with this as we normally do and just drag applications across um that's that's corrupt i keep selecting chrome i don't want to select chrome give me the application uh in my downloads please yes put pg admin please not chrome there we go just press agree and go through that process the usual kind of stuff and we've got that available so that can kind of carry on in the background now what we should probably discuss a little bit is uh programming languages now your mac will come with different programming languages by default let me just start a new tab up by pressing command t here and sorry about that dialogue that's just going to work in the background if we look at let's say just a version of ruby that's installed by default 2.6.3 that's 2019 stuff we probably want a better version than that and we want to have control over the versions let's just take uh let's just see what versions of php remember i'm on catalina here at the latest version of catalino i believe so different versions of php will be available so that's 2020 branch of php and how about python uh with python you'll have uh yeah 2.7 uh yeah that's fine uh can i just quit to get that oh quit open brackets close brackets um yes so uh python is 2.7 you may want 2.7 or 3 depending on which version of python you're using in web development so we'll we'll be able to install other versions and that anyway to carry on there we go we just drag rpg admin across and that should be pretty much done shortly uh that's 400 megabytes okay it is a web-based application that's quite a lot but uh yeah i'm just i'm just complaining for complaining sake there right so onward then with installing uh rvm so for ruby we want to have in different projects we might want to use different versions of ruby so if i'm working on a legacy project i might have to use an old version of ruby if i'm creating a new application i want pretty much almost the most up-to-date version as possible so to install it we're just going to grab here from this uh rvm.io uh you can see yes we can do various things but i'm just going to install well you can install ruby on rails in the one command but i'm not going to do it one command i'm going to keep things separate so in here i'm going to paste in this and it's going to install ruby version manager there it is and it's installing shouldn't take very long in that case i don't think and are you finished with everything else i can shut that tab and we're back down to the ruby tab there we go this is now ready so if i type it rvm list uh oh i need to just open a new tab and close this one or go into a source command but i'll just open a tab and close this one easy ivm yep so that's installed i can do stuff so rvm list and it's probably gonna go uh no so what we now need to do is install a version of ruby the rvm will then use to you know that we can then program with so uh to do that we're going to look onto ruby.lang.org and take a look at the latest version of ruby so let's just take a look at uh different versions of ruby are available ruby 3.0.2 is released um this releasing through security fixes so i will start out with that was in july so that should be enough time for various different authors to update their code so having that available is fine so we don't need to worry about downloading all and stuff like that because we have ruby version manager to install it for us the older version of ruby is 2.7.4 if you didn't want the 3.0 branch but don't worry we're just going to go up 3.0 so to install that we're going to use rvm install ruby dash 3.0.2 now if no one's actually created a compiled version of this yet your your mac is now going to compile it um that may take a little bit of time and your mac will heat up while doing it don't worry it's quite normal so let's see if we have one available searching for binary review people have already compiled no it looks like we're going to go through compilation so i'm going to stop the video here and we'll come back once it's finished compiling ruby is now complete so installed so we should just be able to do our vm list again and now we should see yes this is installed and you can see also with these characters it's saying that that's the current and it's also happens to be the default so uh that will be the default for new projects and before we carry on just now that we've installed all of our text editors we do want to do one more thing with text it is i've switched over to chrome here because like you can see the full url here in case you need to look at this yourself uh in each of them there is a command line version of the program to launch that editor so for example i'm here in my home folder if i want to create let's say a new folder so i'm going to make directory uh sites let's say and then uh ls uh sorry go into let's change directory into sites these are common linux commands you'll get used to them quite easily nothing in there at the moment if i wanted to create something in here i create a project and uh to do that i'm going to want to then open that project so if i'm going to make it directory uh whoops make directory test for example i'm going to go into that and then i'm going to just create a test file text text.txt that just creates an empty file now if i look here i've got an empty file but this file is going to have this these folders are typically going to have hundreds or thousands of files in them so i'm going to want to be able to open my text editor of choice to if any particular folder and have it as a project because there isn't any project files like in something like visual studio or xcode so we're going to want to be able to type command to be able to just say hey open here in a text editor so to start that out it's quite easy it's different for each text editor but there is one for each of these three so uh for mac it says here for uh command line uh so the command line interface for sublime text if you're using zsh the default yeah yeah yeah so we're just going to copy and paste this for zsh into here and that's pretty much going to enter my z profile file don't worry about what that is just yet uh the same thing for text mate so we're going to want to do that i need to just double check this i'll come back to that i'm not going to be using textmate for the moment but and then in visual studio code we're going to do um well you have to actually do it from within visual studio code and it's quite straightforward to do it says instructions here is open the command palette command shift p and type shell command so let's wait for that to boot and then i'm going to do a shell command install code command in path is what we want click on that successfully installed so now if i just go back here for a second and i'm just going to do that trick of opening a new tab and closing the old one because i'm not going to use the source command uh it's just easier to do it this way and then i'm just going to type in let's say go into sites go into test in fact let's just see whether it will actually tab complete it will which is kind of handy and then you can see those same files are here and if i then type code here you'll see it boots up visual studio code and then yes it basically says trust yeah trust everything i i know what i'm doing yes i trust the authors and then you see here left on this explorer section let's just maximize this up there is that that test file i actually created here and um yeah that's perfectly fine i can do the same thing then with uh sublime um so same thing there subl and same thing is true so very handy shortcut way of getting into that you can go into each of the programs and then like go into file and open a workspace or um openness project or whatever the individuals do but it's much much faster just to get around using the command line once you've learned a few things on the mac so that's fine and i will do the textbook one after i've checked it through and uh and that should be fine but this is the url for it it's a very old uh editor text mate so i'm not too concerned about it for now right so uh we've got everything set up here now we have ruby or the latest version we should yep 3.0.2 i'm just going to exit out of that and now i'm going to basically want to set up rails on top of ruby so uh now we just need to uh basically usually type sudo gem install rails and it's probably gonna ask me for password yes and now it's gonna go and grab a whole bunch of different files uh shouldn't take as long as compilation but yep there it goes gems are just pre-packaged lots of files basically for all with ruby code in them so don't worry about what they are again yet if you're new to ruby on rails but if you know what you're doing ruby on rails you know exactly what gems are so we will cover those independently and we gotta wait till that's finished installing shouldn't take very long um building native extensions that might take a little bit longer but yeah no problem we'll come back once it's done once that's finished doing everything opening up a new tab just as before and then type rails v and you'll get rails 6.1.4 and you're ready to go so if you create a directory or go into the ones i created here uh we can type in just rails new and then a site name so let's just say uh well i've already got a folder called test so let's just call it test2 and you also can apply some optional stuff here if you like now by default as i said before it's going to install a sql lite but if you want to use your database you just installed you can just type database equals postgresql and it will have defaults for the database that you've installed on your system and then just press enter and away it'll go and it'll create stuff it'll install stuff and uh you should be ready to get started with um with ruby on rails uh however there are some other things you're going to want to install um and just let's do that in a net another tab while the original one such installing uh so now we're probably gonna want a few other things uh for example i'm gonna want probably npm and node uh the javascript stuff but um again just brew install npm should do that job in particular and uh we should be good to go there let's go back to the original tab yeah some of these are gonna take a little while to install the first time but when you create another project after this point it's going to be very fast indeed because you've already got them so we'll have those available on this side this is going to take a little bit of time while it downloads and potentially compile stuff depending on what you're actually doing so yes i've got npm i will also have a couple of other things i'm also going to install redis uh again both of these are pretty optional um i think npm we're going to use anyway redis is optional definitely uh but is very useful for doing all kinds of things in programming in particular it's useful for caching it's useful for having queues it's well we'll get into it but to install it brew install redis and away you go that's pretty much the entire thing i think i think we're ready pretty much to start web development and we can install more stuff as we go on later and we can install that stuff via brew ideally because it's just easy just type brew install and whatever it is brew will go and get it for you we've got a web development framework to use again we can go through in other videos and show you how to install things like django things like laravel there are different uh other utilities things like docker if you wanted to have container stuff we'll go on to that again in another video hopefully this has helped you get through setting up a new mac to a point to which you can start a new ruby on rails project with the rails install the first program the first basically project we're going to go for it saying yarn isn't installed so we're just going to want to go over here and actually install yarn yarn is basically going to deal with some other stuff for us so we may as well get it installed and installation yes yes yes we're going to install by npm yeah we can do it that way and of course we're installing npm in the other tab which is now done so if i just open that and then do npm install yarn uh yeah yeah not yawn and there it goes added one package so we should be good to go and if i just open another tab again and i just go into my test2 site okay so there you can see we have our usual rails sort of set up we've got all of our usual files now i wanted to i just want to create a quick thing in this test project just so that i can show you the database browsing of pg admin so i'm just going to create oh i don't know something that's that's pretty useless for this so uh rails generates uh a scaffold uh let's just call it um items and give it a title and a description okay don't worry what this command is i'm just gonna give it basically a command to generate a whole bunch of sample code that includes a database migration so i can just show you the database and then i'm going to type railsdb create that will create a test2 database or should do yep there it has and railsdb migrate will actually just make the changes i've just asked for to the database and we'll go into that so now i should be able to just go to pg admin which we downloaded if you remember and if i go into that once it boots up it should boot up in a browser sort of environment uh yeah it's uh it's fine it used to be a standalone program but they moved it's like html based and uh it's a bit inflated but it it's generally not hard to use okay pg admin has now started up uh kind of don't i just said no it can't be empty okay so let's do an example password doesn't much matter as far as it's concerned so we can just maximize this as before i'll click on the green button and then we have servers on the left hand side so if i look at this it's going to have pretty much no servers by default we're just going to create a server and it's going to be basically a local host server so i'm just going to type localhost it's on my machine uh yes yes yes and it's going to say either hostname address or service must be provided so hostname is just going to be localhost okay and leave the default port maintenance database uh username that may well be your actual um account name like my mummy tom instead of postgres but i'm just going to give it a try uh postgres does not exist yeah maintenance database fine and i'm just going to change that to tom in case that is actually the default yes it is the default okay so that's fine and then you can see here localhost so i can see databases and if i expand that out you can see i've got the postgres once you can ignore and then these two databases that we just created so if i go into those i can then go and see if we just go down to schemas and then into well that's already that's already expanded and then into tables we can see we've got a table called items okay so if i click on that and right click and then um i want to just view the data all rows there aren't any rows but this will also show a couple other things yeah so you'll see here at the bottom these are the columns that have been created by that rails command so we've got id we've got title we've got description and these two are sort of provided by rails created at an updated app for when you create the records inside this table so we have the pg admin working it's all fine and connecting to postgres so i can close that for now i don't normally uh yes leave it's it's html based so it shows that browser message i don't normally use pg admin unless i actually need to i will generally just do things in command line but it's there and it's very useful to have if you just want to browse the data and make sure that the commands you've typed are what you expect so we've now got pretty much everything we need and i'm just going to get rid of those uh test two and uh yep so i'm also gonna get rid of uh test oops not cd now just wanna rm rf test all right we've got a nice clean size directory ready to get started in the next video if you enjoyed this video please feel free to subscribe down below there are plenty of people who might be interested in future videos and they're going to be a whole series of ones taking you through from scratch getting into a full rails project or a full site project for you to develop alongside uh if you like the video of course click on the like button you can press the bell for notifications if you subscribed and more importantly leave comments then below with alternatives a lot of these things i'm doing uh obviously it's opinionated it is my opinion as far as which of these programs are useful i'm hoping that the majority of people who do web violence on mac will agree with me somewhat here but of course it is my opinion so you know your mileage may vary other than that we're ready to get on with the next video and i hope i'll see you there

Channel: Code Build Repeat

Views: 284

Keywords: ruby on rails, web development, setting up mac for web development, setting up macbook for web development, web development guide, web development tutorial, mac setup guide for web development, tutorial for mac web development, tutorial for web development

Id: INu__mWGmLA

Length: 32min 1sec (1921 seconds)

Published: Sun Sep 05 2021