Coding in the browser with Gitpod!

more and more services these days are moving to the cloud in fact we're now able to set up and run our entire development environment through the browser using tools such as github code spaces and gitpod this means that we can take all of the processing power away from our dev machines and virtually eliminate the hassle of setting up a brand new environment you can think of these services as something similar to docker but instead of running the container on your local machine it's all done through the browser today we're going to take a look at git pod get set up with a demo app and get a feel for how it all works so i'm on the gitpod website getpod.io and if i got a quick start it's going to give me and some instructions on how to get started so we can start with some templates and i've gone down here to react i'll click on the react template and it tells us how to get started with the react template takes less than five minutes so i'm going to go into step one here and create a new repository based on the react template so i'm going to click on this link and this will start the process for me to create a new repository and by cloning this template so i'm going to call this git pod demo react template and i'm going to leave that as public and create repository from template so while that is up and running we'll have a look at step two and that is to install the git pod app so we'll click on this and this will get started installing git pod into my github account so install on your personal account in lanham.demo and so i can choose from all repositories or only select repositories this is my demo account i'm fine with choosing all repositories what i think this means is that it's going to install get git pod on all of the repositories not actually set up a github gitpod workspace or environment or anything like that so it should be pretty safe to click on all repositories but if you want to just click select repositories you can just click select and choose from a list so i'm going to go ahead and click all repositories and click on install so i now need to click on install app this will allow gitpod to access private repositories as well okay so installation is successful here i had already set this up before so i think there's a couple more steps that if you're doing this for the first time you'll have to do it includes approving the access and it tells you exactly what it needs to access in your github repositories so i'm going to click on go to dashboard here and we've got no projects and no workspaces if we look at step three uh the step three is the first pre-build now the instructions here i've tried this earlier as i said and these instructions weren't working for me it kept resulting in an error so what i'm going to do is go into projects and i'm going to create a new project from the dashboard so i've got git pod demo react template uh shows up here already so i'm gonna click on select so i need to create a team name so i'm gonna call this ian get pod demo click on create team and now so what it brings me to here is the gitpod.yaml file so if we have a look at the instructions um it says gitpod displays the pre-built progress status by running the init commands in the gitpod.yaml file before you even start a workspace so what we're seeing here is that git pod yaml file and the init command currently for this demo is just yarn and yarn start but obviously if you had a more complicated application this is where you would put all your instructions in here to actually set up the workspace so i'm going to click here on run pre-build as far as i know uh that only needs to be done once it's just to get the whole project set up so i'm going to click on run pre-built and that should take probably 30 to 40 seconds i think um so we'll let that run okay so that's finished running now that took about 45 seconds according to this here so from here now we can click on new workspace so click on new workspace and it's starting to set up you can see here it's given me a url and now the app itself is loading so we have here on the right we have a simple browser built into the gitpod workspace here down here we have a terminal on the left side we have our ide now you can see this looks basically like a vs code it looks like the same thing so they must be using vs code in the browser here click on source and let's start playing around with it so this is app.tsx and this is a typescript file so i'll click on app and you can see what happens here if i change any of this text here so i'm going to just add a couple of question marks leave it a second and you can see it immediately reloads and saves the actual file so there's no need to actually manually save it i've just typed and about one second later it saved it for me and you can see here source control on the left shows now that there are new changes to commit so i'll close that so we can do things like look at extensions and we can install a theme for example i already installed the dracula official earlier so i'll have a look at this sweet dracula click on install and immediately changes the theme to sweet dracula actually pretty nice as well you can see also we do have command palettes so if i do command shift p um opens the command palette and if i type in theme i can click on color theme and pick um any of the themes from here so there's normal dracula and inadvertently i actually closed the browser so let's see if i can figure out how to open that again so let's have a look at the command palette and type in browser and there it is simple browser show and it's asking me to enter a url so we do have the urls down here which is localhost 3000. we're not sure if that's going to work let's let's copy that see what happens do simple browser show and enter in localhost and that doesn't work so this is actually a clickable link so if i hold command on the keyboard and click on this link now here we go so this opens up the actual app in a full browser window which is probably how you're going to want to use gitpod anyway let's see what happens if we copy this url that it's given us so it's given us here a an actual fixed url with sapphire donkey and a whole bunch of stuff at dot git dot io so it's there it's being hosted by them so if i try this again command palette simple browser show and put in that url so we get a simple browser back here and i can go split screen again by clicking on that button and uh okay close that i can just drag it across so there we have our browser back we've got the menu buttons over here so we've got normal stuff file and edit selection so you can have a look through that and see what those do we can click on down here we can have a look at get pot open and vs code so click on that and see what happens open visual studio code and click on ok [Music] and install so it's asking me to install git pod okay so this is a another app that i've been working on still going here okay so i need to authorize git pod local control client so okay click on authorize and then we'll try again and open has fingerprint shot do you sure you want to continue okay i'll click on continue here and trust the authors of all files in the parent folder i'll click yes and continue all right nice there we go so application is running on port 3000 if i click on open in browser and there you have it uh localhost 3000. uh yeah thanks localize 3000 is running the app so this is running in my local vs code and let's see what happens if i change app.tsx and i will add another two question marks and for here obviously i need to actually do save um and there we go we have all our question marks and does that reflect here i wonder yeah it also updates uh on the actual browser so so yeah that's a brief introduction to getpod and how it works i think it's really cool um i'm definitely going to look at setting up some of my own projects on get pod and it's going to be really handy for things like when i go on holidays for example i usually take my laptop because there are some projects that i have that clients are using and if something breaks i want to be able to fix it straight away so with this i can potentially take an ipad and i can log into git pod online and make a quick fix if i need to and carry on with my day so yeah i think it's really cool i'll take a look at it and let me know in the comments below if it's something that you would use yourself if you liked the video please make sure to hit the like button and also subscribe to my channel if you haven't already so thank you for watching and i will see you in the next video [Music] you

Channel: Ian Lenehan

Views: 80

Keywords: gitpod tutorial, gitpod github, gitpod, react, javascript, coding in the cloud, programming, vs code, online ide for web development, web development, online ide, vscode setup, vscode theme

Id: 6m1l6DAtgBw

Length: 9min 26sec (566 seconds)

Published: Mon Nov 15 2021