Code Monkey home page Code Monkey logo

skills-code-with-codespaces's Introduction

Code with GitHub Codespaces and Visual Studio Code

Develop code using GitHub Codespaces and Visual Studio Code!

Step 2: Add a custom image to your codespace!

Nice work! 🎉 You created your first codespace and pushed code using VS Code!

You can configure the development container for a repository so that any codespace created for that repository will give you a tailored development environment, complete with all the tools and runtimes you need to work on a specific project.

What are development containers? Development containers, or dev containers, are Docker containers that are specifically configured to provide a fully featured development environment. Whenever you work in a codespace, you are using a dev container on a virtual machine.

A dev container file is a JSON file that lets you customize the default image that runs your codespace, VS code settings, run custom code, forward ports and much more!

Let's add a devcontainer.json file and add a custom image.

⌨️ Activity: Add a .devcontainer.json file to customize your codespace

  1. Navigating back to your Code tab of your repository, click the Add file drop-down button, and then click Create new file.

  2. Type or paste the following in the empty text field prompt to name your file.

    .devcontainer/devcontainer.json
    
  3. In the body of the new .devcontainer/devcontainer.json file, add the following content:

    {
      // Name this configuration
      "name": "Codespace for Skills!",
      // Use the base codespace image
      "image": "mcr.microsoft.com/vscode/devcontainers/universal:latest",
    
      "remoteUser": "codespace",
      "overrideCommand": false
    }
  4. Click Commit changes and then select Commit changes directly to the main branch.

  5. Create a new codespace by navigating back to the Code tab of your repository.

  6. Click the green Code button located in the middle of the page.

  7. Click the Codespaces tab on the box that pops up.

  8. Click the Create codespace on main button OR click the + sign on the tab. This will create a new codespace on the main branch. (Notice your other codespace listed here.)

    Wait about 2 minutes for the codespace to spin itself up.

  9. Verify that your new codespace is is running, as you did previously.

    Note the image being used is the default image provided for GitHub Codespaces. It includes runtimes and tools for Python, Node.js, Docker, and more. See the full list here: https://aka.ms/ghcs-default-image. Your development team can use any custom image that has the necessary prerequisites installed. For more information, see codespace image.

  10. Wait about 20 seconds then refresh this page (the one you're following instructions from). GitHub Actions will automatically update to the next step.


Get help: Post in our discussion boardReview the GitHub status page

© 2023 GitHub • Code of ConductMIT License

skills-code-with-codespaces's People

Contributors

derilb avatar github-actions[bot] avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.