setting-up-your-nodejs-project-for-codespaces.md

title	allowTitleToDifferFromFilename	shortTitle	intro	versions	redirect_from	type	topics
Setting up a Node.js project for GitHub Codespaces	true	Setting up a Node.js project	Get started with a Node.js, JavaScript, or TypeScript project in {% data variables.product.prodname_github_codespaces %} by creating a custom dev container configuration.	fpt ghec * *	/codespaces/getting-started-with-codespaces/getting-started-with-your-nodejs-project-in-codespaces /codespaces/setting-up-your-project-for-codespaces/setting-up-your-nodejs-project-for-codespaces	tutorial	Codespaces Developer Set up

Introduction

This guide shows you how to set up an example Node.js project {% data reusables.codespaces.setting-up-project-intro %}

Step 1: Open the project in a codespace

{% data reusables.getting-started.sign-in-dotcom %}

1. Go to https://github.com/microsoft/vscode-remote-try-node. {% data reusables.codespaces.use-this-template %}

When you create a codespace, your project is created on a remote virtual machine that is dedicated to you. By default, the container for your codespace has many languages and runtimes including Node.js, JavaScript, and TypeScript. It also includes a common set of tools, such as nvm, npm, yarn, git, wget, rsync, openssh, and nano.

{% data reusables.codespaces.customize-vcpus-and-ram %}

Step 2: Add a dev container configuration

The default development container, or "dev container," for {% data variables.product.prodname_github_codespaces %} will allow you to work successfully on a Node.js project like vscode-remote-try-node. However, we recommend that you configure your own dev container to include all of the tools and scripts your project needs. This will ensure a fully reproducible environment for all {% data variables.product.prodname_github_codespaces %} users in your repository.

{% data reusables.codespaces.setup-custom-devcontainer %} {% data reusables.codespaces.command-palette-container %}

1. Type node and click Node.js & JavaScript. Other options are available if your project uses particular tools. For example, Node and MongoDB.

   

2. Choose the version of Node.js you want to use for your project. In this case, select the version marked "(default)."

   

3. A list of additional features is displayed. We'll install JSHint, a code quality tool for detecting errors in JavaScript code. To install this tool, type js, select JSHint (via npm), then click OK.

   

{% data reusables.codespaces.overwrite-devcontainer-config %} {% data reusables.codespaces.details-of-devcontainer-config %}

// For format details, see https://aka.ms/devcontainer.json. For config options, see the
// README at: https://github.com/devcontainers/templates/tree/main/src/javascript-node
{
  "name": "Node.js",
  // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
  "image": "mcr.microsoft.com/devcontainers/javascript-node:0-18-bullseye",
  "features": {
    "ghcr.io/devcontainers-contrib/features/jshint:2": {}
  }

  // Features to add to the dev container. More info: https://containers.dev/features.
  // "features": {},

  // Use 'forwardPorts' to make a list of ports inside the container available locally.
  // "forwardPorts": [],

  // Use 'postCreateCommand' to run commands after the container is created.
  // "postCreateCommand": "yarn install",

  // Configure tool-specific properties.
  // "customizations": {},

  // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
  // "remoteUser": "root"
}

{% data reusables.codespaces.devcontainer-properties-1 %} {% data reusables.codespaces.devcontainer-properties-2 %} {% data reusables.codespaces.additional-container-config %}

Step 3: Modify your devcontainer.json file

With your dev container configuration added and a basic understanding of what everything does, you can now make changes to customize your environment further. In this example, you'll add properties that will:

• Run npm install, after the dev container is created, to install the dependencies listed in the package.json file.
• Automatically install a {% data variables.product.prodname_vscode_shortname %} extension in this codespace.

{% data reusables.codespaces.add-comma-after-features %}

  "features": {
    "ghcr.io/devcontainers-contrib/features/jshint:2": {}
  },

  // Features to add to the dev container. More info: https://containers.dev/features.
  // "features": {},

1. Uncomment the postCreateCommand property and assign it the command npm install.

    // Use 'postCreateCommand' to run commands after the container is created.
    "postCreateCommand": "npm install",

{% data reusables.codespaces.add-extension-to-devcontainer %}

// README at: https://github.com/devcontainers/templates/tree/main/src/javascript-node
{
  "name": "Node.js",
  // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
  "image": "mcr.microsoft.com/devcontainers/javascript-node:0-18-bullseye",
  "features": {
    "ghcr.io/devcontainers-contrib/features/jshint:2": {}
  },

  // Use 'forwardPorts' to make a list of ports inside the container available locally.
  // "forwardPorts": [],

  // Use 'postCreateCommand' to run commands after the container is created.
  "postCreateCommand": "npm install",

  // Configure tool-specific properties.
  "customizations": {
    // Configure properties specific to VS Code.
    "vscode": {
      // Add the IDs of extensions you want installed when the container is created.
      "extensions": [
        "streetsidesoftware.code-spell-checker"
      ]
    }
  }

  // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
  // "remoteUser": "root"
}

{% data reusables.codespaces.save-changes %} {% data reusables.codespaces.rebuild-command %} {% data reusables.codespaces.rebuild-reason %}

After the dev container is rebuilt, and your codespace becomes available again, the postCreateCommand will have been run, installing npm, and the "Code Spell Checker" extension will be available for use.

Step 4: Run your application

In the previous section, you used the postCreateCommand to install a set of packages via the npm install command. With the dependencies now installed, you can run the application.

1. In the Terminal of your codespace, enter npm start.

   

2. When your project starts, you should see a "toast" notification message at the bottom right corner of {% data variables.product.prodname_vscode_shortname %}, telling you that your application is available on a forwarded port. To view the running application, click Open in Browser.

   

Step 5: Commit your changes

{% data reusables.codespaces.committing-link-to-procedure %}

Next steps

You should now be able to add a custom dev container configuration to your own Node.js, JavaScript, or TypeScript project.

{% data reusables.codespaces.next-steps-adding-devcontainer %}