New organization for codespaces docs (#18910)
* adding new tables and linking to info on audit logs * editing some text: * adding new info on how to add image registry login * adding link and fixing table * formatting * formatting * Apply suggestions from code review Co-authored-by: Laura Coursen <lecoursen@github.com> * updaing private image registry secret info and other improvements * some minor fixes * fixing test errors * rewriting registry secret section * rewriting registry secret section * updating link to reflect title * Update content/github/developing-online-with-codespaces/managing-encrypted-secrets-for-codespaces.md Co-authored-by: Laura Coursen <lecoursen@github.com> * updating bullet point * moving codespaces to top-level item * fixing duplicated redirect * Adding some organization for contributors * adding learning codespaces to index file * do not error out if category array is empty * Apply suggestions from code review Co-authored-by: Kevin Heis <heiskr@users.noreply.github.com> * fixing broken link * Document choosing machine type for a codespace in the GitHub UI (#19055) * Document choosing machine type in the GitHub UI * Replace link placeholder with actual path * Update content/codespaces/changing-the-machine-type-for-your-codespace.md Co-authored-by: Amy Burns <timeyoutakeit@github.com> Co-authored-by: Amy Burns <timeyoutakeit@github.com> * reoganizing based on CD * putting machine type doc in correct location * fixing broken redirects * removing quickstart example from index page * updating main index file * Fixing broken links * adding intros * adding js quickstart (#18960) * adding js quickstart * clarify walkthrough * adding more images and last few sections * fixing broken links * fixing broken links and formatting * formatting fixes * Apply suggestions from code review Co-authored-by: hubwriter <hubwriter@github.com> * adding index file for learn folder * adding some feedback changes * adding some review comments * fixing broken links Co-authored-by: hubwriter <hubwriter@github.com> * doing some additional re-org * fixing topics * adding Codespaces as a topic * fixing so title matches slug * Update data/reusables/codespaces/codespaces-machine-types.md Co-authored-by: Meg Bird <megbird@github.com> * expanding intro Co-authored-by: Laura Coursen <lecoursen@github.com> Co-authored-by: Sarah Schneider <sarahs@github.com> Co-authored-by: Kevin Heis <heiskr@users.noreply.github.com> Co-authored-by: hubwriter <hubwriter@github.com> Co-authored-by: Meg Bird <megbird@github.com>
This commit is contained in:
Amy Burns
@@ -0,0 +1,60 @@
|
||||
---
|
||||
title: Creating a codespace
|
||||
intro: You can create a codespace for a branch in a repository to develop online.
|
||||
product: '{% data reusables.gated-features.codespaces %}'
|
||||
permissions: 'Anyone can create a codespace for any public repository, or for any repository owned by their user account.'
|
||||
redirect_from:
|
||||
- /github/developing-online-with-github-codespaces/creating-a-codespace
|
||||
- /github/developing-online-with-codespaces/creating-a-codespace
|
||||
versions:
|
||||
free-pro-team: '*'
|
||||
topics:
|
||||
- Codespaces
|
||||
---
|
||||
|
||||
{% data reusables.codespaces.release-stage %}
|
||||
|
||||
### About codespace creation
|
||||
|
||||
{% data reusables.codespaces.codespaces-are-personal %}
|
||||
|
||||
{% data reusables.codespaces.codespaces-are-per-branch %} {% data reusables.codespaces.concurrent-codespace-limit %} For more information, see "[Deleting a codespace](/github/developing-online-with-codespaces/deleting-a-codespace)."
|
||||
|
||||
{% data reusables.codespaces.unsupported-repos %}
|
||||
|
||||
You cannot create a codespace in an empty repository. If your repository is empty, create a file in the repository before creating a codespace. For more information, see "[Adding a file to a repository](/github/managing-files-in-a-repository/adding-a-file-to-a-repository)" and "[Adding a file to a repository using the command line](/github/managing-files-in-a-repository/adding-a-file-to-a-repository-using-the-command-line)."
|
||||
|
||||
The environment of the codespace you create will be based on the repository's configuration. For more information, see "[Configuring {% data variables.product.prodname_codespaces %} for your project](/github/developing-online-with-codespaces/configuring-codespaces-for-your-project)."
|
||||
|
||||
{% data reusables.codespaces.about-personalization %} For more information, see "[Personalizing {% data variables.product.prodname_codespaces %} for your account](/github/developing-online-with-codespaces/personalizing-codespaces-for-your-account)."
|
||||
|
||||
{% data reusables.codespaces.use-visual-studio-features %}
|
||||
|
||||
{% data reusables.codespaces.you-can-see-all-your-codespaces %}
|
||||
|
||||
### Creating a codespace
|
||||
|
||||
{% data reusables.repositories.navigate-to-repo %}
|
||||
2. Under the repository name, use the "Branch" drop-down menu, and select the branch you want to create a codespace for.
|
||||
|
||||
|
||||
|
||||
3. Under the repository name, use the {% octicon "download" aria-label="The download icon" %} **Code** drop-down menu, and select **Open with Codespaces**.
|
||||
|
||||
|
||||
|
||||
4. To create a codespace using a Standard machine type, click {% octicon "plus" aria-label="The plus icon" %} **New codespace**.
|
||||
|
||||
|
||||
|
||||
Alternatively, to create a codespace using a Basic or Premium machine type:
|
||||
|
||||
* Click the ellipsis (**...**) to the right of this option.
|
||||
* Click **Create custom codespace**.
|
||||
|
||||
* Choose a machine type.
|
||||
|
||||
* Click **Create codespace**.
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,21 @@
|
||||
---
|
||||
title: Deleting a codespace
|
||||
intro: You can delete a codespace you no longer need.
|
||||
product: '{% data reusables.gated-features.codespaces %}'
|
||||
permissions: Anyone can delete a codespace owned by their user account.
|
||||
redirect_from:
|
||||
- /github/developing-online-with-github-codespaces/deleting-a-codespace
|
||||
- /github/developing-online-with-codespaces/deleting-a-codespace
|
||||
versions:
|
||||
free-pro-team: '*'
|
||||
topics:
|
||||
- Codespaces
|
||||
---
|
||||
|
||||
{% data reusables.codespaces.release-stage %}
|
||||
|
||||
{% data reusables.codespaces.concurrent-codespace-limit %}
|
||||
|
||||
{% data reusables.codespaces.navigate-to-codespaces %}
|
||||
2. To the right of the codespace you want to delete, click **Delete**.
|
||||
|
||||
@@ -0,0 +1,33 @@
|
||||
---
|
||||
title: Developing in a codespace
|
||||
intro: 'You can open a codespace on {% data variables.product.product_name %}, then develop using {% data variables.product.prodname_vscode %}''s features.'
|
||||
product: '{% data reusables.gated-features.codespaces %}'
|
||||
permissions: Anyone can develop in a codespace owned by their user account.
|
||||
redirect_from:
|
||||
- /github/developing-online-with-github-codespaces/developing-in-a-codespace
|
||||
- /github/developing-online-with-codespaces/developing-in-a-codespace
|
||||
versions:
|
||||
free-pro-team: '*'
|
||||
topics:
|
||||
- Codespaces
|
||||
---
|
||||
|
||||
### About development with {% data variables.product.prodname_codespaces %}
|
||||
|
||||
{% data reusables.codespaces.release-stage %}
|
||||
|
||||
{% data reusables.codespaces.use-visual-studio-features %}
|
||||
|
||||
{% data reusables.codespaces.about-port-forwarding %} For more information, see "[Forwarding ports in your codespace](/github/developing-online-with-codespaces/forwarding-ports-in-your-codespace)."
|
||||
|
||||
{% data reusables.codespaces.apply-devcontainer-changes %} For more information, see "[Configuring {% data variables.product.prodname_codespaces %} for your project](/github/developing-online-with-codespaces/configuring-codespaces-for-your-project#apply-changes-to-your-configuration)."
|
||||
|
||||
{% data reusables.codespaces.use-chrome %} For more information, see "[Troubleshooting your codespace](/github/developing-online-with-codespaces/troubleshooting-your-codespace)."
|
||||
|
||||
{% data reusables.codespaces.connect-to-codespace-from-vscode %}
|
||||
|
||||
### Navigating to your codespace
|
||||
|
||||
{% data reusables.codespaces.navigate-to-codespaces %}
|
||||
2. Click the name of the codespace you want to develop in.
|
||||
|
||||
@@ -0,0 +1,63 @@
|
||||
---
|
||||
title: Forwarding ports in your codespace
|
||||
intro: '{% data reusables.codespaces.about-port-forwarding %}'
|
||||
product: '{% data reusables.gated-features.codespaces %}'
|
||||
versions:
|
||||
free-pro-team: '*'
|
||||
redirect_from:
|
||||
- /github/developing-online-with-codespaces/forwarding-ports-in-your-codespace
|
||||
topics:
|
||||
- Codespaces
|
||||
---
|
||||
|
||||
### About forwarded ports
|
||||
|
||||
Port forwarding gives you access to TCP ports running within your codespace. For example, if you're running a web application on port 4000, you can access the application from your browser to test and debug the application.
|
||||
|
||||
When an application running inside a codespace outputs a port to the console, {% data variables.product.prodname_codespaces %} detects the localhost URL pattern and automatically forwards the port. You can click on the URL in the terminal to open the port in a browser. For example, if an application outputs `http://127.0.0.1:4000` or `http://localhost:4000` to the console, the log would automatically convert the output to a clickable URL for port 4000.
|
||||
|
||||
|
||||
|
||||
You can also forward a port manually, label forwarded ports, share fowarded ports publicly, and add forwarded ports to the codespace configuration.
|
||||
|
||||
### Forwarding a port
|
||||
|
||||
You can manually forward a port that wasn't forwarded automatically.
|
||||
|
||||
{% data reusables.codespaces.navigate-to-ports-tab %}
|
||||
1. Under the list of ports, click **Add port**.
|
||||
|
||||
1. Type the port number or address, then press enter.
|
||||
|
||||
|
||||
### Labeling a port
|
||||
|
||||
You can label a port to make the port more easily identifiable in a list.
|
||||
|
||||
{% data reusables.codespaces.navigate-to-ports-tab %}
|
||||
1. Hover over the port you want to label, then click the label icon.
|
||||
|
||||
{% data reusables.codespaces.type-port-label %}
|
||||
|
||||
### Sharing a port
|
||||
|
||||
If you want to share a forwarded port with others, you can make the port public. After you make a port public, anyone with the port's URL can view the running application without needing to authenticate.
|
||||
|
||||
{% data reusables.codespaces.navigate-to-ports-tab %}
|
||||
1. Right click the port you want to share, then click **Make Public**.
|
||||
|
||||
1. To the right of the local address for the port, click the copy icon.
|
||||
|
||||
1. Send the copied URL to the person you want to share the port with.
|
||||
|
||||
### Adding a port to the codespace configuration
|
||||
|
||||
You can add a forwarded port to the {% data variables.product.prodname_codespaces %} configuration for the repository, so the port will automatically be forwarded for all codespaces created from the repository. After you update the configuration, any previously created codespaces must be rebuilt for the change to apply. For more information, see "[Configuring {% data variables.product.prodname_codespaces %} for your project](/github/developing-online-with-codespaces#applying-changes-to-your-configuration)."
|
||||
|
||||
You can manually configure fowarded ports in a `.devcontainer.json` file using the `forwardPorts` property, or you can use the "Ports" panel in your codespace.
|
||||
|
||||
{% data reusables.codespaces.navigate-to-ports-tab %}
|
||||
1. Right click the port you want to add to the codespace configuration, then click **Set Label and Update devcontainer.json**.
|
||||
|
||||
{% data reusables.codespaces.type-port-label %}
|
||||
|
||||
21
content/codespaces/developing-in-codespaces/index.md
Normal file
21
content/codespaces/developing-in-codespaces/index.md
Normal file
@@ -0,0 +1,21 @@
|
||||
---
|
||||
title: Developing in a codespace
|
||||
intro: 'Create a codespace to get started with developing your project inside a dedicated cloud environment. You can use forwarded ports to run your application and even use codespaces inside {% data variables.product.prodname_vscode %}'
|
||||
product: '{% data reusables.gated-features.codespaces %}'
|
||||
versions:
|
||||
free-pro-team: '*'
|
||||
topics:
|
||||
- Codespaces
|
||||
---
|
||||
|
||||
{% data reusables.codespaces.release-stage %}
|
||||
|
||||
{% link_with_intro /creating-a-codespace %}
|
||||
|
||||
{% link_with_intro /developing-in-a-codespace %}
|
||||
|
||||
{% link_with_intro /deleting-a-codespace %}
|
||||
|
||||
{% link_with_intro /forwarding-ports-in-your-codespace %}
|
||||
|
||||
{% link_with_intro /using-codespaces-in-visual-studio-code %}
|
||||
@@ -0,0 +1,70 @@
|
||||
---
|
||||
title: Using Codespaces in Visual Studio Code
|
||||
intro: 'You can develop in your codespace directly in {% data variables.product.prodname_vscode %} by connecting the {% data variables.product.prodname_github_codespaces %} extension with your account on {% data variables.product.product_name %}.'
|
||||
product: '{% data reusables.gated-features.codespaces %}'
|
||||
redirect_from:
|
||||
- /github/developing-online-with-codespaces/using-codespaces-in-visual-studio-code
|
||||
- /github/developing-online-with-codespaces/connecting-to-your-codespace-from-visual-studio-code
|
||||
- /github/developing-online-with-codespaces/using-codespaces-in-visual-studio
|
||||
versions:
|
||||
free-pro-team: '*'
|
||||
topics:
|
||||
- Codespaces
|
||||
---
|
||||
|
||||
{% data reusables.codespaces.release-stage %}
|
||||
|
||||
### Prerequisites
|
||||
|
||||
To develop in a codespace directly in {% data variables.product.prodname_vscode %}, you must sign into the {% data variables.product.prodname_github_codespaces %} extension. The {% data variables.product.prodname_github_codespaces %} extension requires {% data variables.product.prodname_vscode %} October 2020 Release 1.51 or later.
|
||||
|
||||
1. Use the {% data variables.product.prodname_vs %} Marketplace to install the [{% data variables.product.prodname_github_codespaces %}](https://marketplace.visualstudio.com/items?itemName=GitHub.codespaces) extension. For more information, see [Extension Marketplace](https://code.visualstudio.com/docs/editor/extension-gallery) in the {% data variables.product.prodname_vscode %} documentation.
|
||||
{% data reusables.codespaces.click-remote-explorer-icon-vscode %}
|
||||
2. Use the "REMOTE EXPLORER" drop-down, then click **{% data variables.product.prodname_github_codespaces %}**.
|
||||
|
||||
3. Click **Sign in to view {% data variables.product.prodname_codespaces %}...**.
|
||||
|
||||
4. To authorize {% data variables.product.prodname_vscode %} to access your account on {% data variables.product.product_name %}, click **Allow**.
|
||||
5. Sign in to {% data variables.product.product_name %} to approve the extension.
|
||||
|
||||
### Creating a codespace in {% data variables.product.prodname_vscode %}
|
||||
|
||||
After you connect your {% data variables.product.product_name %} account to the {% data variables.product.prodname_github_codespaces %} extension, you can develop in a codespace that you created on {% data variables.product.product_name %} or in {% data variables.product.prodname_vscode %}.
|
||||
|
||||
{% data reusables.codespaces.click-remote-explorer-icon-vscode %}
|
||||
2. Click the Add icon, then click **Create New Codespace**.
|
||||
|
||||
3. Type, then click the repository's name you want to develop in.
|
||||
|
||||
4. Click the branch you want to develop on.
|
||||
|
||||
5. Click the machine type you want to develop in.
|
||||
|
||||
### Opening a codespace in {% data variables.product.prodname_vscode %}
|
||||
|
||||
{% data reusables.codespaces.click-remote-explorer-icon-vscode %}
|
||||
2. Under "Codespaces", click the codespace you want to develop in.
|
||||
3. Click the Connect to Codespace icon.
|
||||
|
||||
|
||||
### Changing the machine type in {% data variables.product.prodname_vscode %}
|
||||
|
||||
{% data reusables.codespaces.codespaces-machine-types %}
|
||||
|
||||
You can change the machine type of your codespace at any time.
|
||||
|
||||
1. In {% data variables.product.prodname_vscode %}, open the Command Palette (`shift command P` / `shift control P`).
|
||||
2. Search for and select "Codespaces: Change Machine Type."
|
||||
|
||||
3. Click the codespace that you want to change.
|
||||
|
||||
4. Choose the machine type you want to use.
|
||||
|
||||
|
||||
If the codespace is currently running, a message is displayed asking if you would like to restart and reconnect to your codespace now. Click **Yes** if you want to change the machine type used for this codespace immediately. If you click **No**, or if the codespace is not currently running, the change will take effect the next time the codespace restarts.
|
||||
|
||||
### Deleting a codespace in {% data variables.product.prodname_vscode %}
|
||||
|
||||
1. Under "Codespaces", right-click the codespace you want to delete.
|
||||
2. In the drop-down menu, click **Delete Codespace**.
|
||||
|
||||
Reference in New Issue
Block a user