Node.js projects in Coder

A guide to setting up and running Node.js projects in Coder. Shows you how to create a Coder image that contains the necessary dependencies such as Node.js, Gatsby and yarn that are needed for a sample blog project that's written in Node.js. For more detailed instructions, see the accompaning guide(https://coder.com/docs/coder/latest/guides/customization/node).

Here's a front-end project in github that is configured for development in Coder. It includes a coder.yaml template file, which explains everything that the workspace needs, a docker image with the necessary dependencies such as Node.js, Gatsby and yarn as well as CI to automatically build and push this image, and then finally the project files.

So if we go into the src folder we'll notice this looks just like a normal Gatsby project with the pages,the style, and if we go into the the root we will notice a package.json and a yarn file.

So without further ado, let's go ahead and create the workspace. I'm going to go ahead and click this "Open in Coder" button which takes me to a screen inside of my Coder deployment which will ask me to give it a name. I'll just name it company blog.

It's going to ask me what organization I'd like to put it in. I'll use the sandbox one. It is going to ask me what workspace provider to use. I'll just use the built-in one. And finally the workspace is building.

While we're waiting for the workspace to build, let's go ahead and go back to the project and take a look at the template. Notice here that it said it built it from a workspace template. It didn't actually ask me what resources I wanted in the workspace itself, but it automatically created that. So if I go into the company blog repo, inside coder.yaml you'll notice that it's actually specifying the cpu values, what image to use, and other settings for the workspace, as well as including configure steps which will run as soon as the workspace is started. So this is actually configuring nvm for me and actually cloning the project into the the workspace. Finally it's adding a dev URL so that I can access the the running application.

Going back, we can take a look at the image folder, and this is where we can actually take a look at a lot of the developer tools that are being added into this workspace. First of all it's creating a Coder user and installing nvm. It's actually installing a specific version of nvm and that is because this project specifically works with that. It allows dependencies to kind of be configured and hardened across the team. It's also installing a very specific version of node, setting it as the default node, and then installing the two global packages.

Essentially this configuration file alleviates the setup involved with any developer on the team who would need to go ahead and access this company blog file. You'll also notice that there's a github workflow and what this does is actually just builds and pushes this image to the Docker hub automatically. So essentially inside this repo is not only the source code for the project but an image and a workspace template that is configured with everything necessary to develop in Coder.

Going back to my workspace, it looks like it actually just ended. It ran these configuration steps to configure nvm, clone the git repository, and then finally set the default folder. If I now open VS Code--I can also open it with a local editor such as VS Code remote if I was to configure ssh access--but I can also just open it with VS Code inside the web browser. Coder can also open it with any JetBrains editor--so maybe WebStorm would be a good example--but that just simply wasn't added to the image. If we wanted to add it we could just go into the Docker file here, and simply just add a couple of lines to install WebStorm.

That being said, we are opening VS Code in the web browser. You'll notice that the project is automatically cloned, and if I run node I already have node installed and...looks like I forgot how to exit...there we go. If I type Gatsby I also have the Gatsby CLI installed.

I'm going to go ahead and do an npm install...and a Gatsby develop to begin developing the app.

Now the development server is running I can go back to my workspaces panel and I'll notice that a dev URL has automatically been created. I can go ahead and open this and see a preview of the app. This is essentially localhost, but it is given a secure domain which currently is set to private but I could also set it so that someone else would be able to access it.

If I want to make a change, I can just search for where it says "Gatsby starter blog" ... looks like it's in the config...looks like it's here.

[typing] hello coder

and it will live update courtesy of Gatsby. Again I have a full development environment in the cloud that is configured for Gatsby development.