{"id":70517,"date":"2023-03-06T09:27:47","date_gmt":"2023-03-06T17:27:47","guid":{"rendered":"https:\/\/github.blog\/?p=70517"},"modified":"2023-03-07T09:07:32","modified_gmt":"2023-03-07T17:07:32","slug":"how-to-automate-your-dev-environment-with-dev-containers-and-github-codespaces","status":"publish","type":"post","link":"https:\/\/github.blog\/developer-skills\/github\/how-to-automate-your-dev-environment-with-dev-containers-and-github-codespaces\/","title":{"rendered":"How to automate your dev environment with dev containers and GitHub Codespaces"},"content":{"rendered":"

When I started my first role as a software engineer, I remember taking about four days to set up my local development environment. I had so many issues with missing dependencies, incorrect versions, and failed installations. When I finally finished setting up all the tools and software I needed to be a productive member of the team, I cloned one of our repositories to my machine, set up my environment variables, ran npm run dev<\/code> and received so many errors because I forgot to install the dependencies (and read the README) or switch to the right node version. Ugh! I can\u2019t tell you how many times this happened to me in my first year!<\/p>\n

Back then, I wished I had a way that was streamlined\u2014something I set up only once, that just worked every time I accessed the repository. Although I did learn how to automate my computer setup <\/a>with a Brewfile, I wish I could just get to coding in a repository without thinking about configuration.<\/p>\n

\"Gif
\nsource<\/a><\/em><\/small><\/p>\n

When I think about how we work on projects in a repository, I realize that many of the processes we need to get started on that project can be automated with the help of dev containers, in this case, by using a devcontainer.json file and Codespaces.<\/p>\n

Let\u2019s take a look at how we can automate our dev environment by adding a dev container to this open source project\u2014Tech is Hiring<\/a> in GitHub Codespaces.<\/p>\n

\n For a TLDR of this post, GitHub Codespaces enables you to start coding faster when coupled with dev containers. See image below for a summary of how:\n<\/p><\/blockquote>\n

\"Image<\/p>\n

Now, let\u2019s get some definitions out of the way.<\/p>\n

What is GitHub Codespaces?<\/span><\/a><\/h3>\n

GitHub Codespaces<\/a> is a development environment in the cloud. It is hosted by GitHub in an isolated environment (Docker container) that runs on a virtual machine. If you\u2019re not familiar with virtual machines or Docker containers, take a look at these videos: what is a virtual machine?<\/a> and what are Docker containers?<\/a>.<\/p>\n

Currently, individual developers have 60 hours of free codespaces usage per month, so definitely take advantage of this awesomeness to build from anywhere.<\/p>\n

What are dev containers?<\/span><\/a><\/h3>\n

Dev containers<\/a> allow us to run our code in a preconfigured, isolated environment (container). It gives us the ability to predefine our dev environment in our repositories and use a consistent, reliable environment across the board without worrying about configuration files\u2014since it\u2019s all set up for us from the beginning with a devcontainer.json<\/code> file.<\/p>\n

What is the devcontainer.json file?<\/span><\/a><\/h3>\n

The devcontainer.json<\/code> file is a document that defines how your project will build, display, and run. Simply put, it allows us to specify the behavior we want in our dev environment. For example, if we have a devcontainer.json<\/code> file that includes installing the ESLint extension in VS Code, once we open up a workspace, ESLint will be automatically installed for us.<\/p>\n

Automating your workflow with dev containers and GitHub Codespaces<\/span><\/a><\/h2>\n

To start using GitHub Codespaces, we don’t need to set up a devcontainer.json<\/code> file. By default, GitHub Codespaces uses the universal dev container image<\/a>, which caters to a vast array of languages and tools. This means, whenever you open up a new codespace without a devcontainer.json<\/code> file your codespace will automagically load so you can code instantly. However, adding a devcontainer.json<\/code> file gives us the ability to automate a lot of our dev environment workflows to our liking.<\/p>\n

\n Okay, okay, that was a lot of chatter\u2014let\u2019s now get into what you really came here for!\n<\/p><\/blockquote>\n

\"Gif
\nsource<\/a><\/em><\/small><\/p>\n

Using the open source project, Tech is Hiring<\/em>, let\u2019s walk through how we typically work with a repository using our local dev environment.<\/p>\n

What work typically looks like<\/span><\/a><\/h2>\n

At first glance, we see that this project uses Nextjs, Tailwind CSS, Chakra UI, TypeScript, Storybook, Vite, Cypress, Axios, and Reactjs as some of its dependencies. We\u2019d need to install all these dependencies to our local machine to get this project running.<\/p>\n

    \n
  1. Let\u2019s clone the repository, and cd into the project.\n

    \"Gif<\/p>\n<\/li>\n

  2. \n

    Then, let\u2019s install dependencies to get the project running locally.<\/p>\n

    \"Gif<\/p>\n<\/li>\n

  3. \n

    This project uses storybook, so let\u2019s run both storybook and spin up the actual app locally.<\/p>\n

    \"Gif<\/p>\n<\/li>\n<\/ol>\n

    The process is not so bad, but it took a bit of time. We also need to check to make sure we\u2019re using the correct node version, check if we need any environment variables, and if there are any runtime errors to resolve. Thankfully, I didn’t encounter any errors while working on this, but it still took a bit of time.<\/p>\n

    Going faster with GitHub Codespaces and dev containers<\/span><\/a><\/h2>\n

    Let\u2019s make the process better by adding a devcontainer.json<\/code> file to this project and opening it in GitHub Codespaces to see what happens.<\/p>\n

    We can either use the VS Code command palette to add a pre-existing dev container or we can write the configuration file ourselves (which we\u2019ll do below).<\/p>\n

      \n
    1. Let\u2019s first create a .devcontainer<\/code> folder in the root of the project and a devcontainer.json<\/code> file in the new folder.\n

      \"Creating<\/p>\n<\/li>\n

    2. \n

      Now, let\u2019s automate installing dependencies, starting the dev server, opening a preview of our app on localhost:3000, and installing vscode extensions. Once we get everything configured, your json file should look like this<\/a>:<\/p>\n

      {\n  \/\/ image being used\n   \"image\": \"mcr.microsoft.com\/devcontainers\/universal:2\",\n  \/\/ set minimum cpu\n   \"hostRequirements\": {\n       \"cpus\": 4\n   },\n   \/\/ install dependencies and start app\n   \"updateContentCommand\": \"npm install\",\n   \"postAttachCommand\": \"npm run dev\",\n   \/\/ open app.tsx once container is built\n   \"customizations\": {\n       \"codespaces\": {\n           \"openFiles\": [\n               \"src\/pages\/_app.tsx\"\n           ]\n       },\n       \/\/ install some vscode extensions\n       \"vscode\": {\n           \"extensions\": [\n               \"dbaeumer.vscode-eslint\",\n               \"github.vscode-pull-request-github\",\n               \"eamodio.gitlens\",\n               \"christian-kohler.npm-intellisense\"\n           ]\n       }\n   },\n   \/\/ connect to remote server\n   \"forwardPorts\": [3000],\n   \/\/ give port a label and open a preview of the app\n   \"portsAttributes\": {\n      \"3000\": {\n         \"label\": \"Application\",\n         \"onAutoForward\": \"openPreview\"\n       }\n     }\n}\n<\/code><\/pre>\n
      \n  Sidenote: I\u2019ve broken down the purpose of the properties in this file for you by adding comments before each. To learn more about each property, continue reading at container.dev<\/a>. I also installed a few extensions that are not needed, but I wanted to show you that you could automate installing extensions, too!\n<\/p><\/blockquote>\n<\/li>\n
    3. Let\u2019s commit the file and merge it into the main branch, then open up the project in GitHub Codespaces.\n
      \"Committing<\/p>\n
      When we open up the application in GitHub Codespaces, our dependencies will be installed, the server will start, and a preview will automatically open for us. If we needed environment variables to work on this repository, those would have already been configured for us as a repository secret<\/a> on GitHub. We also didn’t need to install hefty node_modules<\/code> to our machine.<\/p>\n<\/li>\n<\/ol>\n
      I call this a win!<\/p>\n
      Comparing both ways<\/span><\/a><\/h2>\n
      There\u2019s plenty more that we can do with dev containers and GitHub Codespaces to automate our dev environment. But let\u2019s summarize what we just did in GitHub Codespaces and with the help of dev containers:<\/p>\n