Coffee and Coder (April 2021)

In this month's episode, Ben shows you how to set up a VNC desktop in a Coder workspace and demos our new workspaces as code feature that lets you define and create new workspaces using workspace templates.

Welcome to Coffee and Coder.

I'm gonna go ahead and start in a few minutes,but I'll just wait for people to come in. If you've been to another Coffee and Coder before, this one's actually a little bit different. We're just doing it as a normal Zoom call and the reason being if you have questions or just want to chat or just are curious about something just feel free to send something in the chat or even just unmute and interrupt me. I'll also be monitoring to see if anyone has their their hands raised. That raised hands feature has been pretty useful in the past. I guess the goal is that this isn't going to be a formal presentation, but definitely just feel free to raise your hand or just unmute if you have questions. I also see a few people from Coder in here. if I answer a question and you'd rather if you'd like a better answer or something feel free just to unmute and do it. I won't put anyone on the spot from Coder, but it's definitely cool to see you guys here. So it'll be cool to get going.

One other thing I'm going to do is I'm going to go ahead and paste in a lot of the links to the things I'll be referring to in the Zoom chat. I know the Zoom chat doesn't show up for people who are joining in a little bit late, so if someone ... looks it's a markdown too ... see if I can avoid that ... it'll be in markdown but it'll still be links. There we go. These are just gonna be some of the things that I'm gonna be going over, so while I'm going to certain pages and stuff you can go ahead and just click on a link in the Zoom chat. Then if someone has a question or something you can go ahead and just share that link with them if they're joining a little bit late.

Cool. So without further ado. we have a lot to share with what's new in Coder. Yesterday we had our 1.18 release, so I'm going to be talking about some features that just came out in 1.18 and then some a little bit before that, but have been refined in 1.18. And then one thing that's been here for a while which is VNC inside of Coder, but it's pretty cool so I'm excited to show it.

The first thing I wanted to talk about is something that we are calling workspace templates. I'm gonna go ahead and just click on the the docs and show that. It's also called workspaces as code and it's just the idea that you'll be able to create a developer environment in Coder by defining all of the elements in a yaml file. So a developer doesn't have to go ahead and individually configure each aspect of their workspace. That's all handled for them and it could be put in a git repo. It also just allows you to add more controls onto what you'd want your workspace to be that you otherwise wouldn't be able to do.

I'm just going to go ahead and demo how this would work. So there we go. It's my second link. This is actually going to be really helpful for me too. I don't have to go to anything I can just click the links I put in the in the Zoom chat. This is a GitHub repository which just is a sample blog application. It's written in Gatsby, and there's this little "Open in Coder" button. We've had this button for a while, and you've been able to put it in your projects but it works a little bit different with our new workspaces as code release. One thing I wanted to mention, too -- actually before I get into that is I'm gonna go ahead and go to my Coder cluster.

These workspace templates aren't enabled by default. You're actually gonna want to -- let me make it a little bit smaller -- you're actually going to want to go into your admin settings and it's going to be under workspace templates. You're going to want to enable "Enable using Workspace templates." That's how basically all this is possible, so as an admin you have to enable this feature.

Going back here we have our "Open in Coder" button. Just imagine I'm any developer working on this project in the and I have an account on Coder. I can go ahead and just click this "Open in Coder" button and we see this wizard-like thing. It's asking me to name my workspace, so let's imagine I need to make a change to the company blog code. I'll just name it blog code. I can go ahead and hit next. I can pick the organization, hit next.

I can pick a workspace provider. This is something else that's relatively new. I can stop here and talk about this for a little bit. This is the idea that Coder can be installed across multiple clusters which could be maybe across different clouds, maybe across different regions. I have my built-in one which has a 38 millisecond ping and I also have one in the east and I'm actually from the east coast so I'm getting a significantly better ping with this one. For something like just making code on a website it's not gonna be a huge deal. This is still a pretty good ping. I'm just gonna choose the built-in one, but for the next demo I'm going to do it's going to make sense for me to have a little bit better ping, so I'm just going to go ahead and use the default workspace provider that I have installed.

This is going to take a ittle bit to build, so I'm just going to go ahead and go back to our our docs for workspaces as code and explain what just happened. Because I didn't actually pick what image I wanted to use for my workspace, I didn't pick how many CPU cores I wanted; I didn't pick the amount of ram I wanted; I didn't really have to decide any of that; that was already decided for me and where that was decided for me was -- going back to the GitHub for the company blog -- there is this new doc Coder folder that i've added and inside it we have a coder.yaml.

Here's where the workspace template comes in. I'm actually defining all of the settings for the workspace here. This is the image I want to use. I want it to be a cvm so I can use Docker inside of this image or inside of this workspace. I can set how many CPU cores and then some commands that are actually going to go ahead and run right as the workspace has started every time. So this is actually cloning the repository as well, and then it's also adding a dev URL for me to access the blog which is going to be private. Something else I also added to this this repo is this image folder, and this is something that Coder naturally doesn't have to do, but I decided I wanted to put the image for this workspace -- the docker image -- in the same repository so that it's constantly up to date with the workspace file. This is essentially where it's just saying "this workspace needs to have node we actually want to use nvm instead just maybe we have different projects we want to just work across different versions of node.js. Things like that. That's all being defined here, and then I just have a GitHub action that's going to go ahead and build and push that image. That's not something necessary to code or that the image has to be built inside the same repo, but it's just the idea that now this environment that I'm going on to that is being cloned right now and is ready is completely version controlled. If I was to go back in like a year I would know exactly what the environment people were developing off of, which is pretty cool to think about because a project evolves over time and if the definition for that project both the image and the amount of resources and commands and stuff is with that you can just go back in time and access that. Same can be said with adding incremental updates. You can just create a branch and experiment with the environment as well as the code itself.

Now we're just in a normal Coder environment except it will say built from template here instead and if I go ahead and try to edit it it's actually not going to let me. The source of truth for all of this information is actually this GitHub repository instead of being just inside the UI. If I go into here it's not really going to be anything special; it's just going to be my VS Code. As usual in Coder I can go ahead and open the project that it cloned for me the company blog. If I open up a terminal and just do node -- oh well -- it I it would have node ... I must have ... I was just messing with this image beforehand, but this would have node.js and nvm and everything installed, so this would be good to go. It wouldn't be a demo if something went up ....

Jonah, I see you raising your hand; you can go ahead and just unmute

JONAH: So can you hear me?

BEN: I can.

JONAH: Very well. I have a question. Because you said the single source of true for that workspace is the GitHub repository. So if I for example start compiling my project and realize it takes ages and I want to add more CPU and then change that particular setting in the template does it automatically change all workspaces or do you have to manually trigger a rebuild?

BEN: Yeah, so it will. I can actually do that. It won't automatically do it because say someone is in the middle of their code and then their workspace gets rebuilt that would suck. But say I needed three CPUs instead of two I can go ahead and just upload upload the update template and I'll just say "add CPUs." I'm just gonna commit to the main branch right away and if I actually go back to this workspace and refresh it it will tell me that the template's been updated and then when I go ahead and rebuild this and I go down here it will say that it has three cores instead of two. So that would be like if there's other people on the team they would also see that message and they'd be able to update it to get access to the to the more cores.

JONAH: All right. very well. Thank you.

BEN: Yeah, totally. Before this feature came out this is something that couldn't be done. The image could be updated specifically but that's just one aspect of the template. So before that this was basically the only thing that could trigger live updates and now basically anything in here, if it's changed, someone would get a notification and be able to to rebuild their environment.

Cool. Going into the docs for how this works -- we actually in the 1.18 release just added support so that it doesn't have to just be a coder.yaml. You could have multiple yaml files in it. So maybe one repo could hold all of the different workspace definitions, for example. Just a few different workflows it can work for. If you just click the workspace templates thing either here or in the sidebar, it will go over the exact schema that you can use and some of the additional things I didn't talk about. Currently the only workspace provider in Coder is Kubernetes, so that's the engine that creates the workspaces and you'd be able to attach labels to the different pods in Kubernetes as well. I believe there was something else specific to Kubernetes you can give it GPUs as well which is nice. I guess it's just those those labels, but it is going to be pretty useful to be able to label and understand how that's working.

This was also one of the things that I'll link but I'll go ahead and throw it in chat again. That's essentially workspace templates in Coder, and I'm really glad you asked that question Jonah because it was cool to demo the fact that hey we need more sores and instantly the notification comes up.

Moving on...

AMMAR: Just to say something else. Another thing you can do is over provision. If you have a need -- like you personally need a lot more resources than your team members -- if you just have over provisioning in place you're not necessarily going to be wasting CPU. You'll just be able to go above the limit.

BEN: I can go ahead and show that too. In the UI, so for example I was in the sandbox organization in Coder. In here I can set the provisioning rate so essentially this four to one ratio -- Ammar you can correct me if I'm if I'm butchering this -- but this four to one ratio means that for every four cores that I choose it's actually ... or that if I choose four cores that's actually being paired with one physical core. So the assumption is that at least in my workflow that most developers aren't going to be using all of their cores at this time, so it's okay to over provision that but then during a spike time it'll actually end up using more resources.

AMMAR: Yeah, that's correct. It's a worst case guarantee. So if you're like four to one you're guaranteed one core if you've provisioned four. There's a little guide here that's nice and easy to read and shows the basic ideas.

BEN: Oh perfect, yeah. The the resource management ... I love this graph! This graph is really cool. I mean it goes over what I said where it's for the most part each developer is not really using their full CPU so when it's all together in a cloud environment it just allows overall a lot more efficient resources utilization. Yeah cool.

Another thing I'm pretty excited to share is VNC in in Coder. So I have a another workspace here, which is very creatively named workspace one. Essentially when you're developing in the cloud you don't get access to certain things. Like for example, you no longer have localhost, so we built dev URLs which make it so that you can access web services through your browser which actually ended up being better than localhost because then you can go ahead and share that link with other people where it wouldn't just be on your local network. As an extension of that there's a lot of development applications such as something like Postman for example which is a desktop application and you can't really access it through through the web.

Previously as a solution for that was something like remote desktop or VNC, but then the issue is your editor itself would be on VNC and that could lead to a lot of latency and stuff. So with Coder, you get -- uh and we also do JetBrains IDEs -- but you get a very solid IDE. This is VS Code in the web browser and there's not latency because it's being rendered as elements in your web browser. It's not a remote desktop being streamed or something like that. But with something like Postman, for example, that's not necessarily as possible or easy. So it's possible inside of a Coder workspace to install a VNC or a remote desktop server so that you can go ahead and access those desktop applications.

So I'm going to go ahead and open this link. This is just a dev URL, and we'll see this is no VNC. This isn't something that's exclusive to Coder. You can use any VNC client. We have found this one works pretty well. Then go ahead and just hit connect, and now I'm inside of a linux desktop which is pretty cool. I'm actually currently on wi-fi, like at an airbnb without the best connection and I'm streaming Zoom. So it's honestly pretty snappy with all that being said. And I'm on my east workspace provider, so I'm getting 30 milliseconds ping, so it's a pretty good experience. If you scroll down we'll see this is equivalent to a medium end computer. I've got eight gigs of RAM. I have four cores so this is essentially I have access to a a linux computer here in the same environment that I'm doing my code. So for example I have Postman installed which is something that I was talking about. So a reason maybe you'd want Postman here instead of on your local computer is maybe, one, you need to access a secure network that your local computer doesn't have access to. Before that you'd have to configure a VPN or something, but Coder handles all of that with just your Coder account so you can just get a Postman. So I can make requests. Another reason would be because Coder is all of the stuff for your workspace in one you wouldn't necessarily want your Postman which you might want to version control and manage and distribute to the team the same way you wouldn't really want that to be out of sync with where you're doing the rest of your code. It's nice then because if I move to a chromebook or whatever I know that I have exactly the same collection stored in Postman, and I could even ensure that everyone on the team does without having to buy a license of Postman teams. You would just be able to add the file in for people to import not saying this is a way to avoid a license, but it's just the ability to version control software the same way you would anything else in your environment.

I also installed another demo. I was just looking for desktop development tools and there's this one called DockStation which just allows you to manage Docker containers. I've actually known a good amount of people who actually use this to manage their projects if they're not maybe as really familiar with Docker or whatever. But it's just neat. This is an app that previously I wouldn't necessarily be able to use on this workspace but I'm able just to start and manage and provision Docker containers. This way I don't really have to change my workflow using VNC.

I can show one other thing related to VNC. Right now I'm doing it through--I'm just doing it through the web browser which honestly is pretty fast and I might just continue to do this but you can also just use a local VNC client if you just run a command this which would then tunnel the port for VNC and then you can access it locally. Something cool I did was I just created a little alias in in my shell that when I do coder-vnc it will just open up a VNC client for that workspace for me.

To do that I'm gonna have to share my whole desktop so bear with me.

Yeah, I think this works. I'll just go here.

So it's just an alias I added to my shell, so this isn't going to be something specific but it's essentially just the commands that I shared simplified. If I just do coder-vnc coder.workspace1 it will forward that shell -- oh I like ran my own code wrong ... coder-vnc workspace1.

There we go. So now I have ... just using my local VNC client I'm able to access things as normally and stuff. Something pretty cool with VNC is I can just resize the window, and it'll go ahead and just resize that desktop. So I know with some real desktop solutions it's kind of a bad experience. This is honestly pretty good. And as a final thing, and this VNC client's not perfect for it -- it's hacky -- but I was impressed by this. I can go ahead and make this full screen. Actually that just worked exactly as intended, and now this is like essentially Postman that I can go back to my Coder and then I can just make it small over there. I can have my -- uh I don't need that anymore -- I'm looking for VS Code ... there we go. I've got my VS Code and then this is just essentially Postman. I'm able to work with this desktop app almost as it's as if it's on my desktop itself. My whole point with that is it can be accessed multiple ways, but the idea is this program's not running on my computer it's on the workspace.

So yeah, I mean that's basically all I had to show. If there's any questions I'm happy to show them now. Those are just two things I'm overall pretty pumped about, which is what's just new in Coder and I'm just overall with the VNC thing especially. It's just the idea that you can access whatever program you need. It doesn't really matter. It's just on the version controlled Coder workspace.

Cool, well with that, that's basically what I had to share. I think just as a closing out thing I'll send links to both our docs for the latest update so you can read up on those things yourself. There's a lot that I didn't cover, most of which was just changes to the things that I did feature like workspace providers and the workspace templates. So there's the changelog for 1.18 and I'm also going to include a link to join our community. If you have any questions that maybe you think of after the fact or whatever, feel free just to go on Slack and uh shoot me a message or just send it into the main channel either way. All the feedback's super helpful as this stuff is being built out. Let me see if I can get this link into the chat. There we go. That's linked to the community.

Awesome, well, that's basically it. Thanks for tuning in guys.