Merge branch 'main' into reusable-context-grammar
@@ -39,7 +39,7 @@ if (import.meta.url.endsWith(process.argv[1])) {
|
||||
if (!isHealthy) {
|
||||
core.setFailed(`Timeout waiting for preview environment: ${APP_URL}`)
|
||||
} else {
|
||||
const markdownTable = await main(core, owner, repo, baseSHA, headSHA)
|
||||
const markdownTable = await main(owner, repo, baseSHA, headSHA)
|
||||
core.setOutput('changesTable', markdownTable)
|
||||
}
|
||||
}
|
||||
|
||||
67
.github/actions/clone-translations/action.yml
vendored
Normal file
@@ -0,0 +1,67 @@
|
||||
name: Clone translations
|
||||
|
||||
description: Clone all remote translations so they're available
|
||||
|
||||
inputs:
|
||||
token:
|
||||
description: PAT
|
||||
required: true
|
||||
|
||||
runs:
|
||||
using: 'composite'
|
||||
steps:
|
||||
- name: Clone Simplified Chinese
|
||||
uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8
|
||||
with:
|
||||
repository: github/docs-internal.zh-cn
|
||||
token: ${{ inputs.token }}
|
||||
path: translations/zh-cn
|
||||
|
||||
- name: Clone Japanese
|
||||
uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8
|
||||
with:
|
||||
repository: github/docs-internal.ja-jp
|
||||
token: ${{ inputs.token }}
|
||||
path: translations/ja-jp
|
||||
|
||||
- name: Clone Spanish
|
||||
uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8
|
||||
with:
|
||||
repository: github/docs-internal.es-es
|
||||
token: ${{ inputs.token }}
|
||||
path: translations/es-es
|
||||
|
||||
- name: Clone Portuguese
|
||||
uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8
|
||||
with:
|
||||
repository: github/docs-internal.pt-br
|
||||
token: ${{ inputs.token }}
|
||||
path: translations/pt-br
|
||||
|
||||
- name: Clone German
|
||||
uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8
|
||||
with:
|
||||
repository: github/docs-internal.de-de
|
||||
token: ${{ inputs.token }}
|
||||
path: translations/de-de
|
||||
|
||||
- name: Clone French
|
||||
uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8
|
||||
with:
|
||||
repository: github/docs-internal.fr-fr
|
||||
token: ${{ inputs.token }}
|
||||
path: translations/fr-fr
|
||||
|
||||
- name: Clone Russian
|
||||
uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8
|
||||
with:
|
||||
repository: github/docs-internal.ru-ru
|
||||
token: ${{ inputs.token }}
|
||||
path: translations/ru-ru
|
||||
|
||||
- name: Clone Korean
|
||||
uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8
|
||||
with:
|
||||
repository: github/docs-internal.ko-kr
|
||||
token: ${{ inputs.token }}
|
||||
path: translations/ko-kr
|
||||
54
.github/workflows/azure-prod-build-deploy.yml
vendored
@@ -71,61 +71,9 @@ jobs:
|
||||
- name: Merge docs-early-access repo's folders
|
||||
run: .github/actions-scripts/merge-early-access.sh
|
||||
|
||||
- name: Clone Simplified Chinese
|
||||
uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8
|
||||
- uses: ./.github/actions/clone-translations
|
||||
with:
|
||||
repository: github/docs-internal.zh-cn
|
||||
token: ${{ secrets.DOCUBOT_REPO_PAT }}
|
||||
path: translations/zh-cn
|
||||
|
||||
- name: Clone Japanese
|
||||
uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8
|
||||
with:
|
||||
repository: github/docs-internal.ja-jp
|
||||
token: ${{ secrets.DOCUBOT_REPO_PAT }}
|
||||
path: translations/ja-jp
|
||||
|
||||
- name: Clone Spanish
|
||||
uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8
|
||||
with:
|
||||
repository: github/docs-internal.es-es
|
||||
token: ${{ secrets.DOCUBOT_REPO_PAT }}
|
||||
path: translations/es-es
|
||||
|
||||
- name: Clone Portuguese
|
||||
uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8
|
||||
with:
|
||||
repository: github/docs-internal.pt-br
|
||||
token: ${{ secrets.DOCUBOT_REPO_PAT }}
|
||||
path: translations/pt-br
|
||||
|
||||
- name: Clone German
|
||||
uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8
|
||||
with:
|
||||
repository: github/docs-internal.de-de
|
||||
token: ${{ secrets.DOCUBOT_REPO_PAT }}
|
||||
path: translations/de-de
|
||||
|
||||
- name: Clone French
|
||||
uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8
|
||||
with:
|
||||
repository: github/docs-internal.fr-fr
|
||||
token: ${{ secrets.DOCUBOT_REPO_PAT }}
|
||||
path: translations/fr-fr
|
||||
|
||||
- name: Clone Russian
|
||||
uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8
|
||||
with:
|
||||
repository: github/docs-internal.ru-ru
|
||||
token: ${{ secrets.DOCUBOT_REPO_PAT }}
|
||||
path: translations/ru-ru
|
||||
|
||||
- name: Clone Korean
|
||||
uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8
|
||||
with:
|
||||
repository: github/docs-internal.ko-kr
|
||||
token: ${{ secrets.DOCUBOT_REPO_PAT }}
|
||||
path: translations/ko-kr
|
||||
|
||||
- name: 'Build and push image'
|
||||
uses: docker/build-push-action@1cb9d22b932e4832bb29793b7777ec860fc1cde0
|
||||
|
||||
20
.github/workflows/sync-search-elasticsearch.yml
vendored
@@ -35,18 +35,6 @@ env:
|
||||
FREEZE: ${{ secrets.FREEZE }}
|
||||
ELASTICSEARCH_URL: ${{ secrets.ELASTICSEARCH_URL }}
|
||||
|
||||
# This might seem a bit strange, but it's clever. Since this action
|
||||
# uses a matrix to deal with one language at a time, we can use this
|
||||
# to pretend it's always the same directory.
|
||||
TRANSLATIONS_ROOT_ES_ES: translation
|
||||
TRANSLATIONS_ROOT_ZH_CN: translation
|
||||
TRANSLATIONS_ROOT_JA_JP: translation
|
||||
TRANSLATIONS_ROOT_PT_BR: translation
|
||||
TRANSLATIONS_ROOT_FR_FR: translation
|
||||
TRANSLATIONS_ROOT_RU_RU: translation
|
||||
TRANSLATIONS_ROOT_KO_KR: translation
|
||||
TRANSLATIONS_ROOT_DE_DE: translation
|
||||
|
||||
jobs:
|
||||
figureOutMatrix:
|
||||
runs-on: ubuntu-latest
|
||||
@@ -110,13 +98,11 @@ jobs:
|
||||
- name: Check out repo
|
||||
uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8
|
||||
|
||||
- name: Checkout the non-English repo
|
||||
- name: Clone all translations
|
||||
if: ${{ matrix.language != 'en' }}
|
||||
uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8
|
||||
uses: ./.github/actions/clone-translations
|
||||
with:
|
||||
repository: github/docs-internal.${{ fromJSON('{"zh":"zh-cn","es":"es-es","ru":"ru-ru","ja":"ja-jp","pt":"pt-br","de":"de-de","fr":"fr-fr","ko":"ko-kr"}')[matrix.language] }}
|
||||
token: ${{ secrets.DOCUBOT_READORG_REPO_WORKFLOW_SCOPES }}
|
||||
path: translation
|
||||
token: ${{ secrets.DOCUBOT_REPO_PAT }}
|
||||
|
||||
- uses: ./.github/actions/node-npm-setup
|
||||
|
||||
|
||||
62
.github/workflows/test.yml
vendored
@@ -110,69 +110,11 @@ jobs:
|
||||
.github/actions-scripts/merge-early-access.sh
|
||||
rm -fr docs-early-access
|
||||
|
||||
- name: Clone Simplified Chinese
|
||||
- name: Clone all translations
|
||||
if: ${{ matrix.test-group == 'translations' }}
|
||||
uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8
|
||||
uses: ./.github/actions/clone-translations
|
||||
with:
|
||||
repository: github/docs-internal.zh-cn
|
||||
token: ${{ secrets.DOCUBOT_REPO_PAT }}
|
||||
path: translations/zh-cn
|
||||
|
||||
- name: Clone Japanese
|
||||
if: ${{ matrix.test-group == 'translations' }}
|
||||
uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8
|
||||
with:
|
||||
repository: github/docs-internal.ja-jp
|
||||
token: ${{ secrets.DOCUBOT_REPO_PAT }}
|
||||
path: translations/ja-jp
|
||||
|
||||
- name: Clone Spanish
|
||||
if: ${{ matrix.test-group == 'translations' }}
|
||||
uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8
|
||||
with:
|
||||
repository: github/docs-internal.es-es
|
||||
token: ${{ secrets.DOCUBOT_REPO_PAT }}
|
||||
path: translations/es-es
|
||||
|
||||
- name: Clone Portuguese
|
||||
if: ${{ matrix.test-group == 'translations' }}
|
||||
uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8
|
||||
with:
|
||||
repository: github/docs-internal.pt-br
|
||||
token: ${{ secrets.DOCUBOT_REPO_PAT }}
|
||||
path: translations/pt-br
|
||||
|
||||
- name: Clone German
|
||||
if: ${{ matrix.test-group == 'translations' }}
|
||||
uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8
|
||||
with:
|
||||
repository: github/docs-internal.de-de
|
||||
token: ${{ secrets.DOCUBOT_REPO_PAT }}
|
||||
path: translations/de-de
|
||||
|
||||
- name: Clone French
|
||||
if: ${{ matrix.test-group == 'translations' }}
|
||||
uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8
|
||||
with:
|
||||
repository: github/docs-internal.fr-fr
|
||||
token: ${{ secrets.DOCUBOT_REPO_PAT }}
|
||||
path: translations/fr-fr
|
||||
|
||||
- name: Clone Russian
|
||||
if: ${{ matrix.test-group == 'translations' }}
|
||||
uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8
|
||||
with:
|
||||
repository: github/docs-internal.ru-ru
|
||||
token: ${{ secrets.DOCUBOT_REPO_PAT }}
|
||||
path: translations/ru-ru
|
||||
|
||||
- name: Clone Korean
|
||||
if: ${{ matrix.test-group == 'translations' }}
|
||||
uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8
|
||||
with:
|
||||
repository: github/docs-internal.ko-kr
|
||||
token: ${{ secrets.DOCUBOT_REPO_PAT }}
|
||||
path: translations/ko-kr
|
||||
|
||||
- name: Gather files changed
|
||||
env:
|
||||
|
||||
BIN
assets/images/help/codespaces/add-ant-feature.png
Normal file
|
After Width: | Height: | Size: 58 KiB |
BIN
assets/images/help/codespaces/add-csharp-prebuilt-container.png
Normal file
|
After Width: | Height: | Size: 86 KiB |
BIN
assets/images/help/codespaces/add-dotnet-features.png
Normal file
|
After Width: | Height: | Size: 45 KiB |
|
Before Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 27 KiB |
|
Before Width: | Height: | Size: 34 KiB After Width: | Height: | Size: 52 KiB |
|
Before Width: | Height: | Size: 5.0 KiB After Width: | Height: | Size: 33 KiB |
BIN
assets/images/help/codespaces/add-jshint-config.png
Normal file
|
After Width: | Height: | Size: 60 KiB |
BIN
assets/images/help/codespaces/add-maven.png
Normal file
|
After Width: | Height: | Size: 30 KiB |
BIN
assets/images/help/codespaces/add-node-devcontainer-config.png
Normal file
|
After Width: | Height: | Size: 69 KiB |
|
Before Width: | Height: | Size: 32 KiB |
|
Before Width: | Height: | Size: 6.3 KiB After Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 6.3 KiB After Width: | Height: | Size: 22 KiB |
BIN
assets/images/help/codespaces/add-python-features.png
Normal file
|
After Width: | Height: | Size: 102 KiB |
|
Before Width: | Height: | Size: 9.4 KiB After Width: | Height: | Size: 84 KiB |
|
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 30 KiB |
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 25 KiB |
|
Before Width: | Height: | Size: 8.0 KiB |
BIN
assets/images/help/codespaces/codespaces-port3000-toast.png
Normal file
|
After Width: | Height: | Size: 36 KiB |
BIN
assets/images/help/codespaces/codespaces-port5000-toast.png
Normal file
|
After Width: | Height: | Size: 36 KiB |
|
Before Width: | Height: | Size: 20 KiB |
|
Before Width: | Height: | Size: 6.2 KiB |
BIN
assets/images/help/codespaces/java-debug-output.png
Normal file
|
After Width: | Height: | Size: 28 KiB |
BIN
assets/images/help/codespaces/open-port5000-in-browser.png
Normal file
|
After Width: | Height: | Size: 55 KiB |
BIN
assets/images/help/codespaces/python-flask-run.png
Normal file
|
After Width: | Height: | Size: 72 KiB |
BIN
assets/images/help/codespaces/show-all-definitions.png
Normal file
|
After Width: | Height: | Size: 43 KiB |
BIN
assets/images/help/codespaces/switch-to-standard-mode.png
Normal file
|
After Width: | Height: | Size: 42 KiB |
|
Before Width: | Height: | Size: 98 KiB After Width: | Height: | Size: 93 KiB |
@@ -1,10 +1,9 @@
|
||||
import { useRouter } from 'next/router'
|
||||
import dynamic from 'next/dynamic'
|
||||
|
||||
import { ZapIcon, InfoIcon } from '@primer/octicons-react'
|
||||
import { InfoIcon } from '@primer/octicons-react'
|
||||
import { Callout } from 'components/ui/Callout'
|
||||
|
||||
import { Link } from 'components/Link'
|
||||
import { DefaultLayout } from 'components/DefaultLayout'
|
||||
import { ArticleTitle } from 'components/article/ArticleTitle'
|
||||
import { useArticleContext } from 'components/context/ArticleContext'
|
||||
@@ -26,26 +25,6 @@ const ClientSideRefresh = dynamic(() => import('components/ClientSideRefresh'),
|
||||
})
|
||||
const isDev = process.env.NODE_ENV === 'development'
|
||||
|
||||
// Mapping of a "normal" article to it's interactive counterpart
|
||||
const interactiveAlternatives: Record<string, { href: string }> = {
|
||||
'/codespaces/setting-up-your-project-for-codespaces/setting-up-your-nodejs-project-for-codespaces':
|
||||
{
|
||||
href: '/codespaces/setting-up-your-project-for-codespaces/setting-up-your-project-for-codespaces?langId=nodejs',
|
||||
},
|
||||
'/codespaces/setting-up-your-project-for-codespaces/setting-up-your-dotnet-project-for-codespaces':
|
||||
{
|
||||
href: '/codespaces/setting-up-your-project-for-codespaces/setting-up-your-project-for-codespaces?langId=dotnet',
|
||||
},
|
||||
'/codespaces/setting-up-your-project-for-codespaces/setting-up-your-java-project-for-codespaces':
|
||||
{
|
||||
href: '/codespaces/setting-up-your-project-for-codespaces/setting-up-your-project-for-codespaces?langId=java',
|
||||
},
|
||||
'/codespaces/setting-up-your-project-for-codespaces/setting-up-your-python-project-for-codespaces':
|
||||
{
|
||||
href: '/codespaces/setting-up-your-project-for-codespaces/setting-up-your-project-for-codespaces?langId=py',
|
||||
},
|
||||
}
|
||||
|
||||
export const ArticlePage = () => {
|
||||
const router = useRouter()
|
||||
const {
|
||||
@@ -62,7 +41,6 @@ export const ArticlePage = () => {
|
||||
currentLearningTrack,
|
||||
} = useArticleContext()
|
||||
const { t } = useTranslation('pages')
|
||||
const currentPath = router.asPath.split('?')[0]
|
||||
|
||||
const isLearningPath = !!currentLearningTrack?.trackName
|
||||
|
||||
@@ -109,14 +87,6 @@ export const ArticlePage = () => {
|
||||
}
|
||||
toc={
|
||||
<>
|
||||
{!!interactiveAlternatives[currentPath] && (
|
||||
<div className="flash mb-3">
|
||||
<ZapIcon className="mr-2" />
|
||||
<Link href={interactiveAlternatives[currentPath].href}>
|
||||
Try the new interactive article
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
{isLearningPath && <LearningTrackCard track={currentLearningTrack} />}
|
||||
{miniTocItems.length > 1 && <MiniTocs miniTocItems={miniTocItems} />}
|
||||
</>
|
||||
|
||||
@@ -1,88 +0,0 @@
|
||||
import React, { createContext, useContext, useState } from 'react'
|
||||
import { CodeLanguage, PlaygroundArticleT } from 'components/playground/types'
|
||||
import { useRouter } from 'next/router'
|
||||
|
||||
import codespacesJsArticle from 'components/playground/content/codespaces/setting-up-your-project-for-codespaces/setting-up-your-project-for-codespaces/nodejs'
|
||||
import codespacesPyArticle from 'components/playground/content/codespaces/setting-up-your-project-for-codespaces/setting-up-your-project-for-codespaces/python'
|
||||
import codespacesNetArticle from 'components/playground/content/codespaces/setting-up-your-project-for-codespaces/setting-up-your-project-for-codespaces/dotnet'
|
||||
import codespacesJavaArticle from 'components/playground/content/codespaces/setting-up-your-project-for-codespaces/setting-up-your-project-for-codespaces/java'
|
||||
|
||||
const articles = [
|
||||
codespacesJsArticle,
|
||||
codespacesPyArticle,
|
||||
codespacesJavaArticle,
|
||||
codespacesNetArticle,
|
||||
]
|
||||
|
||||
const codeLanguages: Array<CodeLanguage> = [
|
||||
{
|
||||
id: 'nodejs',
|
||||
label: 'Node.js',
|
||||
},
|
||||
{
|
||||
id: 'py',
|
||||
label: 'Python',
|
||||
},
|
||||
{
|
||||
id: 'dotnet',
|
||||
label: 'C#',
|
||||
},
|
||||
{
|
||||
id: 'java',
|
||||
label: 'Java',
|
||||
},
|
||||
]
|
||||
|
||||
type PlaygroundContextT = {
|
||||
activeSectionIndex: number
|
||||
setActiveSectionIndex: (sectionIndex: number) => void
|
||||
scrollToSection: number | undefined
|
||||
setScrollToSection: (sectionIndex?: number) => void
|
||||
codeLanguages: Array<CodeLanguage>
|
||||
currentLanguage: CodeLanguage
|
||||
article: PlaygroundArticleT | undefined
|
||||
}
|
||||
|
||||
export const PlaygroundContext = createContext<PlaygroundContextT | null>(null)
|
||||
|
||||
export const usePlaygroundContext = (): PlaygroundContextT => {
|
||||
const context = useContext(PlaygroundContext)
|
||||
|
||||
if (!context) {
|
||||
throw new Error('"usePlaygroundContext" may only be used inside "PlaygroundContext.Provider"')
|
||||
}
|
||||
|
||||
return context
|
||||
}
|
||||
|
||||
export const PlaygroundContextProvider = (props: { children: React.ReactNode }) => {
|
||||
const router = useRouter()
|
||||
const [activeSectionIndex, setActiveSectionIndex] = useState(0)
|
||||
const [scrollToSection, setScrollToSection] = useState<number>()
|
||||
const path = router.asPath.includes('@latest')
|
||||
? router.asPath.split('?')[0].split('#')[0].split('@latest')[1]
|
||||
: router.asPath.split('?')[0].split('#')[0]
|
||||
const relevantArticles = articles.filter(({ slug }) => slug === path)
|
||||
|
||||
const { langId } = router.query
|
||||
const availableLanguageIds = relevantArticles.map(({ codeLanguageId }) => codeLanguageId)
|
||||
const currentLanguage =
|
||||
codeLanguages.find(({ id }) => id === langId) ||
|
||||
(codeLanguages.find(({ id }) => id === availableLanguageIds[0]) as CodeLanguage)
|
||||
|
||||
const article = relevantArticles.find(
|
||||
({ codeLanguageId }) => codeLanguageId === currentLanguage?.id
|
||||
)
|
||||
|
||||
const context = {
|
||||
activeSectionIndex,
|
||||
setActiveSectionIndex,
|
||||
scrollToSection,
|
||||
setScrollToSection,
|
||||
currentLanguage,
|
||||
codeLanguages: codeLanguages.filter(({ id }) => availableLanguageIds.includes(id)),
|
||||
article,
|
||||
}
|
||||
|
||||
return <PlaygroundContext.Provider value={context}>{props.children}</PlaygroundContext.Provider>
|
||||
}
|
||||
@@ -1,27 +0,0 @@
|
||||
import { SubNav } from '@primer/react'
|
||||
import { Link } from 'components/Link'
|
||||
import { useRouter } from 'next/router'
|
||||
import { usePlaygroundContext } from 'components/context/PlaygroundContext'
|
||||
|
||||
export const CodeLanguagePicker = () => {
|
||||
const router = useRouter()
|
||||
const { codeLanguages, currentLanguage } = usePlaygroundContext()
|
||||
const routePath = router.asPath.split('?')[0]
|
||||
|
||||
return (
|
||||
<SubNav>
|
||||
<SubNav.Links>
|
||||
{codeLanguages.map((language) => (
|
||||
<SubNav.Link
|
||||
key={language.id}
|
||||
as={Link}
|
||||
href={`/${router.locale}${routePath}?langId=${language.id}`}
|
||||
selected={language.id === currentLanguage.id}
|
||||
>
|
||||
{language.label}
|
||||
</SubNav.Link>
|
||||
))}
|
||||
</SubNav.Links>
|
||||
</SubNav>
|
||||
)
|
||||
}
|
||||
@@ -1,104 +0,0 @@
|
||||
import React from 'react'
|
||||
import cx from 'classnames'
|
||||
import { CheckIcon, SearchIcon } from '@primer/octicons-react'
|
||||
|
||||
import { PlaygroundContentBlock } from './PlaygroundContentBlock'
|
||||
|
||||
import { ArticleMarkdown } from 'components/playground/ArticleMarkdown'
|
||||
import { getAnchorLink } from 'components/lib/getAnchorLink'
|
||||
import { usePlaygroundContext } from 'components/context/PlaygroundContext'
|
||||
|
||||
export const PlaygroundArticle = () => {
|
||||
const { article } = usePlaygroundContext()
|
||||
|
||||
if (!article) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
{/* article header */}
|
||||
<div className="border-bottom py-5">
|
||||
<h1>{article.title}</h1>
|
||||
<h2 className="h3 my-3 text-normal text-gray border-bottom-0" data-search="lead">
|
||||
<ArticleMarkdown className="markdown-body">{article.intro}</ArticleMarkdown>
|
||||
</h2>
|
||||
|
||||
{article.prerequisites && (
|
||||
<div className="mt-4 d-flex">
|
||||
<div className="pr-3 mt-1">
|
||||
<Circle className="color-fg-on-emphasis color-bg-emphasis">
|
||||
<CheckIcon className="" size={15} />
|
||||
</Circle>
|
||||
</div>
|
||||
|
||||
<div className="">
|
||||
<h3>Prerequisites</h3>
|
||||
<ArticleMarkdown className="markdown-body playground">
|
||||
{article.prerequisites}
|
||||
</ArticleMarkdown>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* toc */}
|
||||
<div className="mt-4 d-flex">
|
||||
<div className="pr-3 mt-1">
|
||||
<Circle className="color-fg-on-emphasis color-bg-emphasis">
|
||||
<SearchIcon className="" size={15} />
|
||||
</Circle>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3>In this Article</h3>
|
||||
<ul className="list-style-none ml-3 mt-2">
|
||||
{article.contentBlocks.map((block) => {
|
||||
if (!block.title || block.type === 'sub-section-2') {
|
||||
return null
|
||||
}
|
||||
const anchor = getAnchorLink(block.title)
|
||||
|
||||
if (block.type === 'sub-section') {
|
||||
return (
|
||||
<li key={anchor} className="pointer ml-4 my-1">
|
||||
<a href={`#${anchor}`}>{block.title}</a>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<li key={anchor} className="pointer text-bold text-blue my-2">
|
||||
<a href={`#${anchor}`}>{block.title}</a>
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* body */}
|
||||
{article.contentBlocks.map((block, index) => (
|
||||
<PlaygroundContentBlock
|
||||
key={`section-${index}`}
|
||||
contentBlock={block}
|
||||
sectionIndex={index}
|
||||
/>
|
||||
))}
|
||||
|
||||
{/* spacer for end of article */}
|
||||
<div style={{ minHeight: '75vh' }} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const Circle = ({ className, children }: { className?: string; children?: React.ReactNode }) => {
|
||||
return (
|
||||
<div
|
||||
className={cx('circle d-flex flex-justify-center flex-items-center', className)}
|
||||
style={{ width: 24, height: 24 }}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,94 +0,0 @@
|
||||
import { GetServerSideProps } from 'next'
|
||||
import { BeakerIcon, ZapIcon } from '@primer/octicons-react'
|
||||
|
||||
import { MainContextT, MainContext, getMainContext } from 'components/context/MainContext'
|
||||
|
||||
import {
|
||||
PlaygroundContextProvider,
|
||||
usePlaygroundContext,
|
||||
} from 'components/context/PlaygroundContext'
|
||||
import { PlaygroundArticle } from 'components/playground/PlaygroundArticle'
|
||||
|
||||
import { Editor } from 'components/playground/editor/Editor'
|
||||
import { DefaultLayout } from 'components/DefaultLayout'
|
||||
import { CodeLanguagePicker } from 'components/playground/CodeLanguagePicker'
|
||||
import { Link } from 'components/Link'
|
||||
import { useRouter } from 'next/router'
|
||||
import { Callout } from 'components/ui/Callout'
|
||||
import { GenericError } from 'components/GenericError'
|
||||
|
||||
type Props = {
|
||||
mainContext: MainContextT
|
||||
}
|
||||
export default function PlaygroundArticlePage({ mainContext }: Props) {
|
||||
return (
|
||||
<MainContext.Provider value={mainContext}>
|
||||
<DefaultLayout>
|
||||
<PlaygroundContextProvider>
|
||||
<PageInner />
|
||||
</PlaygroundContextProvider>
|
||||
</DefaultLayout>
|
||||
</MainContext.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
function PageInner() {
|
||||
const router = useRouter()
|
||||
const { article } = usePlaygroundContext()
|
||||
|
||||
if (!article) {
|
||||
return <GenericError />
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="p-responsive my-5 mx-auto" style={{ maxWidth: 1600, minWidth: 768 }}>
|
||||
<div className="d-flex">
|
||||
<article className="col-6 ml-lg-3 mr-3">
|
||||
<Callout variant="info">
|
||||
<p className="d-flex">
|
||||
<span className="mr-3 mt-1">
|
||||
<BeakerIcon size={18} />
|
||||
</span>
|
||||
<span>
|
||||
You've found one of our experimental articles! Have ideas or feedback for how we can
|
||||
further improve this article? Let us know{' '}
|
||||
<Link href="https://github.com/github/docs/discussions/9369" target="_blank">
|
||||
in the discussion
|
||||
</Link>
|
||||
.
|
||||
</span>
|
||||
</p>
|
||||
</Callout>
|
||||
<PlaygroundArticle />
|
||||
</article>
|
||||
|
||||
<div className="col-6">
|
||||
<div className="fix position-sticky mt-3" style={{ top: '6.5em' }}>
|
||||
<div className="d-flex flex-justify-between flex-items-center mb-3">
|
||||
<CodeLanguagePicker />
|
||||
<div className="flash">
|
||||
<ZapIcon className="mr-2" />
|
||||
<Link href={`/${router.locale}${article.originalArticle}`}>
|
||||
Switch to non-interactive article
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Editor article={article} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export const getServerSideProps: GetServerSideProps<Props> = async (context) => {
|
||||
const req = context.req as any
|
||||
const res = context.res as any
|
||||
|
||||
return {
|
||||
props: {
|
||||
mainContext: await getMainContext(req, res),
|
||||
},
|
||||
}
|
||||
}
|
||||
@@ -1,81 +0,0 @@
|
||||
import React, { useEffect, useRef } from 'react'
|
||||
import cx from 'classnames'
|
||||
|
||||
import { usePlaygroundContext } from 'components/context/PlaygroundContext'
|
||||
import { useOnScreen } from 'components/hooks/useOnScreen'
|
||||
import { getAnchorLink } from 'components/lib/getAnchorLink'
|
||||
import { ContentBlock } from './types'
|
||||
import { ArticleMarkdown } from 'components/playground/ArticleMarkdown'
|
||||
|
||||
interface Props {
|
||||
contentBlock: ContentBlock
|
||||
sectionIndex: number
|
||||
}
|
||||
|
||||
export const PlaygroundContentBlock = ({ sectionIndex, contentBlock }: Props) => {
|
||||
const { activeSectionIndex, setActiveSectionIndex, scrollToSection, setScrollToSection } =
|
||||
usePlaygroundContext()
|
||||
const containerRef = useRef<HTMLDivElement>(null)
|
||||
const isOnScreen = useOnScreen(containerRef, {
|
||||
threshold: 0,
|
||||
rootMargin: '-25% 0px -75% 0px',
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
if (isOnScreen) {
|
||||
setActiveSectionIndex(sectionIndex)
|
||||
}
|
||||
}, [isOnScreen])
|
||||
|
||||
useEffect(() => {
|
||||
if (scrollToSection === sectionIndex) {
|
||||
containerRef.current?.scrollIntoView({
|
||||
block: 'start',
|
||||
inline: 'nearest',
|
||||
behavior: 'smooth',
|
||||
})
|
||||
setScrollToSection()
|
||||
}
|
||||
}, [scrollToSection])
|
||||
|
||||
const isActive = sectionIndex === activeSectionIndex
|
||||
const anchorLink = getAnchorLink(contentBlock.title || '')
|
||||
const showDivider = !isActive && activeSectionIndex - 1 !== sectionIndex
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cx(
|
||||
'root p-4',
|
||||
isActive
|
||||
? 'color-bg-default color-shadow-medium rounded-2 color-border-accent-emphasis'
|
||||
: '',
|
||||
showDivider && 'border-bottom'
|
||||
)}
|
||||
style={{
|
||||
minHeight: contentBlock.title ? '25.1vh' : 'unset',
|
||||
border: '1px solid transparent',
|
||||
}}
|
||||
ref={containerRef}
|
||||
id={anchorLink}
|
||||
>
|
||||
{contentBlock.title && (
|
||||
<h3
|
||||
className={cx(
|
||||
'anchor mb-4',
|
||||
contentBlock.type === 'default' && 'h3',
|
||||
contentBlock.type === 'sub-section' && 'h4'
|
||||
)}
|
||||
>
|
||||
<a className="d-flex color-fg-default" href={`#${anchorLink}`}>
|
||||
{contentBlock.title}
|
||||
</a>
|
||||
</h3>
|
||||
)}
|
||||
<div data-search="article-body">
|
||||
<ArticleMarkdown className="markdown-body playground">
|
||||
{contentBlock.content}
|
||||
</ArticleMarkdown>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,324 +0,0 @@
|
||||
import dedent from 'ts-dedent'
|
||||
import { PlaygroundArticleT } from 'components/playground/types'
|
||||
|
||||
const article: PlaygroundArticleT = {
|
||||
title: 'Add a dev container configuration to your repository',
|
||||
shortTitle: 'C# codespaces',
|
||||
topics: ['Codespaces', 'Developer', 'Organization'],
|
||||
type: 'tutorial',
|
||||
slug: '/codespaces/setting-up-your-project-for-codespaces/setting-up-your-project-for-codespaces',
|
||||
originalArticle:
|
||||
'/codespaces/setting-up-your-project-for-codespaces/setting-up-your-dotnet-project-for-codespaces',
|
||||
codeLanguageId: 'dotnet',
|
||||
intro: dedent`
|
||||
This guide shows you how to add a dev container configuration to your repository to define the GitHub Codespaces development environment for your **C# (.NET)** codebase. For more information, see "[Introduction to dev containers](/codespaces/setting-up-your-project-for-codespaces/introduction-to-dev-containers)."
|
||||
|
||||
To work through the instructions in this guide you will use a codespace, in either the Visual Studio Code desktop application or the VS Code web client.
|
||||
|
||||
These instructions are for C#. If you want to add a dev container configuration for another programming language, click the language button to the right.
|
||||
`,
|
||||
prerequisites: dedent`
|
||||
- You should have an existing C# (.NET) project in a repository on GitHub.com. If you don't have a project, you can try this tutorial with the following example: https://github.com/2percentsilk/python-quickstart.
|
||||
- GitHub Codespaces must be enabled for your organization. For more information, see "[Enabling GitHub Codespaces for your organization](/codespaces/managing-codespaces-for-your-organization/enabling-codespaces-for-your-organization)."
|
||||
`,
|
||||
contentBlocks: [
|
||||
{
|
||||
codeBlock: {
|
||||
id: '0',
|
||||
},
|
||||
type: 'default',
|
||||
title: 'Step 1: Open your project in a codespace',
|
||||
content: dedent`
|
||||
1. Under the repository name, use the **Code** drop-down menu, and in the **Codespaces** tab, click the plus sign (+).
|
||||
|
||||

|
||||
|
||||
If you don’t see this option, GitHub Codespaces isn't available for your project. See [Access to GitHub Codespaces](/codespaces/developing-in-codespaces/creating-a-codespace-for-a-repository#access-to-codespaces) for more information.
|
||||
|
||||
When you create a codespace, your project is created on a remote VM that is dedicated to you. By default, the container for your codespace has many languages and runtimes including .NET. It also includes a common set of tools like git, wget, rsync, openssh, and nano.
|
||||
|
||||
You can customize your codespace by adjusting the amount of vCPUs and RAM, [adding dotfiles to personalize your environment](/codespaces/setting-up-your-codespace/personalizing-codespaces-for-your-account), or by modifying the tools and scripts installed.
|
||||
|
||||
GitHub Codespaces uses a file called \`devcontainer.json\` to configure the development container that you use when you work in a codespace. Each repository can contain one or more \`devcontainer.json\` files, to give you exactly the development environment you need to work on your code in a codespace.
|
||||
|
||||
On launch, GitHub Codespaces uses a \`devcontainer.json\` file, and any dependent files that make up the dev container configuration, to install tools and runtimes, and perform other setup tasks that the project requires. For more information, see "[Introduction to dev containers](/codespaces/setting-up-your-codespace/configuring-codespaces-for-your-project)."
|
||||
`,
|
||||
},
|
||||
{
|
||||
codeBlock: {
|
||||
id: '0',
|
||||
},
|
||||
type: 'default',
|
||||
title: 'Step 2: Add a dev container configuration to your repository from a template',
|
||||
content: dedent`
|
||||
The default development container, or "dev container," for GitHub Codespaces comes with the latest .NET version and common tools preinstalled. However, we recommend that you configure your own dev container to include all of the tools and scripts that your project needs. This will ensure a fully reproducible environment for all GitHub Codespaces users in your repository.
|
||||
|
||||
To set up your repository to use a custom dev container, you will need to create one or more \`devcontainer.json\` files. You can add these either from a template, in Visual Studio Code, or you can write your own. For more information on dev container configurations, see "[Introduction to dev containers](/codespaces/setting-up-your-codespace/configuring-codespaces-for-your-project)".
|
||||
|
||||
1. Access the Command Palette (<kbd>Shift</kbd>+<kbd>Command</kbd>+<kbd>P</kbd> / <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd>), then start typing "dev container". Select **Codespaces: Add Development Container Configuration Files...**.
|
||||
|
||||

|
||||
|
||||
2. For this example, click **C# (.NET)**. If you need additional features you can select any container that’s specific to C# (.NET) or a combination of tools such as C# (.NET) and MS SQL.
|
||||
|
||||

|
||||
|
||||
3. Click the recommended version of .NET.
|
||||
|
||||

|
||||
|
||||
4. Accept the default option to add Node.js to your customization.
|
||||
|
||||

|
||||
|
||||
5. Select any additional features to install and click **OK**.
|
||||
6. Access the Command Palette (<kbd>Shift</kbd>+<kbd>Command</kbd>+<kbd>P</kbd> / <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd>), then start typing "rebuild". Select **Codespaces: Rebuild Container**.
|
||||

|
||||
|
||||
`,
|
||||
},
|
||||
{
|
||||
codeBlock: {
|
||||
id: '0',
|
||||
},
|
||||
type: 'sub-section',
|
||||
title: 'Anatomy of your dev container',
|
||||
content: dedent`
|
||||
Adding the C# (.NET) dev container template adds a \`.devcontainer\` directory to the root of your project's repository with the following files:
|
||||
|
||||
- \`devcontainer.json\`
|
||||
- Dockerfile
|
||||
|
||||
The newly added \`devcontainer.json\` file defines a few properties that are described below.
|
||||
`,
|
||||
},
|
||||
{
|
||||
type: 'sub-section-2',
|
||||
codeBlock: {
|
||||
id: '0',
|
||||
highlight: 2,
|
||||
},
|
||||
content: dedent`
|
||||
**\`name\`** - You can name your dev container anything, this is just the default.
|
||||
`,
|
||||
},
|
||||
{
|
||||
type: 'sub-section',
|
||||
codeBlock: {
|
||||
id: '0',
|
||||
highlight: [3, 13],
|
||||
},
|
||||
content: dedent`
|
||||
**\`build\`** - The build properties.
|
||||
- **\`dockerfile\`** - In the \`build\` object, \`dockerfile\` contains the path to the Dockerfile that was also added from the template.
|
||||
- **\`args\`**
|
||||
- **\`VARIANT\`**: This file only contains one build argument, which is the .NET Core version that we want to use.
|
||||
`,
|
||||
},
|
||||
{
|
||||
type: 'sub-section',
|
||||
codeBlock: {
|
||||
id: '0',
|
||||
highlight: [16, 18],
|
||||
},
|
||||
content: dedent`
|
||||
**\`settings\`** - These are Visual Studio Code settings that you can set.
|
||||
- **\`terminal.integrated.shell.linux\`** - While bash is the default here, you could use other terminal shells by modifying this.
|
||||
`,
|
||||
},
|
||||
{
|
||||
type: 'sub-section',
|
||||
codeBlock: {
|
||||
id: '0',
|
||||
highlight: [20, 23],
|
||||
},
|
||||
content: dedent`
|
||||
**\`extensions\`** - These are extensions included by default.
|
||||
- **\`ms-dotnettools.csharp\`** - The Microsoft C# extension provides rich support for developing in C#, including features such as IntelliSense, linting, debugging, code navigation, code formatting, refactoring, variable explorer, test explorer, and more.
|
||||
`,
|
||||
},
|
||||
{
|
||||
type: 'sub-section',
|
||||
codeBlock: {
|
||||
id: '0',
|
||||
highlight: 26,
|
||||
},
|
||||
content: dedent`
|
||||
**\`forwardPorts\`** - Any ports listed here will be forwarded automatically.
|
||||
`,
|
||||
},
|
||||
{
|
||||
type: 'sub-section',
|
||||
codeBlock: {
|
||||
id: '0',
|
||||
highlight: 29,
|
||||
},
|
||||
content: dedent`
|
||||
**\`postCreateCommand\`** - Use this to run commands that aren't defined in the Dockerfile, like \`dotnet restore\`, after your codespace is created.
|
||||
`,
|
||||
},
|
||||
{
|
||||
type: 'sub-section',
|
||||
codeBlock: {
|
||||
id: '0',
|
||||
highlight: 32,
|
||||
},
|
||||
content: dedent`
|
||||
**\`remoteUser\`** - By default, you’re running as the vscode user, but you can optionally set this to root.
|
||||
`,
|
||||
},
|
||||
{
|
||||
codeBlock: {
|
||||
id: '1',
|
||||
},
|
||||
type: 'sub-section',
|
||||
title: 'Dockerfile',
|
||||
content: dedent`
|
||||
You can use the Dockerfile to add additional container layers to specify OS packages, node versions, or global packages we want included in our container.
|
||||
`,
|
||||
},
|
||||
{
|
||||
codeBlock: {
|
||||
id: '0',
|
||||
highlight: [21, 29],
|
||||
},
|
||||
type: 'default',
|
||||
title: 'Step 3: Modify your devcontainer.json file',
|
||||
content: dedent`
|
||||
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 to install extensions and your project dependencies when your codespace launches.
|
||||
|
||||
1. In the Explorer, expand the \`.devcontainer\` folder and select the \`devcontainer.json\` file from the tree to open it.
|
||||
|
||||

|
||||
|
||||
2. Update your the \`extensions\` list in your \`devcontainer.json\` file to add a few extensions that are useful when working with your project.
|
||||
|
||||
\`\`\`json{:copy}
|
||||
"extensions": [
|
||||
"ms-dotnettools.csharp",
|
||||
"streetsidesoftware.code-spell-checker"
|
||||
],
|
||||
\`\`\`
|
||||
|
||||
3. Uncomment the \`postCreateCommand\` to restore dependencies as part of the codespace setup process.
|
||||
|
||||
\`\`\`json{:copy}
|
||||
// Use 'postCreateCommand' to run commands after the container is created.
|
||||
"postCreateCommand": "dotnet restore",
|
||||
\`\`\`
|
||||
|
||||
4. Access the Command Palette (<kbd>Shift</kbd>+<kbd>Command</kbd>+<kbd>P</kbd> / <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd>), then start typing "rebuild". Select **Codespaces: Rebuild Container**.
|
||||
|
||||

|
||||
|
||||
Rebuilding inside your codespace ensures your changes work as expected before you commit the changes to the repository. If something does result in a failure, you’ll be placed in a codespace with a recovery container that you can rebuild from to keep adjusting your container.
|
||||
|
||||
You may occasionally want to perform a full rebuild to clear your cache and rebuild your container with fresh images. For more information, see "[Performing a full rebuild of a container](/codespaces/codespaces-reference/performing-a-full-rebuild-of-a-container)."
|
||||
|
||||
5. Check your changes were successfully applied by verifying the "Code Spell Checker" extension was installed.
|
||||
|
||||

|
||||
|
||||
`,
|
||||
},
|
||||
{
|
||||
codeBlock: {
|
||||
id: '0',
|
||||
},
|
||||
type: 'default',
|
||||
title: 'Step 4: Run your application',
|
||||
content: dedent`
|
||||
In the previous section, you used the \`postCreateCommand\` to install a set of packages via the \`dotnet restore\` command. With our dependencies now installed, we can run our application.
|
||||
|
||||
1. Run your application by pressing \`F5\` or entering \`dotnet watch run\` in your terminal.
|
||||
|
||||
2. When your project starts, you should see a message in the bottom right corner with a prompt to connect to the port your project uses.
|
||||
|
||||

|
||||
|
||||
`,
|
||||
},
|
||||
{
|
||||
codeBlock: {
|
||||
id: '0',
|
||||
},
|
||||
type: 'default',
|
||||
title: 'Step 5: Commit your changes',
|
||||
content: dedent`
|
||||
Once you've made changes to your codespace, either new code or configuration changes, you'll want to commit your changes. Committing changes to your repository ensures that anyone else who creates a codespace from this repository has the same configuration. This also means that any customization you do, such as adding Visual Studio Code extensions, will appear for all users.
|
||||
|
||||
For information, see "[Using source control in your codespace](/codespaces/developing-in-codespaces/using-source-control-in-your-codespace#committing-your-changes)."
|
||||
`,
|
||||
},
|
||||
],
|
||||
codeBlocks: {
|
||||
'0': {
|
||||
fileName: '.devcontainer/devcontainer.json',
|
||||
language: 'json',
|
||||
code: dedent`
|
||||
{
|
||||
"name": "C# (.NET)",
|
||||
"build": {
|
||||
"dockerfile": "Dockerfile",
|
||||
"args": {
|
||||
// Update 'VARIANT' to pick a .NET Core version: 2.1, 3.1, 5.0
|
||||
"VARIANT": "5.0",
|
||||
// Options
|
||||
"INSTALL_NODE": "true",
|
||||
"NODE_VERSION": "lts/*",
|
||||
"INSTALL_AZURE_CLI": "false"
|
||||
}
|
||||
},
|
||||
|
||||
// Set *default* container specific settings.json values on container create.
|
||||
"settings": {
|
||||
"terminal.integrated.shell.linux": "/bin/bash"
|
||||
},
|
||||
|
||||
// Add the IDs of extensions you want installed when the container is created.
|
||||
"extensions": [
|
||||
"ms-dotnettools.csharp"
|
||||
],
|
||||
|
||||
// Use 'forwardPorts' to make a list of ports inside the container available locally.
|
||||
// "forwardPorts": [5000, 5001],
|
||||
|
||||
// Use 'postCreateCommand' to run commands after the container is created.
|
||||
// "postCreateCommand": "dotnet restore",
|
||||
|
||||
// Comment out connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
|
||||
"remoteUser": "vscode"
|
||||
}
|
||||
`,
|
||||
},
|
||||
'1': {
|
||||
fileName: '.devcontainer/Dockerfile',
|
||||
language: 'bash',
|
||||
code: dedent`
|
||||
# [Choice] .NET version: 5.0, 3.1, 2.1
|
||||
ARG VARIANT="5.0"
|
||||
FROM mcr.microsoft.com/vscode/devcontainers/dotnetcore:0-\${VARIANT}
|
||||
|
||||
# [Option] Install Node.js
|
||||
ARG INSTALL_NODE="true"
|
||||
ARG NODE_VERSION="lts/*"
|
||||
RUN if [ "\${INSTALL_NODE}" = "true" ]; then su vscode -c "umask 0002 && . /usr/local/share/nvm/nvm.sh && nvm install \${NODE_VERSION} 2>&1"; fi
|
||||
|
||||
# [Option] Install Azure CLI
|
||||
ARG INSTALL_AZURE_CLI="false"
|
||||
COPY library-scripts/azcli-debian.sh /tmp/library-scripts/
|
||||
RUN if [ "$INSTALL_AZURE_CLI" = "true" ]; then bash /tmp/library-scripts/azcli-debian.sh; fi \
|
||||
&& apt-get clean -y && rm -rf /var/lib/apt/lists/* /tmp/library-scripts
|
||||
|
||||
# [Optional] Uncomment this section to install additional OS packages.
|
||||
# RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
|
||||
# && apt-get -y install --no-install-recommends <your-package-list-here>
|
||||
|
||||
# [Optional] Uncomment this line to install global node packages.
|
||||
# RUN su vscode -c "source /usr/local/share/nvm/nvm.sh && npm install -g <your-package-here>" 2>&1
|
||||
`,
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
export default article
|
||||
@@ -1,312 +0,0 @@
|
||||
import dedent from 'ts-dedent'
|
||||
import { PlaygroundArticleT } from 'components/playground/types'
|
||||
|
||||
const article: PlaygroundArticleT = {
|
||||
title: 'Add a dev container configuration to your repository',
|
||||
shortTitle: 'Java codespaces',
|
||||
topics: ['Codespaces', 'Developer', 'Organization', 'Java'],
|
||||
type: 'tutorial',
|
||||
slug: '/codespaces/setting-up-your-project-for-codespaces/setting-up-your-project-for-codespaces',
|
||||
originalArticle:
|
||||
'/codespaces/setting-up-your-project-for-codespaces/setting-up-your-java-project-for-codespaces',
|
||||
codeLanguageId: 'java',
|
||||
intro: dedent`
|
||||
This guide shows you how to add a dev container configuration to your repository to define the GitHub Codespaces development environment for your **Java** codebase. For more information, see "[Introduction to dev containers](/codespaces/setting-up-your-project-for-codespaces/introduction-to-dev-containers)."
|
||||
|
||||
To work through the instructions in this guide you will use a codespace, in either the Visual Studio Code desktop application or the VS Code web client.
|
||||
|
||||
These instructions are for Java. If you want to add a dev container configuration for another programming language, click the language button to the right.
|
||||
`,
|
||||
prerequisites: dedent`
|
||||
- You should have an existing Java project in a repository on GitHub.com. If you don't have a project, you can try this tutorial with the following example: https://github.com/microsoft/vscode-remote-try-java
|
||||
- GitHub Codespaces must be enabled for your organization. For more information, see "[Enabling GitHub Codespaces for your organization](/codespaces/managing-codespaces-for-your-organization/enabling-codespaces-for-your-organization)."
|
||||
`,
|
||||
contentBlocks: [
|
||||
{
|
||||
codeBlock: {
|
||||
id: '0',
|
||||
},
|
||||
type: 'default',
|
||||
title: 'Step 1: Open your project in a codespace',
|
||||
content: dedent`
|
||||
1. Under the repository name, use the **Code** drop-down menu, and in the **Codespaces** tab, click the plus sign (+).
|
||||
|
||||

|
||||
|
||||
If you don’t see this option, GitHub Codespaces isn't available for your project. See [Access to GitHub Codespaces](/codespaces/developing-in-codespaces/creating-a-codespace-for-a-repository#access-to-codespaces) for more information.
|
||||
|
||||
When you create a codespace, your project is created on a remote VM that is dedicated to you. By default, the container for your codespace has many languages and runtimes including Java, nvm, npm, and yarn. It also includes a common set of tools like git, wget, rsync, openssh, and nano.
|
||||
|
||||
GitHub Codespaces uses a file called \`devcontainer.json\` to configure the development container that you use when you work in a codespace. Each repository can contain one or more \`devcontainer.json\` files, to give you exactly the development environment you need to work on your code in a codespace.
|
||||
|
||||
On launch, GitHub Codespaces uses a \`devcontainer.json\` file, and any dependent files that make up the dev container configuration, to install tools and runtimes, and perform other setup tasks that the project requires. For more information, see "[Introduction to dev containers](/codespaces/setting-up-your-codespace/configuring-codespaces-for-your-project)."
|
||||
`,
|
||||
},
|
||||
{
|
||||
codeBlock: {
|
||||
id: '0',
|
||||
},
|
||||
type: 'default',
|
||||
title: 'Step 2: Add a dev container configuration to your repository from a template',
|
||||
content: dedent`
|
||||
The default development container, or "dev container," for GitHub Codespaces comes with the latest Java version, package managers (Maven, Gradle), and other common tools preinstalled. However, we recommend that you configure your own dev container to include all of the tools and scripts that your project needs. This will ensure a fully reproducible environment for all GitHub Codespaces users in your repository.
|
||||
|
||||
To set up your repository to use a custom dev container, you will need to create one or more \`devcontainer.json\` files. You can add these either from a template, in Visual Studio Code, or you can write your own. For more information on dev container configurations, see "[Introduction to dev containers](/codespaces/setting-up-your-codespace/configuring-codespaces-for-your-project)".
|
||||
|
||||
1. Access the Command Palette (<kbd>Shift</kbd>+<kbd>Command</kbd>+<kbd>P</kbd> / <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd>), then start typing "dev container". Select **Codespaces: Add Development Container Configuration Files...**.
|
||||
|
||||

|
||||
|
||||
2. For this example, click **Java**. In practice, you could select any container that’s specific to Java or a combination of tools such as Java and Azure Functions.
|
||||
|
||||

|
||||
|
||||
3. Click the recommended version of Java.
|
||||
|
||||

|
||||
|
||||
4. Select any additional features to install and click **OK**.
|
||||
5. Access the Command Palette (<kbd>Shift</kbd>+<kbd>Command</kbd>+<kbd>P</kbd> / <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd>), then start typing "rebuild". Select **Codespaces: Rebuild Container**.
|
||||
|
||||

|
||||
|
||||
`,
|
||||
},
|
||||
{
|
||||
codeBlock: {
|
||||
id: '0',
|
||||
},
|
||||
type: 'sub-section',
|
||||
title: 'Anatomy of your dev container',
|
||||
content: dedent`
|
||||
Adding the Java dev container template adds a .devcontainer directory to the root of your project's repository with the following files:
|
||||
|
||||
- \`devcontainer.json\`
|
||||
- Dockerfile
|
||||
|
||||
The newly added \`devcontainer.json\` file defines a few properties that are described below.
|
||||
`,
|
||||
},
|
||||
{
|
||||
type: 'sub-section-2',
|
||||
codeBlock: {
|
||||
id: '0',
|
||||
highlight: 4,
|
||||
},
|
||||
content: dedent`
|
||||
**\`name\`** - You can name your dev container anything, this is just the default.
|
||||
`,
|
||||
},
|
||||
{
|
||||
type: 'sub-section',
|
||||
codeBlock: {
|
||||
id: '0',
|
||||
highlight: [5, 16],
|
||||
},
|
||||
content: dedent`
|
||||
**\`build\`** - The build properties.
|
||||
- **\`dockerfile\`** - In the \`build\` object, \`dockerfile\` contains the path to the Dockerfile that was also added from the template.
|
||||
- **\`args\`**
|
||||
- **\`VARIANT\`**: This file only contains one build argument, which is the Java version that is passed into the Dockerfile.
|
||||
`,
|
||||
},
|
||||
{
|
||||
type: 'sub-section',
|
||||
codeBlock: {
|
||||
id: '0',
|
||||
highlight: [19, 23],
|
||||
},
|
||||
content: dedent`
|
||||
**\`settings\`** - These are Visual Studio Code settings that you can set.
|
||||
- **\`terminal.integrated.shell.linux\`** - While bash is the default here, you could use other terminal shells by modifying this.
|
||||
`,
|
||||
},
|
||||
{
|
||||
type: 'sub-section',
|
||||
codeBlock: {
|
||||
id: '0',
|
||||
highlight: [26, 28],
|
||||
},
|
||||
content: dedent`
|
||||
**\`extensions\`** - These are extensions included by default.
|
||||
- **\`vscjava.vscode-java-pack\`** - The Java Extension Pack provides popular extensions for Java development to get you started.
|
||||
`,
|
||||
},
|
||||
{
|
||||
type: 'sub-section',
|
||||
codeBlock: {
|
||||
id: '0',
|
||||
highlight: 31,
|
||||
},
|
||||
content: dedent`
|
||||
**\`forwardPorts\`** - Any ports listed here will be forwarded automatically.
|
||||
`,
|
||||
},
|
||||
{
|
||||
type: 'sub-section',
|
||||
codeBlock: {
|
||||
id: '0',
|
||||
highlight: 34,
|
||||
},
|
||||
content: dedent`
|
||||
**\`postCreateCommand\`** - Use this to run commands that aren't defined in the Dockerfile, after your codespace is created.
|
||||
`,
|
||||
},
|
||||
{
|
||||
type: 'sub-section',
|
||||
codeBlock: {
|
||||
id: '0',
|
||||
highlight: 37,
|
||||
},
|
||||
content: dedent`
|
||||
**\`remoteUser\`** - By default, you’re running as the vscode user, but you can optionally set this to root.
|
||||
`,
|
||||
},
|
||||
{
|
||||
codeBlock: {
|
||||
id: '1',
|
||||
},
|
||||
type: 'sub-section',
|
||||
title: 'Dockerfile',
|
||||
content: dedent`
|
||||
You can use the Dockerfile to add additional container layers to specify OS packages, node versions, or global packages we want included in our container.
|
||||
`,
|
||||
},
|
||||
{
|
||||
codeBlock: {
|
||||
id: '0',
|
||||
highlight: [30, 34],
|
||||
},
|
||||
type: 'default',
|
||||
title: 'Step 3: Modify your devcontainer.json file',
|
||||
content: dedent`
|
||||
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 to install extensions and your project dependencies when your codespace launches.
|
||||
|
||||
1. In the Explorer, expand the \`.devcontainer\` folder and select the \`devcontainer.json\` file from the tree to open it.
|
||||
|
||||

|
||||
|
||||
2. Add the following lines to your \`devcontainer.json\` file after \`extensions\`.
|
||||
|
||||
\`\`\`json{:copy}
|
||||
"postCreateCommand": "java -version",
|
||||
"forwardPorts": [4000],
|
||||
\`\`\`
|
||||
|
||||
For more information about \`devcontainer.json\` properties, see the Visual Studio Code documentation: "[devcontainer.json reference](https://code.visualstudio.com/docs/remote/devcontainerjson-reference)."
|
||||
|
||||
4. Access the Command Palette (<kbd>Shift</kbd>+<kbd>Command</kbd>+<kbd>P</kbd> / <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd>), then start typing "rebuild". Select **Codespaces: Rebuild Container**.
|
||||
|
||||

|
||||
|
||||
Rebuilding inside your codespace ensures your changes work as expected before you commit the changes to the repository. If something does result in a failure, you’ll be placed in a codespace with a recovery container that you can rebuild from to keep adjusting your container.
|
||||
|
||||
You may occasionally want to perform a full rebuild to clear your cache and rebuild your container with fresh images. For more information, see "[Performing a full rebuild of a container](/codespaces/codespaces-reference/performing-a-full-rebuild-of-a-container)."
|
||||
`,
|
||||
},
|
||||
{
|
||||
codeBlock: {
|
||||
id: '0',
|
||||
},
|
||||
type: 'default',
|
||||
title: 'Step 4: Run your application',
|
||||
content: dedent`
|
||||
In the previous section, you used the \`postCreateCommand\` to install a set of packages via npm. You can now use this to run our application with npm.
|
||||
|
||||
1. Run your application by pressing \`F5\`.
|
||||
|
||||
2. When your project starts, you should see a message in the bottom right corner with a prompt to connect to the port your project uses.
|
||||

|
||||
`,
|
||||
},
|
||||
{
|
||||
codeBlock: {
|
||||
id: '0',
|
||||
},
|
||||
type: 'default',
|
||||
title: 'Step 5: Commit your changes',
|
||||
content: dedent`
|
||||
Once you've made changes to your codespace, either new code or configuration changes, you'll want to commit your changes. Committing changes to your repository ensures that anyone else who creates a codespace from this repository has the same configuration. This also means that any customization you do, such as adding Visual Studio Code extensions, will appear for all users.
|
||||
|
||||
For information, see "[Using source control in your codespace](/codespaces/developing-in-codespaces/using-source-control-in-your-codespace#committing-your-changes)."
|
||||
`,
|
||||
},
|
||||
],
|
||||
codeBlocks: {
|
||||
'0': {
|
||||
fileName: '.devcontainer/devcontainer.json',
|
||||
language: 'json',
|
||||
code: dedent`
|
||||
// For format details, see https://aka.ms/vscode-remote/devcontainer.json or this file's README at:
|
||||
// https://github.com/microsoft/vscode-dev-containers/tree/v0.159.0/containers/java
|
||||
{
|
||||
"name": "Java",
|
||||
"build": {
|
||||
"dockerfile": "Dockerfile",
|
||||
"args": {
|
||||
// Update the VARIANT arg to pick a Java version: 11, 14
|
||||
"VARIANT": "11",
|
||||
// Options
|
||||
"INSTALL_MAVEN": "true",
|
||||
"INSTALL_GRADLE": "false",
|
||||
"INSTALL_NODE": "false",
|
||||
"NODE_VERSION": "lts/*"
|
||||
}
|
||||
},
|
||||
|
||||
// Set *default* container specific settings.json values on container create.
|
||||
"settings": {
|
||||
"terminal.integrated.shell.linux": "/bin/bash",
|
||||
"java.home": "/docker-java-home",
|
||||
"maven.executable.path": "/usr/local/sdkman/candidates/maven/current/bin/mvn"
|
||||
},
|
||||
|
||||
// Add the IDs of extensions you want installed when the container is created.
|
||||
"extensions": [
|
||||
"vscjava.vscode-java-pack"
|
||||
],
|
||||
|
||||
// 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": "java -version",
|
||||
|
||||
// Uncomment to connect as a non-root user. See https://aka.ms/vscode-remote/containers/non-root.
|
||||
"remoteUser": "vscode"
|
||||
}
|
||||
`,
|
||||
},
|
||||
'1': {
|
||||
fileName: '.devcontainer/Dockerfile',
|
||||
language: 'bash',
|
||||
code: dedent`
|
||||
# See here for image contents: https://github.com/microsoft/vscode-dev-containers/tree/v0.159.0/containers/java/.devcontainer/base.Dockerfile
|
||||
ARG VARIANT="14"
|
||||
FROM mcr.microsoft.com/vscode/devcontainers/java:0-\${VARIANT}
|
||||
|
||||
# [Optional] Install Maven or Gradle
|
||||
ARG INSTALL_MAVEN="false"
|
||||
ARG MAVEN_VERSION=3.6.3
|
||||
ARG INSTALL_GRADLE="false"
|
||||
ARG GRADLE_VERSION=5.4.1
|
||||
RUN if [ "\${INSTALL_MAVEN}" = "true" ]; then su vscode -c "source /usr/local/sdkman/bin/sdkman-init.sh && sdk install maven \"\${MAVEN_VERSION}\""; fi \
|
||||
&& if [ "\${INSTALL_GRADLE}" = "true" ]; then su vscode -c "source /usr/local/sdkman/bin/sdkman-init.sh && sdk install gradle \"\${GRADLE_VERSION}\""; fi
|
||||
|
||||
# [Optional] Install a version of Node.js using nvm for front end dev
|
||||
ARG INSTALL_NODE="true"
|
||||
ARG NODE_VERSION="lts/*"
|
||||
RUN if [ "\${INSTALL_NODE}" = "true" ]; then su vscode -c "source /usr/local/share/nvm/nvm.sh && nvm install \${NODE_VERSION} 2>&1"; fi
|
||||
|
||||
# [Optional] Uncomment this section to install additional OS packages.
|
||||
# RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
|
||||
# && apt-get -y install --no-install-recommends <your-package-list-here>
|
||||
|
||||
# [Optional] Uncomment this line to install global node packages.
|
||||
# RUN su vscode -c "source /usr/local/share/nvm/nvm.sh && npm install -g <your-package-here>" 2>&1
|
||||
`,
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
export default article
|
||||
@@ -1,295 +0,0 @@
|
||||
import dedent from 'ts-dedent'
|
||||
import { PlaygroundArticleT } from 'components/playground/types'
|
||||
|
||||
const article: PlaygroundArticleT = {
|
||||
title: 'Add a dev container configuration to your repository',
|
||||
shortTitle: 'Node.js codespaces',
|
||||
topics: ['Codespaces', 'Developer', 'Organization', 'Node', 'JavaScript'],
|
||||
type: 'tutorial',
|
||||
slug: '/codespaces/setting-up-your-project-for-codespaces/setting-up-your-project-for-codespaces',
|
||||
originalArticle:
|
||||
'/codespaces/setting-up-your-project-for-codespaces/setting-up-your-nodejs-project-for-codespaces',
|
||||
codeLanguageId: 'nodejs',
|
||||
intro: dedent`
|
||||
This guide shows you how to add a dev container configuration to your repository to define the GitHub Codespaces development environment for your **Node.js** codebase. For more information, see "[Introduction to dev containers](/codespaces/setting-up-your-project-for-codespaces/introduction-to-dev-containers)."
|
||||
|
||||
To work through the instructions in this guide you will use a codespace, in either the Visual Studio Code desktop application or the VS Code web client.
|
||||
|
||||
These instructions are for Node.js. If you want to add a dev container configuration for another programming language, click the language button to the right.
|
||||
`,
|
||||
prerequisites: dedent`
|
||||
- You should have an existing JavaScript, Node.js, or TypeScript project in a repository on GitHub.com. If you don't have a project, you can try this tutorial with the following example: https://github.com/microsoft/vscode-remote-try-node
|
||||
- GitHub Codespaces must be enabled for your organization. For more information, see "[Enabling GitHub Codespaces for your organization](/codespaces/managing-codespaces-for-your-organization/enabling-codespaces-for-your-organization)."
|
||||
`,
|
||||
contentBlocks: [
|
||||
{
|
||||
codeBlock: {
|
||||
id: '0',
|
||||
},
|
||||
type: 'default',
|
||||
title: 'Step 1: Open your project in a codespace',
|
||||
content: dedent`
|
||||
1. Under the repository name, use the **Code** drop-down menu, and in the **Codespaces** tab, click the plus sign (+).
|
||||
|
||||

|
||||
|
||||
If you don’t see this option, GitHub Codespaces isn't available for your project. See [Access to GitHub Codespaces](/codespaces/developing-in-codespaces/creating-a-codespace-for-a-repository#access-to-codespaces) for more information.
|
||||
|
||||
When you create a codespace, your project is created on a remote VM that is dedicated to you. By default, the container for your codespace has many languages and runtimes including Node.js, JavaScript, Typescript, nvm, npm, and yarn. It also includes a common set of tools like git, wget, rsync, openssh, and nano.
|
||||
|
||||
You can customize your codespace by adjusting the amount of vCPUs and RAM, [adding dotfiles to personalize your environment](/codespaces/setting-up-your-codespace/personalizing-codespaces-for-your-account), or by modifying the tools and scripts installed.
|
||||
|
||||
GitHub Codespaces uses a file called \`devcontainer.json\` to configure the development container that you use when you work in a codespace. Each repository can contain one or more \`devcontainer.json\` files, to give you exactly the development environment you need to work on your code in a codespace. On launch, GitHub Codespaces uses a \`devcontainer.json\` file, and any dependent files that make up the dev container configuration, to install tools and runtimes, and perform other setup tasks that the project requires. For more information, see "[Introduction to dev containers](/codespaces/setting-up-your-codespace/configuring-codespaces-for-your-project)."
|
||||
`,
|
||||
},
|
||||
{
|
||||
codeBlock: {
|
||||
id: '0',
|
||||
},
|
||||
type: 'default',
|
||||
title: 'Step 2: Add a dev container configuration to your repository from a template',
|
||||
content: dedent`
|
||||
The default development container, or "dev container," for GitHub Codespaces supports running Node.js projects like [vscode-remote-try-node](https://github.com/microsoft/vscode-remote-try-node) out of the box. 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 GitHub Codespaces users in your repository.
|
||||
|
||||
To set up your repository to use a custom dev container, you will need to create one or more \`devcontainer.json\` files. You can add these either from a template, in Visual Studio Code, or you can write your own. For more information on dev container configurations, see "[Introduction to dev containers](/codespaces/setting-up-your-codespace/configuring-codespaces-for-your-project)".
|
||||
|
||||
1. Access the Command Palette (<kbd>Shift</kbd>+<kbd>Command</kbd>+<kbd>P</kbd> / <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd>), then start typing "dev container". Select **Codespaces: Add Development Container Configuration Files...**.
|
||||
|
||||

|
||||
|
||||
2. For this example, click **Node.js**. If you need additional features you can select any container that’s specific to Node or a combination of tools such as Node and MongoDB.
|
||||
|
||||

|
||||
|
||||
3. Click the recommended version of Node.js.
|
||||
|
||||

|
||||
|
||||
4. Select any additional features to install and click **OK**.
|
||||
5. Access the Command Palette (<kbd>Shift</kbd>+<kbd>Command</kbd>+<kbd>P</kbd> / <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd>), then start typing "rebuild". Select **Codespaces: Rebuild Container**.
|
||||
|
||||

|
||||
|
||||
`,
|
||||
},
|
||||
{
|
||||
codeBlock: {
|
||||
id: '0',
|
||||
},
|
||||
type: 'sub-section',
|
||||
title: 'Anatomy of your dev container',
|
||||
content: dedent`
|
||||
Adding the Node.js dev container template adds a \`.devcontainer\` directory to the root of your project's repository with the following files:
|
||||
|
||||
- \`devcontainer.json\`
|
||||
- Dockerfile
|
||||
|
||||
The newly added \`devcontainer.json\` file defines a few properties that are described below.
|
||||
`,
|
||||
},
|
||||
{
|
||||
type: 'sub-section-2',
|
||||
codeBlock: {
|
||||
id: '0',
|
||||
highlight: 4,
|
||||
},
|
||||
content: dedent`
|
||||
**\`name\`** - You can name your dev container anything, this is just the default.
|
||||
`,
|
||||
},
|
||||
{
|
||||
type: 'sub-section',
|
||||
codeBlock: {
|
||||
id: '0',
|
||||
highlight: [5, 9],
|
||||
},
|
||||
content: dedent`
|
||||
**\`build\`** - The build properties.
|
||||
- **\`dockerfile\`** - In the \`build\` object, \`dockerfile\` contains the path to the Dockerfile that was also added from the template.
|
||||
- **\`args\`**
|
||||
- **\`VARIANT\`**: This file only contains one build argument, which is the node variant we want to use that is passed into the Dockerfile.
|
||||
`,
|
||||
},
|
||||
{
|
||||
type: 'sub-section',
|
||||
codeBlock: {
|
||||
id: '0',
|
||||
highlight: [12, 14],
|
||||
},
|
||||
content: dedent`
|
||||
**\`settings\`** - These are Visual Studio Code settings that you can set.
|
||||
- **\`terminal.integrated.shell.linux\`** - While bash is the default here, you could use other terminal shells by modifying this.
|
||||
`,
|
||||
},
|
||||
{
|
||||
type: 'sub-section',
|
||||
codeBlock: {
|
||||
id: '0',
|
||||
highlight: [17, 19],
|
||||
},
|
||||
content: dedent`
|
||||
**\`extensions\`** - These are extensions included by default.
|
||||
- **\`dbaeumer.vscode-eslint\`** - ES lint is a great extension for linting, but for JavaScript there are a number of great Marketplace extensions you could also include.
|
||||
`,
|
||||
},
|
||||
{
|
||||
type: 'sub-section',
|
||||
codeBlock: {
|
||||
id: '0',
|
||||
highlight: 22,
|
||||
},
|
||||
content: dedent`
|
||||
**\`forwardPorts\`** - Any ports listed here will be forwarded automatically.
|
||||
`,
|
||||
},
|
||||
{
|
||||
type: 'sub-section',
|
||||
codeBlock: {
|
||||
id: '0',
|
||||
highlight: 25,
|
||||
},
|
||||
content: dedent`
|
||||
**\`postCreateCommand\`** - Use this to run commands that aren't defined in the Dockerfile, after your codespace is created.
|
||||
`,
|
||||
},
|
||||
{
|
||||
type: 'sub-section',
|
||||
codeBlock: {
|
||||
id: '0',
|
||||
highlight: 28,
|
||||
},
|
||||
content: dedent`
|
||||
**\`remoteUser\`** - By default, you’re running as the vscode user, but you can optionally set this to root.
|
||||
`,
|
||||
},
|
||||
{
|
||||
codeBlock: {
|
||||
id: '1',
|
||||
},
|
||||
type: 'sub-section',
|
||||
title: 'Dockerfile',
|
||||
content: dedent`
|
||||
You can use the Dockerfile to add additional container layers to specify OS packages, node versions, or global packages we want included in our container.
|
||||
`,
|
||||
},
|
||||
{
|
||||
codeBlock: {
|
||||
id: '0',
|
||||
highlight: [21, 25],
|
||||
},
|
||||
type: 'default',
|
||||
title: 'Step 3: Modify your devcontainer.json file',
|
||||
content: dedent`
|
||||
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 to install npm when your codespace launches and make a list of ports inside the container available locally.
|
||||
|
||||
1. In the Explorer, select the \`devcontainer.json\` file from the tree to open it. You might have to expand the \`.devcontainer\` folder to see it.
|
||||
|
||||

|
||||
|
||||
2. Add the following lines to your \`devcontainer.json\` file after \`extensions\`:
|
||||
|
||||
\`\`\`js{:copy}
|
||||
"postCreateCommand": "npm install",
|
||||
"forwardPorts": [4000],
|
||||
\`\`\`
|
||||
For more information about \`devcontainer.json\` properties, see the Visual Studio Code documentation: "[devcontainer.json reference](https://code.visualstudio.com/docs/remote/devcontainerjson-reference)."
|
||||
|
||||
3. Access the Command Palette (<kbd>Shift</kbd>+<kbd>Command</kbd>+<kbd>P</kbd> / <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd>), then start typing "rebuild". Select **Codespaces: Rebuild Container**.
|
||||
|
||||

|
||||
|
||||
Rebuilding inside your codespace ensures your changes work as expected before you commit the changes to the repository. If something does result in a failure, you’ll be placed in a codespace with a recovery container that you can rebuild from to keep adjusting your container.
|
||||
|
||||
You may occasionally want to perform a full rebuild to clear your cache and rebuild your container with fresh images. For more information, see "[Performing a full rebuild of a container](/codespaces/codespaces-reference/performing-a-full-rebuild-of-a-container)."
|
||||
`,
|
||||
},
|
||||
{
|
||||
codeBlock: {
|
||||
id: '0',
|
||||
},
|
||||
type: 'default',
|
||||
title: 'Step 4: Run your application',
|
||||
content: dedent`
|
||||
In the previous section, you used the \`postCreateCommand\` to installing a set of packages via npm. You can now use this to run our application with npm.
|
||||
|
||||
1. Run your start command in the terminal with \`npm start\`.
|
||||
|
||||

|
||||
|
||||
2. When your project starts, you should see a message in the bottom right corner with a prompt to connect to the port your project uses.
|
||||
|
||||

|
||||
`,
|
||||
},
|
||||
{
|
||||
codeBlock: {
|
||||
id: '0',
|
||||
},
|
||||
type: 'default',
|
||||
title: 'Step 5: Commit your changes',
|
||||
content: dedent`
|
||||
Once you've made changes to your codespace, either new code or configuration changes, you'll want to commit your changes. Committing changes to your repository ensures that anyone else who creates a codespace from this repository has the same configuration. This also means that any customization you do, such as adding Visual Studio Code extensions, will appear for all users.
|
||||
|
||||
For information, see "[Using source control in your codespace](/codespaces/developing-in-codespaces/using-source-control-in-your-codespace#committing-your-changes)."
|
||||
`,
|
||||
},
|
||||
],
|
||||
codeBlocks: {
|
||||
'0': {
|
||||
fileName: '.devcontainer/devcontainer.json',
|
||||
language: 'json',
|
||||
code: dedent`
|
||||
// For format details, see https://aka.ms/devcontainer.json. For config options, see the README at:
|
||||
// https://github.com/microsoft/vscode-dev-containers/tree/v0.162.0/containers/javascript-node
|
||||
{
|
||||
"name": "Node.js",
|
||||
"build": {
|
||||
"dockerfile": "Dockerfile",
|
||||
// Update 'VARIANT' to pick a Node version: 10, 12, 14
|
||||
"args": { "VARIANT": "14" }
|
||||
},
|
||||
|
||||
// Set *default* container specific settings.json values on container create.
|
||||
"settings": {
|
||||
"terminal.integrated.shell.linux": "/bin/bash"
|
||||
},
|
||||
|
||||
// Add the IDs of extensions you want installed when the container is created.
|
||||
"extensions": [
|
||||
"dbaeumer.vscode-eslint"
|
||||
],
|
||||
|
||||
// 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",
|
||||
|
||||
// Comment out connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
|
||||
"remoteUser": "node"
|
||||
}
|
||||
`,
|
||||
},
|
||||
'1': {
|
||||
fileName: '.devcontainer/Dockerfile',
|
||||
language: 'bash',
|
||||
code: dedent`
|
||||
# [Choice] Node.js version: 14, 12, 10
|
||||
ARG VARIANT="14-buster"
|
||||
FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:0-\${VARIANT}
|
||||
|
||||
# [Optional] Uncomment this section to install additional OS packages.
|
||||
# RUN apt-get update && export DEBIAN_FRONTEND=noninteractive && apt-get -y install --no-install-recommends <your-package-list-here>
|
||||
|
||||
# [Optional] Uncomment if you want to install an additional version of node using nvm
|
||||
# ARG EXTRA_NODE_VERSION=10
|
||||
# RUN su node -c "source /usr/local/share/nvm/nvm.sh && nvm install \${EXTRA_NODE_VERSION}"
|
||||
|
||||
# [Optional] Uncomment if you want to install more global node modules
|
||||
# RUN su node -c "npm install -g <your-package-list-here>"
|
||||
`,
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
export default article
|
||||
@@ -1,336 +0,0 @@
|
||||
import dedent from 'ts-dedent'
|
||||
import { PlaygroundArticleT } from 'components/playground/types'
|
||||
|
||||
const article: PlaygroundArticleT = {
|
||||
title: 'Add a dev container configuration to your repository',
|
||||
shortTitle: 'Python codespaces',
|
||||
topics: ['Codespaces', 'Developer', 'Organization', 'Python'],
|
||||
type: 'tutorial',
|
||||
slug: '/codespaces/setting-up-your-project-for-codespaces/setting-up-your-project-for-codespaces',
|
||||
originalArticle:
|
||||
'/codespaces/setting-up-your-project-for-codespaces/setting-up-your-python-project-for-codespaces',
|
||||
codeLanguageId: 'py',
|
||||
intro: dedent`
|
||||
This guide shows you how to add a dev container configuration to your repository to define the GitHub Codespaces development environment for your **Python** codebase. For more information, see "[Introduction to dev containers](/codespaces/setting-up-your-project-for-codespaces/introduction-to-dev-containers)."
|
||||
|
||||
To work through the instructions in this guide you will use a codespace, in either the Visual Studio Code desktop application or the VS Code web client.
|
||||
|
||||
These instructions are for Python. If you want to add a dev container configuration for another programming language, click the language button to the right.
|
||||
`,
|
||||
prerequisites: dedent`
|
||||
- You should have an existing Python project in a repository on GitHub.com. If you don't have a project, you can try this tutorial with the following example: https://github.com/2percentsilk/python-quickstart.
|
||||
- GitHub Codespaces must be enabled for your organization. For more information, see "[Enabling GitHub Codespaces for your organization](/codespaces/managing-codespaces-for-your-organization/enabling-codespaces-for-your-organization)."
|
||||
`,
|
||||
contentBlocks: [
|
||||
{
|
||||
codeBlock: {
|
||||
id: '0',
|
||||
},
|
||||
type: 'default',
|
||||
title: 'Step 1: Open your project in a codespace',
|
||||
content: dedent`
|
||||
1. Under the repository name, use the **Code** drop-down menu, and in the **Codespaces** tab, click the plus sign (+).
|
||||
|
||||

|
||||
|
||||
If you don’t see this option, GitHub Codespaces isn't available for your project. See [Access to GitHub Codespaces](/codespaces/developing-in-codespaces/creating-a-codespace-for-a-repository#access-to-codespaces) for more information.
|
||||
|
||||
When you create a codespace, your project is created on a remote VM that is dedicated to you. By default, the container for your codespace has many languages and runtimes including Python, pip, and Miniconda. It also includes a common set of tools like git, wget, rsync, openssh, and nano.
|
||||
|
||||
You can customize your codespace by adjusting the amount of vCPUs and RAM, [adding dotfiles to personalize your environment](/codespaces/setting-up-your-codespace/personalizing-codespaces-for-your-account), or by modifying the tools and scripts installed.
|
||||
|
||||
GitHub Codespaces uses a file called \`devcontainer.json\` to configure the development container that you use when you work in a codespace. Each repository can contain one or more \`devcontainer.json\` files, to give you exactly the development environment you need to work on your code in a codespace.
|
||||
|
||||
On launch, GitHub Codespaces uses a \`devcontainer.json\` file, and any dependent files that make up the dev container configuration, to install tools and runtimes, and perform other setup tasks that the project requires. For more information, see "[Introduction to dev containers](/codespaces/setting-up-your-codespace/configuring-codespaces-for-your-project)."
|
||||
`,
|
||||
},
|
||||
{
|
||||
codeBlock: {
|
||||
id: '0',
|
||||
},
|
||||
type: 'default',
|
||||
title: 'Step 2: Add a dev container configuration to your repository from a template',
|
||||
content: dedent`
|
||||
The default development container, or "dev container," for GitHub Codespaces comes with the latest Python version, package managers (pip, Miniconda), and other common tools preinstalled. However, we recommend that you configure your own dev container to include all of the tools and scripts that your project needs. This will ensure a fully reproducible environment for all GitHub Codespaces users in your repository.
|
||||
|
||||
To set up your repository to use a custom dev container, you will need to create one or more \`devcontainer.json\` files. You can add these either from a template, in Visual Studio Code, or you can write your own. For more information on dev container configurations, see "[Introduction to dev containers](/codespaces/setting-up-your-codespace/configuring-codespaces-for-your-project)".
|
||||
|
||||
1. Access the Command Palette (<kbd>Shift</kbd>+<kbd>Command</kbd>+<kbd>P</kbd> / <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd>), then start typing "dev container". Select **Codespaces: Add Development Container Configuration Files...**.
|
||||
|
||||

|
||||
|
||||
2. For this example, click **Python 3**. If you need additional features you can select any container that’s specific to Python or a combination of tools such as Python 3 and PostgreSQL.
|
||||
|
||||

|
||||
|
||||
3. Click the recommended version of Python.
|
||||
|
||||

|
||||
|
||||
4. Accept the default option to add Node.js to your customization.
|
||||
|
||||

|
||||
|
||||
5. Select any additional features to install and click **OK**.
|
||||
6. Access the Command Palette (<kbd>Shift</kbd>+<kbd>Command</kbd>+<kbd>P</kbd> / <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd>), then start typing "rebuild". Select **Codespaces: Rebuild Container**.
|
||||
|
||||

|
||||
|
||||
`,
|
||||
},
|
||||
{
|
||||
codeBlock: {
|
||||
id: '0',
|
||||
},
|
||||
type: 'sub-section',
|
||||
title: 'Anatomy of your dev container',
|
||||
content: dedent`
|
||||
Adding the Python dev container template adds a .devcontainer directory to the root of your project's repository with the following files:
|
||||
|
||||
- \`devcontainer.json\`
|
||||
- Dockerfile
|
||||
|
||||
The newly added \`devcontainer.json\` file defines a few properties that are described below.
|
||||
`,
|
||||
},
|
||||
{
|
||||
type: 'sub-section-2',
|
||||
codeBlock: {
|
||||
id: '0',
|
||||
highlight: 2,
|
||||
},
|
||||
content: dedent`
|
||||
**\`name\`** - You can name your dev container anything, this is just the default.
|
||||
`,
|
||||
},
|
||||
{
|
||||
type: 'sub-section',
|
||||
codeBlock: {
|
||||
id: '0',
|
||||
highlight: [3, 12],
|
||||
},
|
||||
content: dedent`
|
||||
**\`build\`** - The build properties.
|
||||
- **\`dockerfile\`** - In the \`build\` object, \`dockerfile\` contains the path to the Dockerfile that was also added from the template.
|
||||
- **\`args\`**
|
||||
- **\`VARIANT\`**: This is the node variant we want to use that is passed into the Dockerfile.
|
||||
`,
|
||||
},
|
||||
{
|
||||
type: 'sub-section',
|
||||
codeBlock: {
|
||||
id: '0',
|
||||
highlight: [16, 30],
|
||||
},
|
||||
content: dedent`
|
||||
**\`settings\`** - These are Visual Studio Code settings that you can set.
|
||||
- **\`terminal.integrated.shell.linux\`** - While bash is the default here, you could use other terminal shells by modifying this.
|
||||
`,
|
||||
},
|
||||
{
|
||||
type: 'sub-section',
|
||||
codeBlock: {
|
||||
id: '0',
|
||||
highlight: [33, 35],
|
||||
},
|
||||
content: dedent`
|
||||
**\`extensions\`** - These are extensions included by default.
|
||||
- **\`ms-python.python\`** - The Microsoft Python extension provides rich support for the Python language (for all actively supported versions of the language: >=3.6), including features such as IntelliSense, linting, debugging, code navigation, code formatting, refactoring, variable explorer, test explorer, and more.
|
||||
`,
|
||||
},
|
||||
{
|
||||
type: 'sub-section',
|
||||
codeBlock: {
|
||||
id: '0',
|
||||
highlight: 38,
|
||||
},
|
||||
content: dedent`
|
||||
**\`forwardPorts\`** - Any ports listed here will be forwarded automatically.
|
||||
`,
|
||||
},
|
||||
{
|
||||
type: 'sub-section',
|
||||
codeBlock: {
|
||||
id: '0',
|
||||
highlight: 41,
|
||||
},
|
||||
content: dedent`
|
||||
**\`postCreateCommand\`** - Use this to run commands that aren't defined in the Dockerfile, like \`pip3 install -r requirements\`, after your codespace is created.
|
||||
`,
|
||||
},
|
||||
{
|
||||
type: 'sub-section',
|
||||
codeBlock: {
|
||||
id: '0',
|
||||
highlight: 44,
|
||||
},
|
||||
content: dedent`
|
||||
**\`remoteUser\`** - By default, you’re running as the vscode user, but you can optionally set this to root.
|
||||
`,
|
||||
},
|
||||
{
|
||||
codeBlock: {
|
||||
id: '1',
|
||||
},
|
||||
type: 'sub-section',
|
||||
title: 'Dockerfile',
|
||||
content: dedent`
|
||||
You can use the Dockerfile to add additional container layers to specify OS packages, node versions, or global packages we want included in our container.
|
||||
`,
|
||||
},
|
||||
{
|
||||
codeBlock: {
|
||||
id: '0',
|
||||
highlight: [32, 41],
|
||||
},
|
||||
type: 'default',
|
||||
title: 'Step 3: Modify your devcontainer.json file',
|
||||
content: dedent`
|
||||
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 to install extensions and your project dependencies when your codespace launches.
|
||||
|
||||
1. In the Explorer, expand the \`.devcontainer\` folder and select the \`devcontainer.json\` file from the tree to open it.
|
||||
|
||||

|
||||
|
||||
2. Update the extensions list in your \`devcontainer.json\` file to add a few extensions that are useful when working with your project.
|
||||
|
||||
\`\`\`json{:copy}
|
||||
"extensions": [
|
||||
"ms-python.python",
|
||||
"cstrap.flask-snippets",
|
||||
"streetsidesoftware.code-spell-checker"
|
||||
],
|
||||
\`\`\`
|
||||
|
||||
3. Uncomment the \`postCreateCommand\` to auto-install requirements as part of the codespaces setup process.
|
||||
|
||||
\`\`\`json{:copy}
|
||||
// Use 'postCreateCommand' to run commands after the container is created.
|
||||
"postCreateCommand": "pip3 install --user -r requirements.txt",
|
||||
\`\`\`
|
||||
|
||||
4. Access the Command Palette (<kbd>Shift</kbd>+<kbd>Command</kbd>+<kbd>P</kbd> / <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd>), then start typing "rebuild". Select **Codespaces: Rebuild Container**.
|
||||
|
||||

|
||||
|
||||
Rebuilding inside your codespace ensures your changes work as expected before you commit the changes to the repository. If something does result in a failure, you’ll be placed in a codespace with a recovery container that you can rebuild from to keep adjusting your container.
|
||||
|
||||
You may occasionally want to perform a full rebuild to clear your cache and rebuild your container with fresh images. For more information, see "[Performing a full rebuild of a container](/codespaces/codespaces-reference/performing-a-full-rebuild-of-a-container)."
|
||||
|
||||
5. Check your changes were successfully applied by verifying the Code Spell Checker and Flask Snippet extensions were installed.
|
||||
|
||||

|
||||
`,
|
||||
},
|
||||
{
|
||||
codeBlock: {
|
||||
id: '0',
|
||||
},
|
||||
type: 'default',
|
||||
title: 'Step 4: Run your application',
|
||||
content: dedent`
|
||||
In the previous section, you used the \`postCreateCommand\` to install a set of packages with pip3. With your dependencies now installed, you can run your application.
|
||||
|
||||
1. Run your application by pressing F5 or entering \`python -m flask run\` in the codespace terminal.
|
||||
|
||||
2. When your project starts, you should see a message in the bottom right corner with a prompt to connect to the port your project uses.
|
||||
|
||||

|
||||
`,
|
||||
},
|
||||
{
|
||||
codeBlock: {
|
||||
id: '0',
|
||||
},
|
||||
type: 'default',
|
||||
title: 'Step 5: Commit your changes',
|
||||
content: dedent`
|
||||
Once you've made changes to your codespace, either new code or configuration changes, you'll want to commit your changes. Committing changes to your repository ensures that anyone else who creates a codespace from this repository has the same configuration. This also means that any customization you do, such as adding Visual Studio Code extensions, will appear for all users.
|
||||
|
||||
For information, see "[Using source control in your codespace](/codespaces/developing-in-codespaces/using-source-control-in-your-codespace#committing-your-changes)."
|
||||
`,
|
||||
},
|
||||
],
|
||||
codeBlocks: {
|
||||
'0': {
|
||||
fileName: '.devcontainer/devcontainer.json',
|
||||
language: 'json',
|
||||
code: dedent`
|
||||
{
|
||||
"name": "Python 3",
|
||||
"build": {
|
||||
"dockerfile": "Dockerfile",
|
||||
"context": "..",
|
||||
"args": {
|
||||
// Update 'VARIANT' to pick a Python version: 3, 3.6, 3.7, 3.8, 3.9
|
||||
"VARIANT": "3",
|
||||
// Options
|
||||
"INSTALL_NODE": "true",
|
||||
"NODE_VERSION": "lts/*"
|
||||
}
|
||||
},
|
||||
|
||||
// Set *default* container specific settings.json values on container create.
|
||||
"settings": {
|
||||
"terminal.integrated.shell.linux": "/bin/bash",
|
||||
"python.pythonPath": "/usr/local/bin/python",
|
||||
"python.linting.enabled": true,
|
||||
"python.linting.pylintEnabled": true,
|
||||
"python.formatting.autopep8Path": "/usr/local/py-utils/bin/autopep8",
|
||||
"python.formatting.blackPath": "/usr/local/py-utils/bin/black",
|
||||
"python.formatting.yapfPath": "/usr/local/py-utils/bin/yapf",
|
||||
"python.linting.banditPath": "/usr/local/py-utils/bin/bandit",
|
||||
"python.linting.flake8Path": "/usr/local/py-utils/bin/flake8",
|
||||
"python.linting.mypyPath": "/usr/local/py-utils/bin/mypy",
|
||||
"python.linting.pycodestylePath": "/usr/local/py-utils/bin/pycodestyle",
|
||||
"python.linting.pydocstylePath": "/usr/local/py-utils/bin/pydocstyle",
|
||||
"python.linting.pylintPath": "/usr/local/py-utils/bin/pylint"
|
||||
},
|
||||
|
||||
// Add the IDs of extensions you want installed when the container is created.
|
||||
"extensions": [
|
||||
"ms-python.python"
|
||||
],
|
||||
|
||||
// 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": "pip3 install --user -r requirements.txt",
|
||||
|
||||
// Comment out connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
|
||||
"remoteUser": "vscode"
|
||||
}
|
||||
`,
|
||||
},
|
||||
'1': {
|
||||
fileName: '.devcontainer/Dockerfile',
|
||||
language: 'bash',
|
||||
code: dedent`
|
||||
# [Choice] Python version: 3, 3.9, 3.8, 3.7, 3.6
|
||||
ARG VARIANT="3"
|
||||
FROM mcr.microsoft.com/vscode/devcontainers/python:0-\${VARIANT}
|
||||
|
||||
# [Option] Install Node.js
|
||||
ARG INSTALL_NODE="true"
|
||||
ARG NODE_VERSION="lts/*"
|
||||
RUN if [ "\${INSTALL_NODE}" = "true" ]; then su vscode -c "umask 0002 && . /usr/local/share/nvm/nvm.sh && nvm install \${NODE_VERSION} 2>&1"; fi
|
||||
|
||||
# [Optional] If your pip requirements rarely change, uncomment this section to add them to the image.
|
||||
# COPY requirements.txt /tmp/pip-tmp/
|
||||
# RUN pip3 --disable-pip-version-check --no-cache-dir install -r /tmp/pip-tmp/requirements.txt \
|
||||
# && rm -rf /tmp/pip-tmp
|
||||
|
||||
# [Optional] Uncomment this section to install additional OS packages.
|
||||
# RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
|
||||
# && apt-get -y install --no-install-recommends <your-package-list-here>
|
||||
|
||||
# [Optional] Uncomment this line to install global node packages.
|
||||
# RUN su vscode -c "source /usr/local/share/nvm/nvm.sh && npm install -g <your-package-here>" 2>&1
|
||||
|
||||
`,
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
export default article
|
||||
@@ -1,118 +0,0 @@
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import cx from 'classnames'
|
||||
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
|
||||
import { vs, vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism'
|
||||
|
||||
import { usePlaygroundContext } from 'components/context/PlaygroundContext'
|
||||
import { LoadingIndicator } from './LoadingIndicator'
|
||||
import { ActionBar } from './ActionBar'
|
||||
|
||||
import { CodeBlockRef, PlaygroundArticleT } from '../types'
|
||||
import { useTheme } from '@primer/react'
|
||||
|
||||
const getNormalizedHighlight = (
|
||||
highlight: Exclude<CodeBlockRef['highlight'], undefined>
|
||||
): Array<[number, number]> => {
|
||||
if (typeof highlight === 'number') {
|
||||
return [[highlight, highlight]]
|
||||
} else if (typeof highlight[0] === 'number') {
|
||||
return [highlight as [number, number]]
|
||||
} else {
|
||||
return highlight as Array<[number, number]>
|
||||
}
|
||||
}
|
||||
interface Props {
|
||||
article: PlaygroundArticleT
|
||||
}
|
||||
|
||||
export const Editor: React.FC<Props> = ({ article }) => {
|
||||
const theme = useTheme()
|
||||
|
||||
const [isEditorReady, setIsEditorReady] = useState(false)
|
||||
const [selectedFileIndex, setSelectedFileIndex] = useState(0)
|
||||
|
||||
const { activeSectionIndex } = usePlaygroundContext()
|
||||
const normalizedHighlight = getNormalizedHighlight(
|
||||
article.contentBlocks[activeSectionIndex]?.codeBlock.highlight || []
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
// Some buffer to load the theme, otherwise it flashes the light theme momentarily
|
||||
const timeout = setTimeout(() => {
|
||||
setIsEditorReady(true)
|
||||
}, 250)
|
||||
|
||||
return () => {
|
||||
clearTimeout(timeout)
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedFileIndex !== 0) {
|
||||
setSelectedFileIndex(0)
|
||||
}
|
||||
}, [activeSectionIndex])
|
||||
|
||||
// find the set of files we want displayed in the editor
|
||||
const codeBlockId = article.contentBlocks[activeSectionIndex].codeBlock.id
|
||||
|
||||
let editorFiles = article.codeBlocks[codeBlockId]
|
||||
if (!Array.isArray(editorFiles)) {
|
||||
editorFiles = [editorFiles]
|
||||
}
|
||||
let activeFile = editorFiles[selectedFileIndex]
|
||||
if (!activeFile) {
|
||||
activeFile = editorFiles[0]
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="mx-auto">
|
||||
<div className="text-mono">
|
||||
<ActionBar code={activeFile.code} />
|
||||
|
||||
<div className="d-flex flex-items-center px-3 border-left border-right">
|
||||
{editorFiles.map((file, i) => {
|
||||
return (
|
||||
<button
|
||||
key={file.fileName}
|
||||
className={cx('btn-link Link--secondary no-underline mr-2 f6 py-2 px-3', {
|
||||
'color-bg-subtle': i === selectedFileIndex,
|
||||
})}
|
||||
onClick={() => setSelectedFileIndex(i)}
|
||||
>
|
||||
{file.fileName}
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="border">
|
||||
{isEditorReady ? (
|
||||
<SyntaxHighlighter
|
||||
style={theme.resolvedColorMode === 'night' ? vscDarkPlus : vs}
|
||||
language={activeFile.language}
|
||||
PreTag="div"
|
||||
customStyle={{ margin: '0', padding: '1rem 0', border: 0 }}
|
||||
showLineNumbers={true}
|
||||
wrapLines={true}
|
||||
lineProps={(lineNumber) => {
|
||||
let className = ''
|
||||
for (const highlight of normalizedHighlight) {
|
||||
if (lineNumber >= highlight[0] && lineNumber <= highlight[1]) {
|
||||
className = 'color-bg-accent'
|
||||
}
|
||||
}
|
||||
return { style: { display: 'block' }, className }
|
||||
}}
|
||||
lineNumberStyle={{ minWidth: '3.25em' }}
|
||||
>
|
||||
{activeFile.code}
|
||||
</SyntaxHighlighter>
|
||||
) : (
|
||||
<LoadingIndicator />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,33 +0,0 @@
|
||||
export interface CodeBlockRef {
|
||||
id: string
|
||||
highlight?: Array<[number, number]> | number | [number, number]
|
||||
}
|
||||
export interface ContentBlock {
|
||||
title?: string
|
||||
type: 'default' | 'sub-section' | 'sub-section-2'
|
||||
content: string
|
||||
codeBlock: CodeBlockRef
|
||||
}
|
||||
export interface CodeBlock {
|
||||
fileName: string
|
||||
language: string
|
||||
code: string
|
||||
}
|
||||
export interface PlaygroundArticleT {
|
||||
title: string
|
||||
shortTitle: string
|
||||
topics: Array<string>
|
||||
intro: string
|
||||
slug: string
|
||||
originalArticle: string
|
||||
type: 'tutorial'
|
||||
prerequisites?: string
|
||||
codeLanguageId: string
|
||||
contentBlocks: Array<ContentBlock>
|
||||
codeBlocks: Record<string, CodeBlock | Array<CodeBlock>>
|
||||
}
|
||||
|
||||
export interface CodeLanguage {
|
||||
id: string
|
||||
label: string
|
||||
}
|
||||
@@ -26,12 +26,7 @@ shortTitle: Build & test Xamarin apps
|
||||
|
||||
This guide shows you how to create a workflow that performs continuous integration (CI) for your Xamarin project. The workflow you create will allow you to see when commits to a pull request cause build or test failures against your default branch; this approach can help ensure that your code is always healthy.
|
||||
|
||||
For a full list of available Xamarin SDK versions on the {% data variables.product.prodname_actions %}-hosted macOS runners, see the documentation:
|
||||
|
||||
* [macOS 10.15](https://github.com/actions/runner-images/blob/main/images/macos/macos-10.15-Readme.md#xamarin-bundles)
|
||||
* [macOS 11](https://github.com/actions/runner-images/blob/main/images/macos/macos-11-Readme.md#xamarin-bundles)
|
||||
|
||||
{% data reusables.actions.macos-runner-preview %}
|
||||
For a full list of available Xamarin SDK versions on the {% data variables.product.prodname_actions %}-hosted macOS runners, see the README file for the version of macOS you want to use in the [{% data variables.product.prodname_actions %} Runner Images repository](https://github.com/actions/runner-images/tree/main/images/macos).
|
||||
|
||||
## Prerequisites
|
||||
|
||||
|
||||
@@ -17,9 +17,9 @@ topics:
|
||||
|
||||
## Overview of OpenID Connect
|
||||
|
||||
{% data variables.product.prodname_actions %} workflows are often designed to access a cloud provider (such as AWS, Azure, GCP, or HashiCorp Vault) in order to deploy software or use the cloud's services. Before the workflow can access these resources, it will supply credentials, such as a password or token, to the cloud provider. These credentials are usually stored as a secret in {% data variables.product.prodname_dotcom %}, and the workflow presents this secret to the cloud provider every time it runs.
|
||||
{% data variables.product.prodname_actions %} workflows are often designed to access a cloud provider (such as AWS, Azure, GCP, or HashiCorp Vault) in order to deploy software or use the cloud's services. Before the workflow can access these resources, it will supply credentials, such as a password or token, to the cloud provider. These credentials are usually stored as a secret in {% data variables.product.prodname_dotcom %}, and the workflow presents this secret to the cloud provider every time it runs.
|
||||
|
||||
However, using hardcoded secrets requires you to create credentials in the cloud provider and then duplicate them in {% data variables.product.prodname_dotcom %} as a secret.
|
||||
However, using hardcoded secrets requires you to create credentials in the cloud provider and then duplicate them in {% data variables.product.prodname_dotcom %} as a secret.
|
||||
|
||||
With OpenID Connect (OIDC), you can take a different approach by configuring your workflow to request a short-lived access token directly from the cloud provider. Your cloud provider also needs to support OIDC on their end, and you must configure a trust relationship that controls which workflows are able to request the access tokens. Providers that currently support OIDC include Amazon Web Services, Azure, Google Cloud Platform, and HashiCorp Vault, among others.
|
||||
|
||||
@@ -27,7 +27,7 @@ With OpenID Connect (OIDC), you can take a different approach by configuring you
|
||||
|
||||
By updating your workflows to use OIDC tokens, you can adopt the following good security practices:
|
||||
|
||||
- **No cloud secrets**: You won't need to duplicate your cloud credentials as long-lived {% data variables.product.prodname_dotcom %} secrets. Instead, you can configure the OIDC trust on your cloud provider, and then update your workflows to request a short-lived access token from the cloud provider through OIDC.
|
||||
- **No cloud secrets**: You won't need to duplicate your cloud credentials as long-lived {% data variables.product.prodname_dotcom %} secrets. Instead, you can configure the OIDC trust on your cloud provider, and then update your workflows to request a short-lived access token from the cloud provider through OIDC.
|
||||
- **Authentication and authorization management**: You have more granular control over how workflows can use credentials, using your cloud provider's authentication (authN) and authorization (authZ) tools to control access to cloud resources.
|
||||
- **Rotating credentials**: With OIDC, your cloud provider issues a short-lived access token that is only valid for a single job, and then automatically expires.
|
||||
|
||||
@@ -48,7 +48,7 @@ When you configure your cloud to trust {% data variables.product.prodname_dotcom
|
||||
|
||||
- Before granting an access token, your cloud provider checks that the [`subject`](https://openid.net/specs/openid-connect-core-1_0.html#StandardClaims) and other claims used to set conditions in its trust settings match those in the request's JSON Web Token (JWT). As a result, you must take care to correctly define the _subject_ and other conditions in your cloud provider.
|
||||
- The OIDC trust configuration steps and the syntax to set conditions for cloud roles (using _Subject_ and other claims) will vary depending on which cloud provider you're using. For some examples, see "[Example subject claims](#example-subject-claims)."
|
||||
|
||||
|
||||
### Understanding the OIDC token
|
||||
|
||||
Each job requests an OIDC token from {% data variables.product.prodname_dotcom %}'s OIDC provider, which responds with an automatically generated JSON web token (JWT) that is unique for each workflow job where it is generated. When the job runs, the OIDC token is presented to the cloud provider. To validate the token, the cloud provider checks if the OIDC token's subject and other claims are a match for the conditions that were preconfigured on the cloud role's OIDC trust definition.
|
||||
@@ -92,51 +92,58 @@ The following example OIDC token uses a subject (`sub`) that references a job en
|
||||
}
|
||||
```
|
||||
|
||||
To see all the claims supported by {% data variables.product.prodname_dotcom %}'s OIDC provider, review the `claims_supported` entries at
|
||||
To see all the claims supported by {% data variables.product.prodname_dotcom %}'s OIDC provider, review the `claims_supported` entries at
|
||||
{% ifversion ghes %}`https://HOSTNAME/_services/token/.well-known/openid-configuration`{% else %}https://token.actions.githubusercontent.com/.well-known/openid-configuration{% endif %}.
|
||||
|
||||
The token includes the standard audience, issuer, and subject claims:
|
||||
|
||||
| Claim | Description |
|
||||
| ----------- | ---------------------- |
|
||||
| `aud`| _(Audience)_ By default, this is the URL of the repository owner, such as the organization that owns the repository. This is the only claim that can be customized. You can set a custom audience with a toolkit command: [`core.getIDToken(audience)`](https://www.npmjs.com/package/@actions/core/v/1.6.0) |
|
||||
| `iss`| _(Issuer)_ The issuer of the OIDC token: {% ifversion ghes %}`https://HOSTNAME/_services/token`{% else %}`https://token.actions.githubusercontent.com`{% endif %} |
|
||||
| `aud`| _(Audience)_ By default, this is the URL of the repository owner, such as the organization that owns the repository. This is the only claim that can be customized. You can set a custom audience with a toolkit command: [`core.getIDToken(audience)`](https://www.npmjs.com/package/@actions/core/v/1.6.0) |
|
||||
| `iss`| _(Issuer)_ The issuer of the OIDC token: {% ifversion ghes %}`https://HOSTNAME/_services/token`{% else %}`https://token.actions.githubusercontent.com`{% endif %} |
|
||||
| `sub`| _(Subject)_ Defines the subject claim that is to be validated by the cloud provider. This setting is essential for making sure that access tokens are only allocated in a predictable way.|
|
||||
|
||||
The OIDC token also includes additional standard claims:
|
||||
|
||||
| Claim | Description |
|
||||
| ----------- | ---------------------- |
|
||||
| `alg`| _(Algorithm)_ The algorithm used by the OIDC provider. |
|
||||
| `exp`| _(Expires at)_ Identifies the expiry time of the JWT. |
|
||||
| `iat`| _(Issued at)_ The time when the JWT was issued. |
|
||||
| `jti`| _(JWT token identifier)_ Unique identifier for the OIDC token. |
|
||||
| `kid`| _(Key identifier)_ Unique key for the OIDC token. |
|
||||
| `nbf`| _(Not before)_ JWT is not valid for use before this time. |
|
||||
| `typ`| _(Type)_ Describes the type of token. This is a JSON Web Token (JWT). |
|
||||
| `alg`| _(Algorithm)_ The algorithm used by the OIDC provider. |
|
||||
| `exp`| _(Expires at)_ Identifies the expiry time of the JWT. |
|
||||
| `iat`| _(Issued at)_ The time when the JWT was issued. |
|
||||
| `jti`| _(JWT token identifier)_ Unique identifier for the OIDC token. |
|
||||
| `kid`| _(Key identifier)_ Unique key for the OIDC token. |
|
||||
| `nbf`| _(Not before)_ JWT is not valid for use before this time. |
|
||||
| `typ`| _(Type)_ Describes the type of token. This is a JSON Web Token (JWT). |
|
||||
|
||||
The token also includes custom claims provided by {% data variables.product.prodname_dotcom %}:
|
||||
|
||||
| Claim | Description |
|
||||
| ----------- | ---------------------- |
|
||||
| `actor`| The personal account that initiated the workflow run. |
|
||||
| `actor`| The personal account that initiated the workflow run. |
|
||||
| `actor_id`| The ID of personal account that initiated the workflow run. |
|
||||
| `base_ref`| The target branch of the pull request in a workflow run. |
|
||||
| `environment`| The name of the environment used by the job. |
|
||||
| `event_name`| The name of the event that triggered the workflow run. |
|
||||
| `head_ref`| The source branch of the pull request in a workflow run. |
|
||||
| `job_workflow_ref`| This is the ref path to the reusable workflow used by this job. For more information, see "["Using OpenID Connect with reusable workflows"](/actions/deployment/security-hardening-your-deployments/using-openid-connect-with-reusable-workflows)." |
|
||||
| `ref`| _(Reference)_ The git ref that triggered the workflow run. |
|
||||
| `ref_type`| The type of `ref`, for example: "branch". |
|
||||
| `repository_visibility` | The visibility of the repository where the workflow is running. Accepts the following values: `internal`, `private`, or `public`. |
|
||||
| `repository`| The repository from where the workflow is running. |
|
||||
| `base_ref`| The target branch of the pull request in a workflow run. |
|
||||
| `environment`| The name of the environment used by the job. |
|
||||
| `event_name`| The name of the event that triggered the workflow run. |
|
||||
| `head_ref`| The source branch of the pull request in a workflow run. |
|
||||
| `job_workflow_ref`| For jobs using a reusable workflow, the ref path to the reusable workflow. For more information, see "[Using OpenID Connect with reusable workflows](/actions/deployment/security-hardening-your-deployments/using-openid-connect-with-reusable-workflows)." |
|
||||
{%- ifversion actions-oidc-custom-claims %}
|
||||
| `job_workflow_sha`| {% data reusables.actions.job-workflow-sha-description %} |
|
||||
{%- endif %}
|
||||
| `ref`| _(Reference)_ The git ref that triggered the workflow run. |
|
||||
| `ref_type`| The type of `ref`, for example: "branch". |
|
||||
| `repository_visibility` | The visibility of the repository where the workflow is running. Accepts the following values: `internal`, `private`, or `public`. |
|
||||
| `repository`| The repository from where the workflow is running. |
|
||||
| `repository_id`| The ID of the repository from where the workflow is running. |
|
||||
| `repository_owner`| The name of the organization in which the `repository` is stored. |
|
||||
| `repository_owner`| The name of the organization in which the `repository` is stored. |
|
||||
| `repository_owner_id`| The ID of the organization in which the `repository` is stored. |
|
||||
| `run_id`| The ID of the workflow run that triggered the workflow. |
|
||||
| `run_number`| The number of times this workflow has been run. |
|
||||
| `run_attempt`| The number of times this workflow run has been retried. |
|
||||
| `workflow`| The name of the workflow. |
|
||||
| `run_id`| The ID of the workflow run that triggered the workflow. |
|
||||
| `run_number`| The number of times this workflow has been run. |
|
||||
| `run_attempt`| The number of times this workflow run has been retried. |
|
||||
| `workflow`| The name of the workflow. |
|
||||
{%- ifversion actions-oidc-custom-claims %}
|
||||
| `workflow_ref`| {% data reusables.actions.workflow-ref-description %} |
|
||||
| `workflow_sha`| {% data reusables.actions.workflow-sha-description %} |
|
||||
{%- endif %}
|
||||
|
||||
### Defining trust conditions on cloud roles using OIDC claims
|
||||
|
||||
@@ -168,7 +175,7 @@ You can configure a subject that filters for a specific [environment](/actions/d
|
||||
|
||||
| | |
|
||||
| ------ | ----------- |
|
||||
| Syntax: | `repo:<orgName/repoName>:environment:<environmentName>` |
|
||||
| Syntax: | `repo:<orgName/repoName>:environment:<environmentName>` |
|
||||
| Example:| `repo:octo-org/octo-repo:environment:Production` |
|
||||
|
||||
#### Filtering for `pull_request` events
|
||||
@@ -179,7 +186,7 @@ You can configure a subject that filters for the [`pull_request`](/actions/learn
|
||||
|
||||
| | |
|
||||
| ------ | ----------- |
|
||||
| Syntax: | `repo:<orgName/repoName>:pull_request` |
|
||||
| Syntax: | `repo:<orgName/repoName>:pull_request` |
|
||||
| Example:| `repo:octo-org/octo-repo:pull_request` |
|
||||
|
||||
#### Filtering for a specific branch
|
||||
@@ -190,7 +197,7 @@ You can configure a subject that filters for a specific branch name. In this exa
|
||||
|
||||
| | |
|
||||
| ------ | ----------- |
|
||||
| Syntax: | `repo:<orgName/repoName>:ref:refs/heads/branchName` |
|
||||
| Syntax: | `repo:<orgName/repoName>:ref:refs/heads/branchName` |
|
||||
| Example:| `repo:octo-org/octo-repo:ref:refs/heads/demo-branch` |
|
||||
|
||||
#### Filtering for a specific tag
|
||||
@@ -201,7 +208,7 @@ You can create a subject that filters for specific tag. In this example, the wor
|
||||
|
||||
| | |
|
||||
| ------ | ----------- |
|
||||
| Syntax: | `repo:<orgName/repoName>:ref:refs/tags/<tagName>` |
|
||||
| Syntax: | `repo:<orgName/repoName>:ref:refs/tags/<tagName>` |
|
||||
| Example:| `repo:octo-org/octo-repo:ref:refs/tags/demo-tag` |
|
||||
|
||||
### Configuring the subject in your cloud provider
|
||||
@@ -210,7 +217,7 @@ To configure the subject in your cloud provider's trust relationship, you must a
|
||||
|
||||
| | |
|
||||
| ------ | ----------- |
|
||||
| Amazon Web Services | `"{% ifversion ghes %}HOSTNAME/_services/token{% else %}token.actions.githubusercontent.com{% endif %}:sub": "repo:octo-org/octo-repo:ref:refs/heads/demo-branch"` |
|
||||
| Amazon Web Services | `"{% ifversion ghes %}HOSTNAME/_services/token{% else %}token.actions.githubusercontent.com{% endif %}:sub": "repo:octo-org/octo-repo:ref:refs/heads/demo-branch"` |
|
||||
| Azure| `repo:octo-org/octo-repo:ref:refs/heads/demo-branch` |
|
||||
| Google Cloud Platform| `(assertion.sub=='repo:octo-org/octo-repo:ref:refs/heads/demo-branch')` |
|
||||
| HashiCorp Vault| `bound_subject="repo:octo-org/octo-repo:ref:refs/heads/demo-branch" ` |
|
||||
@@ -225,7 +232,7 @@ You could also use a `curl` command to request the JWT, using the following envi
|
||||
|
||||
| | |
|
||||
| ------ | ----------- |
|
||||
| `ACTIONS_ID_TOKEN_REQUEST_URL` | The URL for {% data variables.product.prodname_dotcom %}'s OIDC provider. |
|
||||
| `ACTIONS_ID_TOKEN_REQUEST_URL` | The URL for {% data variables.product.prodname_dotcom %}'s OIDC provider. |
|
||||
| `ACTIONS_ID_TOKEN_REQUEST_TOKEN` | Bearer token for the request to the OIDC provider. |
|
||||
|
||||
|
||||
@@ -256,7 +263,7 @@ To customize these claim formats, organization and repository admins can use the
|
||||
|
||||
By default, the JWT is issued by {% data variables.product.prodname_dotcom %}'s OIDC provider at `https://token.actions.githubusercontent.com`. This path is presented to your cloud provider using the `iss` value in the JWT.
|
||||
|
||||
Enterprise admins can security harden their OIDC configuration by configuring their enterprise to receive tokens from a unique URL at `https://token.actions.githubusercontent.com/<enterpriseSlug>`. Replace `<enterpriseSlug>` with the slug value of your enterprise.
|
||||
Enterprise admins can security harden their OIDC configuration by configuring their enterprise to receive tokens from a unique URL at `https://token.actions.githubusercontent.com/<enterpriseSlug>`. Replace `<enterpriseSlug>` with the slug value of your enterprise.
|
||||
|
||||
This configuration means that your enterprise will receive the OIDC token from a unique URL, and you can then configure your cloud provider to only accept tokens from that URL. This helps ensure that only the enterprise's repositories can access your cloud resources using OIDC.
|
||||
|
||||
@@ -291,7 +298,7 @@ To help improve security, compliance, and standardization, you can customize the
|
||||
|
||||
Customizing the claims results in a new format for the entire `sub` claim, which replaces the default predefined `sub` format in the token described in "[Example subject claims](/actions/deployment/security-hardening-your-deployments/about-security-hardening-with-openid-connect#example-subject-claims)."
|
||||
|
||||
The following example templates demonstrate various ways to customize the subject claim. To configure these settings on {% data variables.product.prodname_dotcom %}, admins use the REST API to specify a list of claims that must be included in the subject (`sub`) claim.
|
||||
The following example templates demonstrate various ways to customize the subject claim. To configure these settings on {% data variables.product.prodname_dotcom %}, admins use the REST API to specify a list of claims that must be included in the subject (`sub`) claim.
|
||||
|
||||
{% data reusables.actions.use-request-body-api %}
|
||||
|
||||
@@ -314,7 +321,7 @@ In your cloud provider's OIDC configuration, configure the `sub` condition to re
|
||||
|
||||
#### Example: Allowing access to all repositories with a specific owner
|
||||
|
||||
This example template enables the `sub` claim to have a new format with only the value of `repository_owner`.
|
||||
This example template enables the `sub` claim to have a new format with only the value of `repository_owner`.
|
||||
|
||||
{% data reusables.actions.use-request-body-api %}
|
||||
|
||||
@@ -365,12 +372,12 @@ This example also demonstrates how to use `"context"` to define your conditions.
|
||||
|
||||
In your cloud provider's OIDC configuration, configure the `sub` condition to require that claims must include specific values for `repo`, `context`, and `job_workflow_ref`.
|
||||
|
||||
This customization template requires that the `sub` uses the following format: `repo:<orgName/repoName>:environment:<environmentName>:job_workflow_ref:<reusableWorkflowPath>`.
|
||||
This customization template requires that the `sub` uses the following format: `repo:<orgName/repoName>:environment:<environmentName>:job_workflow_ref:<reusableWorkflowPath>`.
|
||||
For example: `"sub": "repo:octo-org/octo-repo:environment:prod:job_workflow_ref:octo-org/octo-automation/.github/workflows/oidc.yml@refs/heads/main"`
|
||||
|
||||
#### Example: Granting access to a specific repository
|
||||
|
||||
This example template lets you grant cloud access to all the workflows in a specific repository, across all branches/tags and environments. To help improve security, combine this template with the custom issuer URL described in "[Customizing the token URL for an enterprise](/actions/deployment/security-hardening-your-deployments/about-security-hardening-with-openid-connect#customizing-the-token-url-for-an-enterprise)."
|
||||
This example template lets you grant cloud access to all the workflows in a specific repository, across all branches/tags and environments. To help improve security, combine this template with the custom issuer URL described in "[Customizing the token URL for an enterprise](/actions/deployment/security-hardening-your-deployments/about-security-hardening-with-openid-connect#customizing-the-token-url-for-an-enterprise)."
|
||||
|
||||
{% data reusables.actions.use-request-body-api %}
|
||||
|
||||
@@ -386,7 +393,7 @@ In your cloud provider's OIDC configuration, configure the `sub` condition to re
|
||||
|
||||
#### Example: Using system-generated GUIDs
|
||||
|
||||
This example template enables predictable OIDC claims with system-generated GUIDs that do not change between renames of entities (such as renaming a repository).
|
||||
This example template enables predictable OIDC claims with system-generated GUIDs that do not change between renames of entities (such as renaming a repository).
|
||||
|
||||
{% data reusables.actions.use-request-body-api %}
|
||||
|
||||
@@ -431,7 +438,7 @@ In your cloud provider's OIDC configuration, configure the `sub` condition to re
|
||||
|
||||
#### Using the default subject claims
|
||||
|
||||
For repositories that can receive a subject claim policy from their organization, the repository owner can later choose to opt-out and instead use the default `sub` claim format. This means that the repository will not use the organization's customized template.
|
||||
For repositories that can receive a subject claim policy from their organization, the repository owner can later choose to opt-out and instead use the default `sub` claim format. This means that the repository will not use the organization's customized template.
|
||||
|
||||
To configure the repository to use the default `sub` claim format, a repository admin must use the REST API endpoint at "[Set the customization template for an OIDC subject claim for a repository](/rest/actions/oidc#set-the-customization-template-for-an-oidc-subject-claim-for-a-repository)" with the following request body:
|
||||
|
||||
|
||||
@@ -9,19 +9,19 @@ featuredLinks:
|
||||
guides:
|
||||
- /actions/learn-github-actions
|
||||
- /actions/examples
|
||||
- /actions/guides/about-continuous-integration
|
||||
- /actions/deployment/deploying-with-github-actions
|
||||
- /actions/guides/about-packaging-with-github-actions
|
||||
- /actions/automating-builds-and-tests/about-continuous-integration
|
||||
- /actions/deployment/about-deployments/deploying-with-github-actions
|
||||
- /actions/publishing-packages/about-packaging-with-github-actions
|
||||
- /actions/monitoring-and-troubleshooting-workflows/about-monitoring-and-troubleshooting
|
||||
guideCards:
|
||||
- /actions/learn-github-actions/using-starter-workflows
|
||||
- /actions/guides/publishing-nodejs-packages
|
||||
- /actions/guides/building-and-testing-powershell
|
||||
- /actions/using-workflows/using-starter-workflows
|
||||
- /actions/publishing-packages/publishing-nodejs-packages
|
||||
- /actions/automating-builds-and-tests/building-and-testing-powershell
|
||||
popular:
|
||||
- /actions/learn-github-actions/workflow-syntax-for-github-actions
|
||||
- /actions/using-workflows/workflow-syntax-for-github-actions
|
||||
- /actions/learn-github-actions
|
||||
- /actions/examples
|
||||
- /actions/learn-github-actions/events-that-trigger-workflows
|
||||
- /actions/using-workflows/events-that-trigger-workflows
|
||||
- /actions/learn-github-actions/contexts
|
||||
- /actions/learn-github-actions/expressions
|
||||
- /actions/learn-github-actions/variables
|
||||
@@ -63,4 +63,3 @@ children:
|
||||
- /creating-actions
|
||||
- /guides
|
||||
---
|
||||
|
||||
|
||||
@@ -191,6 +191,9 @@ The `github` context contains information about the workflow run and the event t
|
||||
| `github.action_repository` | `string` | For a step executing an action, this is the owner and repository name of the action. For example, `actions/checkout`. |
|
||||
| `github.action_status` | `string` | For a composite action, the current result of the composite action. |
|
||||
| `github.actor` | `string` | {% ifversion actions-stable-actor-ids %}The username of the user that triggered the initial workflow run. If the workflow run is a re-run, this value may differ from `github.triggering_actor`. Any workflow re-runs will use the privileges of `github.actor`, even if the actor initiating the re-run (`github.triggering_actor`) has different privileges.{% else %}The username of the user that initiated the workflow run.{% endif %} |
|
||||
{%- ifversion actions-oidc-custom-claims %}
|
||||
| `github.actor_id` | `string` | {% data reusables.actions.actor_id-description %} |
|
||||
{%- endif %}
|
||||
| `github.api_url` | `string` | The URL of the {% data variables.product.prodname_dotcom %} REST API. |
|
||||
| `github.base_ref` | `string` | The `base_ref` or target branch of the pull request in a workflow run. This property is only available when the event that triggers a workflow run is either `pull_request` or `pull_request_target`. |
|
||||
| `github.env` | `string` | Path on the runner to the file that sets environment variables from workflow commands. This file is unique to the current step and is a different file for each step in a job. For more information, see "[Workflow commands for {% data variables.product.prodname_actions %}](/actions/learn-github-actions/workflow-commands-for-github-actions#setting-an-environment-variable)." |
|
||||
@@ -200,6 +203,9 @@ The `github` context contains information about the workflow run and the event t
|
||||
| `github.graphql_url` | `string` | The URL of the {% data variables.product.prodname_dotcom %} GraphQL API. |
|
||||
| `github.head_ref` | `string` | The `head_ref` or source branch of the pull request in a workflow run. This property is only available when the event that triggers a workflow run is either `pull_request` or `pull_request_target`. |
|
||||
| `github.job` | `string` | The [`job_id`](/actions/reference/workflow-syntax-for-github-actions#jobsjob_id) of the current job. <br /> Note: This context property is set by the Actions runner, and is only available within the execution `steps` of a job. Otherwise, the value of this property will be `null`. |
|
||||
{%- ifversion actions-oidc-custom-claims %}
|
||||
| `github.job_workflow_sha` | `string` | {% data reusables.actions.job-workflow-sha-description %} |
|
||||
{%- endif %}
|
||||
| `github.ref` | `string` | {% data reusables.actions.ref-description %} |
|
||||
{%- ifversion fpt or ghec or ghes > 3.3 or ghae > 3.3 %}
|
||||
| `github.ref_name` | `string` | {% data reusables.actions.ref_name-description %} |
|
||||
@@ -207,9 +213,15 @@ The `github` context contains information about the workflow run and the event t
|
||||
| `github.ref_type` | `string` | {% data reusables.actions.ref_type-description %} |
|
||||
{%- endif %}
|
||||
| `github.path` | `string` | Path on the runner to the file that sets system `PATH` variables from workflow commands. This file is unique to the current step and is a different file for each step in a job. For more information, see "[Workflow commands for {% data variables.product.prodname_actions %}](/actions/learn-github-actions/workflow-commands-for-github-actions#adding-a-system-path)." |
|
||||
| `github.repository` | `string` | The owner and repository name. For example, `Codertocat/Hello-World`. |
|
||||
| `github.repository_owner` | `string` | The repository owner's name. For example, `Codertocat`. |
|
||||
| `github.repositoryUrl` | `string` | The Git URL to the repository. For example, `git://github.com/codertocat/hello-world.git`. |
|
||||
| `github.repository` | `string` | The owner and repository name. For example, `octocat/Hello-World`. |
|
||||
{%- ifversion actions-oidc-custom-claims %}
|
||||
| `github.repository_id` | `string` | {% data reusables.actions.repository_id-description %} |
|
||||
{%- endif %}
|
||||
| `github.repository_owner` | `string` | The repository owner's username. For example, `octocat`. |
|
||||
{%- ifversion actions-oidc-custom-claims %}
|
||||
| `github.repository_owner_id` | `string` | {% data reusables.actions.repository_owner_id-description %} |
|
||||
{%- endif %}
|
||||
| `github.repositoryUrl` | `string` | The Git URL to the repository. For example, `git://github.com/octocat/hello-world.git`. |
|
||||
| `github.retention_days` | `string` | The number of days that workflow run logs and artifacts are kept. |
|
||||
| `github.run_id` | `string` | {% data reusables.actions.run_id_description %} |
|
||||
| `github.run_number` | `string` | {% data reusables.actions.run_number_description %} |
|
||||
@@ -224,6 +236,10 @@ The `github` context contains information about the workflow run and the event t
|
||||
| `github.token` | `string` | A token to authenticate on behalf of the GitHub App installed on your repository. This is functionally equivalent to the `GITHUB_TOKEN` secret. For more information, see "[Automatic token authentication](/actions/security-guides/automatic-token-authentication)." <br /> Note: This context property is set by the Actions runner, and is only available within the execution `steps` of a job. Otherwise, the value of this property will be `null`. |{% ifversion actions-stable-actor-ids %}
|
||||
| `github.triggering_actor` | `string` | The username of the user that initiated the workflow run. If the workflow run is a re-run, this value may differ from `github.actor`. Any workflow re-runs will use the privileges of `github.actor`, even if the actor initiating the re-run (`github.triggering_actor`) has different privileges. |{% endif %}
|
||||
| `github.workflow` | `string` | The name of the workflow. If the workflow file doesn't specify a `name`, the value of this property is the full path of the workflow file in the repository. |
|
||||
{%- ifversion actions-oidc-custom-claims %}
|
||||
| `github.workflow_ref` | `string` | {% data reusables.actions.workflow-ref-description %} |
|
||||
| `github.workflow_sha` | `string` | {% data reusables.actions.workflow-sha-description %} |
|
||||
{%- endif %}
|
||||
| `github.workspace` | `string` | The default working directory on the runner for steps, and the default location of your repository when using the [`checkout`](https://github.com/actions/checkout) action. |
|
||||
|
||||
### Example contents of the `github` context
|
||||
|
||||
@@ -240,6 +240,9 @@ We strongly recommend that actions use variables to access the filesystem rather
|
||||
| `GITHUB_ACTION_REPOSITORY` | For a step executing an action, this is the owner and repository name of the action. For example, `actions/checkout`. |
|
||||
| `GITHUB_ACTIONS` | Always set to `true` when {% data variables.product.prodname_actions %} is running the workflow. You can use this variable to differentiate when tests are being run locally or by {% data variables.product.prodname_actions %}.
|
||||
| `GITHUB_ACTOR` | The name of the person or app that initiated the workflow. For example, `octocat`. |
|
||||
{%- ifversion actions-oidc-custom-claims %}
|
||||
| `GITHUB_ACTOR_ID` | {% data reusables.actions.actor_id-description %} |
|
||||
{%- endif %}
|
||||
| `GITHUB_API_URL` | Returns the API URL. For example: `{% data variables.product.api_url_code %}`.
|
||||
| `GITHUB_BASE_REF` | The name of the base ref or target branch of the pull request in a workflow run. This is only set when the event that triggers a workflow run is either `pull_request` or `pull_request_target`. For example, `main`. |
|
||||
| `GITHUB_ENV` | The path on the runner to the file that sets variables from workflow commands. This file is unique to the current step and changes for each step in a job. For example, `/home/runner/work/_temp/_runner_file_commands/set_env_87406d6e-4979-4d42-98e1-3dab1f48b13a`. For more information, see "[Workflow commands for {% data variables.product.prodname_actions %}](/actions/using-workflows/workflow-commands-for-github-actions#setting-an-environment-variable)." |
|
||||
@@ -256,7 +259,13 @@ We strongly recommend that actions use variables to access the filesystem rather
|
||||
| `GITHUB_REF_TYPE` | {% data reusables.actions.ref_type-description %} |
|
||||
{%- endif %}
|
||||
| `GITHUB_REPOSITORY` | The owner and repository name. For example, `octocat/Hello-World`. |
|
||||
{%- ifversion actions-oidc-custom-claims %}
|
||||
| `GITHUB_REPOSITORY_ID` | {% data reusables.actions.repository_id-description %} |
|
||||
{%- endif %}
|
||||
| `GITHUB_REPOSITORY_OWNER` | The repository owner's name. For example, `octocat`. |
|
||||
{%- ifversion actions-oidc-custom-claims %}
|
||||
| `GITHUB_REPOSITORY_OWNER_ID` | {% data reusables.actions.repository_owner_id-description %} |
|
||||
{%- endif %}
|
||||
| `GITHUB_RETENTION_DAYS` | The number of days that workflow run logs and artifacts are kept. For example, `90`. |
|
||||
| `GITHUB_RUN_ATTEMPT` | A unique number for each attempt of a particular workflow run in a repository. This number begins at 1 for the workflow run's first attempt, and increments with each re-run. For example, `3`. |
|
||||
| `GITHUB_RUN_ID` | {% data reusables.actions.run_id_description %} For example, `1658821493`. |
|
||||
@@ -267,6 +276,10 @@ We strongly recommend that actions use variables to access the filesystem rather
|
||||
| `GITHUB_STEP_SUMMARY` | The path on the runner to the file that contains job summaries from workflow commands. This file is unique to the current step and changes for each step in a job. For example, `/home/rob/runner/_layout/_work/_temp/_runner_file_commands/step_summary_1cb22d7f-5663-41a8-9ffc-13472605c76c`. For more information, see "[Workflow commands for {% data variables.product.prodname_actions %}](/actions/using-workflows/workflow-commands-for-github-actions#adding-a-job-summary)." |
|
||||
{%- endif %}
|
||||
| `GITHUB_WORKFLOW` | The name of the workflow. For example, `My test workflow`. If the workflow file doesn't specify a `name`, the value of this variable is the full path of the workflow file in the repository. |
|
||||
{%- ifversion actions-oidc-custom-claims %}
|
||||
| `GITHUB_WORKFLOW_REF` | {% data reusables.actions.workflow-ref-description %} |
|
||||
| `GITHUB_WORKFLOW_SHA` | {% data reusables.actions.workflow-sha-description %} |
|
||||
{%- endif %}
|
||||
| `GITHUB_WORKSPACE` | The default working directory on the runner for steps, and the default location of your repository when using the [`checkout`](https://github.com/actions/checkout) action. For example, `/home/runner/work/my-repo-name/my-repo-name`. |
|
||||
{%- ifversion actions-runner-arch-envvars %}
|
||||
| `RUNNER_ARCH` | {% data reusables.actions.runner-arch-description %} |
|
||||
|
||||
@@ -89,8 +89,14 @@ This procedure demonstrates how to create a starter workflow and metadata file.
|
||||
```
|
||||
* `name` - **Required.** The name of the workflow. This is displayed in the list of available workflows.
|
||||
* `description` - **Required.** The description of the workflow. This is displayed in the list of available workflows.
|
||||
* `iconName` - **Optional.** Specifies an icon for the workflow that's displayed in the list of workflows. The `iconName` must be the name of an SVG file, without the file name extension, stored in the `workflow-templates` directory. For example, an SVG file named `example-icon.svg` is referenced as `example-icon`.
|
||||
* `categories` - **Optional.** Defines the language category of the workflow. When a user views the available starter workflows for a repository, the workflows that match the identified language for the project are featured more prominently. For information on the available language categories, see https://github.com/github/linguist/blob/master/lib/linguist/languages.yml.
|
||||
* `iconName` - **Optional.** Specifies an icon for the workflow that is displayed in the list of workflows. `iconName` can one of the following types:
|
||||
* An SVG file that is stored in the `workflow-templates` directory. To reference a file, the value must be the file name without the file extension. For example, an SVG file named `example-icon.svg` is referenced as `example-icon`.
|
||||
* An icon from {% data variables.product.prodname_dotcom %}'s set of [Octicons](https://primer.style/octicons/). To reference an octicon, the value must be `octicon <icon name>`. For example, `octicon smiley`.
|
||||
* `categories` - **Optional.** Defines the categories that the workflow is shown under. You can use category names from the following lists:
|
||||
* General category names from the [starter-workflows](https://github.com/actions/starter-workflows/blob/main/README.md#categories) repository.
|
||||
* Linguist languages from the list in the [linguist](https://github.com/github/linguist/blob/master/lib/linguist/languages.yml) repository.
|
||||
* Supported tech stacks from the list in the [starter-workflows](https://github.com/github-starter-workflows/repo-analysis-partner/blob/main/tech_stacks.yml) repository.
|
||||
|
||||
* `filePatterns` - **Optional.** Allows the workflow to be used if the user's repository has a file in its root directory that matches a defined regular expression.
|
||||
|
||||
To add another starter workflow, add your files to the same `workflow-templates` directory. For example:
|
||||
|
||||
@@ -35,7 +35,7 @@ You can authenticate to {% data variables.product.product_name %} in your browse
|
||||
|
||||
{% ifversion fpt or ghec %}
|
||||
|
||||
If you're a member of an {% data variables.enterprise.prodname_emu_enterprise %}, you will authenticate to {% data variables.product.product_name %} in your browser using your IdP. For more information, see "[Authenticating as a managed user](/enterprise-cloud@latest/admin/authentication/managing-your-enterprise-users-with-your-identity-provider/about-enterprise-managed-users#authenticating-as-a-managed-user){% ifversion fpt %}" in the {% data variables.product.prodname_ghe_cloud %} documentation.{% else %}."{% endif %}
|
||||
If you're a member of an {% data variables.enterprise.prodname_emu_enterprise %}, you will authenticate to {% data variables.product.product_name %} in your browser using your IdP. For more information, see "[Authenticating as a managed user](/enterprise-cloud@latest/admin/authentication/managing-your-enterprise-users-with-your-identity-provider/about-enterprise-managed-users#authenticating-as-a-managed-user){% ifversion fpt %}" in the {% data variables.product.prodname_ghe_cloud %} documentation.{% else %}."{% endif %}
|
||||
|
||||
If you're not a member of an {% data variables.enterprise.prodname_emu_enterprise %}, you will authenticate using your {% data variables.product.prodname_dotcom_the_website %} username and password. You may also use two-factor authentication and SAML single sign-on, which can be required by organization and enterprise owners.
|
||||
|
||||
@@ -51,7 +51,9 @@ You can authenticate to {% data variables.product.product_name %} in your browse
|
||||
|
||||
After providing your username and password, you will be asked to provide a verification code that we will send to you via email. If you have the {% data variables.product.prodname_mobile %} application installed, you'll receive a notification there instead. For more information, see "[{% data variables.product.prodname_mobile %}](/get-started/using-github/github-mobile)."{% endif %}
|
||||
- **Two-factor authentication (2FA)** (recommended)
|
||||
- If you enable 2FA, after you successfully enter your username and password, we'll also prompt you to provide a code that's generated by a time-based one time password (TOTP) application on your mobile device{% ifversion fpt or ghec %} or sent as a text message (SMS){% endif %}. For more information, see "[Accessing {% data variables.product.prodname_dotcom %} using two-factor authentication](/github/authenticating-to-github/accessing-github-using-two-factor-authentication#providing-a-2fa-code-when-signing-in-to-the-website)."
|
||||
- If you enable 2FA, after you successfully enter your username and password, we'll also prompt you to provide a code that's generated by a time-based one time password (TOTP) application on your mobile device{% ifversion fpt or ghec %} or sent as a text message (SMS).{% endif %}{% ifversion 2fa-check-up-period %}
|
||||
- After you configure 2FA, your account enters a check up period for 28 days. You can leave the check up period by successfully performing 2FA within those 28 days. If you don't perform 2FA in that timespan, you'll then be asked to perform 2FA inside one of your existing {% data variables.product.prodname_dotcom_the_website %} sessions.
|
||||
- If you cannot perform 2FA to pass the 28th day checkup, you will be provided a shortcut that lets you reconfigure your 2FA settings. You must reconfigure your settings before you can access the rest of {% data variables.product.prodname_dotcom %}{% endif %}. For more information, see "[Accessing {% data variables.product.prodname_dotcom %} using two-factor authentication](/github/authenticating-to-github/accessing-github-using-two-factor-authentication#providing-a-2fa-code-when-signing-in-to-the-website){% ifversion 2fa-check-up-period %}" and "[Configuring two-factor authentication](/authentication/securing-your-account-with-two-factor-authentication-2fa/configuring-two-factor-authentication){% endif %}."
|
||||
- In addition to authentication with a TOTP application{% ifversion fpt or ghec %} or a text message{% endif %}, you can optionally add an alternative method of authentication with {% ifversion fpt or ghec %}{% data variables.product.prodname_mobile %} or{% endif %} a security key using WebAuthn. For more information, see {% ifversion fpt or ghec %}"[Configuring two-factor authentication with {% data variables.product.prodname_mobile %}](/authentication/securing-your-account-with-two-factor-authentication-2fa/configuring-two-factor-authentication#configuring-two-factor-authentication-using-github-mobile)" and {% endif %}"[Configuring two-factor authentication using a security key](/github/authenticating-to-github/configuring-two-factor-authentication#configuring-two-factor-authentication-using-a-security-key)."{% ifversion ghes %}
|
||||
- **External authentication**
|
||||
- Your site administrator may configure {% data variables.location.product_location %} to use external authentication instead of a username and password. For more information, see "[External authentication methods](/admin/identity-and-access-management/managing-iam-for-your-enterprise/about-authentication-for-your-enterprise#external-authentication)."{% endif %}{% ifversion fpt or ghec %}
|
||||
@@ -111,4 +113,3 @@ To use a {% data variables.product.pat_generic %} or SSH key to access resources
|
||||
| User-to-server token for a {% data variables.product.prodname_github_app %} | `ghu_` | "[Identifying and authorizing users for {% data variables.product.prodname_github_apps %}](/developers/apps/identifying-and-authorizing-users-for-github-apps)" |
|
||||
| Server-to-server token for a {% data variables.product.prodname_github_app %} | `ghs_` | "[Authenticating with {% data variables.product.prodname_github_apps %}](/developers/apps/authenticating-with-github-apps#authenticating-as-an-installation)" |
|
||||
| Refresh token for a {% data variables.product.prodname_github_app %} | `ghr_` | "[Refreshing user-to-server access tokens](/developers/apps/refreshing-user-to-server-access-tokens)" |
|
||||
|
||||
|
||||
@@ -16,19 +16,30 @@ topics:
|
||||
- 2FA
|
||||
shortTitle: Access GitHub with 2FA
|
||||
---
|
||||
|
||||
{% ifversion 2fa-check-up-period %}
|
||||
|
||||
With two-factor authentication (2FA) enabled, you'll need to provide an authentication code when accessing {% data variables.product.product_name %} through your browser. When you first configure 2FA, your account will enter a check up period for 28 days, and 2FA will not be necessary in existing {% data variables.product.prodname_dotcom_the_website %} sessions. You can exit the check up period by successfully performing 2FA within 28 days. If you fail to authenticate within 28 days, you'll be asked to perform 2FA inside one of your existing {% data variables.product.prodname_dotcom_the_website %} sessions. If you cannot perform 2FA to pass the 28th day checkup, use the provided shortcut to reconfigure your 2FA settings and retain access to {% data variables.product.prodname_dotcom_the_website %}. For more information, see "[Configuring two-factor authentication](/authentication/securing-your-account-with-two-factor-authentication-2fa/configuring-two-factor-authentication)."
|
||||
|
||||
If you access {% data variables.product.product_name %} using other methods, such as the API or the command line, you'll authenticate using a token, application, or SSH key. For more information, see "[About authentication to {% data variables.product.prodname_dotcom %}](/github/authenticating-to-github/about-authentication-to-github)."
|
||||
|
||||
{% else %}
|
||||
|
||||
With two-factor authentication enabled, you'll need to provide an authentication code when accessing {% data variables.product.product_name %} through your browser. If you access {% data variables.product.product_name %} using other methods, such as the API or the command line, you'll need to use an alternative form of authentication. For more information, see "[About authentication to {% data variables.product.prodname_dotcom %}](/github/authenticating-to-github/about-authentication-to-github)."
|
||||
|
||||
{% endif %}
|
||||
|
||||
## Providing a 2FA code when signing in to the website
|
||||
|
||||
After you sign in to {% data variables.product.product_name %} using your password, you'll be prompted to provide an authentication code from {% ifversion fpt or ghec %}a text message or{% endif %} your TOTP app.
|
||||
|
||||
{% data variables.product.product_name %} will only ask you to provide your 2FA authentication code again if you've logged out, are using a new device, or your session expires.
|
||||
{% data variables.product.product_name %} will only ask you to provide your 2FA authentication code again if you've logged out, are using a new device, are performing a sensitive action, or your session expires. For more information on 2FA for sensitive actions, see "[Sudo mode](/authentication/keeping-your-account-and-data-secure/sudo-mode)."
|
||||
|
||||
### Generating a code through a TOTP application
|
||||
|
||||
If you chose to set up two-factor authentication using a TOTP application on your smartphone, you can generate an authentication code for {% data variables.product.product_name %} at any time. In most cases, just launching the application will generate a new code. You should refer to your application's documentation for specific instructions.
|
||||
|
||||
If you delete the mobile application after configuring two-factor authentication, you'll need to provide your recovery code to get access to your account. For more information, see "[Recovering your account if you lose your two-factor authentication credentials](/articles/recovering-your-account-if-you-lose-your-2fa-credentials)"
|
||||
If you delete your authenticator application after configuring two-factor authentication, you'll need to provide your recovery code to get access to your account. Many TOTP apps support the secure backup of your authentication codes in the cloud and can be restored if you lose access to your device. For more information, see "[Recovering your account if you lose your two-factor authentication credentials](/articles/recovering-your-account-if-you-lose-your-2fa-credentials)"
|
||||
|
||||
{% ifversion fpt or ghec %}
|
||||
|
||||
@@ -59,7 +70,11 @@ If you have installed and signed in to {% data variables.product.prodname_mobile
|
||||
|
||||
## Using two-factor authentication with the command line
|
||||
|
||||
{% ifversion fpt or ghec %}
|
||||
Enabling 2FA may affect authentication to {% data variables.product.prodname_dotcom %} through the command line. To find out if your authentication method is affected, see the following sections.
|
||||
{% else %}
|
||||
After you've enabled 2FA, you will no longer use your password to access {% data variables.product.product_name %} on the command line. Instead, use Git Credential Manager, a {% data variables.product.pat_generic %}, or an SSH key.
|
||||
{% endif %}
|
||||
|
||||
### Authenticating on the command line using Git Credential Manager
|
||||
|
||||
@@ -69,7 +84,7 @@ Setup instructions vary based on your computer's operating system. For more info
|
||||
|
||||
### Authenticating on the command line using HTTPS
|
||||
|
||||
After you've enabled 2FA, you must create a {% data variables.product.pat_generic %} to use as a password when authenticating to {% data variables.product.product_name %} on the command line using HTTPS URLs.
|
||||
You must create a {% data variables.product.pat_generic %} to use as a password when authenticating to {% data variables.product.product_name %} on the command line using HTTPS URLs.
|
||||
|
||||
When prompted for a username and password on the command line, use your {% data variables.product.product_name %} username and {% data variables.product.pat_generic %}. The command line prompt won't specify that you should enter your {% data variables.product.pat_generic %} when it asks for your password.
|
||||
|
||||
|
||||
@@ -16,9 +16,20 @@ topics:
|
||||
- 2FA
|
||||
shortTitle: Configure 2FA
|
||||
---
|
||||
You can configure two-factor authentication using a mobile app{% ifversion fpt or ghec %} or via text message{% endif %}. You can also add a security key.
|
||||
You can configure two-factor authentication (2FA) using a mobile app{% ifversion fpt or ghec %} or via text message{% endif %}. You can also add a security key.
|
||||
|
||||
We strongly recommend using a time-based one-time password (TOTP) application to configure 2FA.{% ifversion fpt or ghec %} TOTP applications are more reliable than SMS, especially for locations outside the United States.{% endif %} TOTP apps support the secure backup of your authentication codes in the cloud and can be restored if you lose access to your device.
|
||||
We strongly recommend using a time-based one-time password (TOTP) application to configure 2FA.{% ifversion fpt or ghec %} TOTP applications are more reliable than SMS, especially for locations outside the United States.{% endif %} Many TOTP apps support the secure backup of your authentication codes in the cloud and can be restored if you lose access to your device.
|
||||
|
||||
{% ifversion 2fa-check-up-period %}
|
||||
|
||||
After you configure 2FA, your account will enter a 28-day check up period. You can leave the check up period by successfully performing 2FA in those 28 days. Otherwise, you will be prompted to perform 2FA in an existing {% data variables.product.prodname_dotcom_the_website %} session on the 28th day. If you cannot perform 2FA to pass the checkup, you must use the provided shortcut to reconfigure your 2FA settings and retain access to {% data variables.product.prodname_dotcom_the_website %}.
|
||||
|
||||
{% ifversion fpt or ghec %}
|
||||
|
||||
If you're a member of an {% data variables.enterprise.prodname_emu_enterprise %}, you cannot configure 2FA for your {% data variables.enterprise.prodname_managed_user %} account unless you're signed in as the setup user. For users other than the setup user, an administrator must configure 2FA on your identity provider (IdP).
|
||||
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
{% warning %}
|
||||
|
||||
@@ -28,12 +39,6 @@ We strongly recommend using a time-based one-time password (TOTP) application to
|
||||
|
||||
{% endwarning %}
|
||||
|
||||
{% ifversion fpt or ghec %}
|
||||
|
||||
If you're a member of an {% data variables.enterprise.prodname_emu_enterprise %}, you cannot configure 2FA for your {% data variables.enterprise.prodname_managed_user %} account unless you're signed in as the setup user. For users other than the setup user, an administrator must configure 2FA on your identity provider (IdP).
|
||||
|
||||
{% endif %}
|
||||
|
||||
## Configuring two-factor authentication using a TOTP mobile app
|
||||
|
||||
A time-based one-time password (TOTP) application automatically generates an authentication code that changes after a certain period of time. We recommend using cloud-based TOTP apps such as:
|
||||
@@ -70,7 +75,7 @@ A time-based one-time password (TOTP) application automatically generates an aut
|
||||
{%- endif %}
|
||||
{% data reusables.two_fa.save_your_recovery_codes_during_2fa_setup %}
|
||||
{% data reusables.two_fa.backup_options_during_2fa_enrollment %}
|
||||
{% data reusables.two_fa.test_2fa_immediately %}
|
||||
{% ifversion ghes < 3.9 %}{% data reusables.two_fa.test_2fa_immediately %}{% endif %}
|
||||
|
||||
{% ifversion fpt or ghec %}
|
||||
|
||||
@@ -102,7 +107,6 @@ Before using this method, be sure that you can receive text messages. Carrier ra
|
||||

|
||||
{% data reusables.two_fa.save_your_recovery_codes_during_2fa_setup %}
|
||||
{% data reusables.two_fa.backup_options_during_2fa_enrollment %}
|
||||
{% data reusables.two_fa.test_2fa_immediately %}
|
||||
|
||||
{% endif %}
|
||||
|
||||
@@ -127,7 +131,7 @@ Authentication with a security key is *secondary* to authentication with a TOTP
|
||||
8. Activate your security key, following your security key's documentation.
|
||||

|
||||
9. Confirm that you've downloaded and can access your recovery codes. If you haven't already, or if you'd like to generate another set of codes, download your codes and save them in a safe place. For more information, see "[Downloading your 2FA recovery codes](/authentication/securing-your-account-with-two-factor-authentication-2fa/configuring-two-factor-authentication-recovery-methods#downloading-your-two-factor-authentication-recovery-codes)."
|
||||
{% data reusables.two_fa.test_2fa_immediately %}
|
||||
{% ifversion ghes < 3.9 %}{% data reusables.two_fa.test_2fa_immediately %}{% endif %}
|
||||
|
||||
{% ifversion fpt or ghec %}
|
||||
## Configuring two-factor authentication using {% data variables.product.prodname_mobile %}
|
||||
|
||||
@@ -29,9 +29,9 @@ Charges are billed to an organization or enterprise when all of the following ar
|
||||
- The organization is configured to be billed for codespaces created from the repository or forks of the repository.
|
||||
- The user creating the codespace belongs to the organization, or is an outside collaborator affiliated with the organization, and the organization has chosen to pay for this user's use of organization-owned codespaces.
|
||||
|
||||
Otherwise use of {% data variables.product.prodname_github_codespaces %} applies to the personal account of the person who created the codespace, and either consumes some of the monthly included usage for their personal account, or their account is billed according to their usage in excess of their included quotas.
|
||||
Otherwise use of {% data variables.product.prodname_github_codespaces %} applies to the personal account of the person who created the codespace, and either consumes some of the monthly included usage for their personal account, or their account is billed according to their usage in excess of their included quotas.
|
||||
|
||||
For information about how to configure an organization to be billed for codespace usage, see "[Enabling {% data variables.product.prodname_github_codespaces %} for your organization](/codespaces/managing-codespaces-for-your-organization/enabling-github-codespaces-for-your-organization)." The Free, Team, and Enterprise plans for organization and enterprise accounts do not include any free use of {% data variables.product.prodname_github_codespaces %}.
|
||||
For information about how to configure an organization to be billed for codespace usage, see "[Enabling {% data variables.product.prodname_github_codespaces %} for your organization](/codespaces/managing-codespaces-for-your-organization/enabling-github-codespaces-for-your-organization)." The Free, Team, and Enterprise plans for organization and enterprise accounts do not include any free use of {% data variables.product.prodname_github_codespaces %}.
|
||||
|
||||
{% ifversion fpt %}
|
||||
|
||||
@@ -54,7 +54,7 @@ The following storage and core hours of usage are included, free of charge, for
|
||||
|
||||
You will be notified by email when you have used 75%, 90%, and 100% of your included quotas. Notifications are also displayed in a "toast" message within {% data variables.product.prodname_vscode_shortname %} and the {% data variables.product.prodname_vscode_shortname %} web client. You can turn off email notifications if required. For more information, see "[Managing the spending limit for GitHub Codespaces](/billing/managing-billing-for-github-codespaces/managing-the-spending-limit-for-github-codespaces#managing-usage-and-spending-limit-email-notifications)."
|
||||
|
||||
When a personal account has used all of either the included storage or compute usage (whichever is reached first), and has no spending limit configured, use of {% data variables.product.prodname_github_codespaces %} will be blocked. You must set up a payment method and a spending limit to continue using {% data variables.product.prodname_github_codespaces %} during the current billing month. At the beginning of the next monthly billing cycle the included usage is reset. Storage will not be billed while use of {% data variables.product.prodname_github_codespaces %} is blocked.
|
||||
When a personal account has used all of either the included storage or compute usage (whichever is reached first), and has no spending limit configured, use of {% data variables.product.prodname_github_codespaces %} will be blocked. You must set up a payment method and a spending limit to continue using {% data variables.product.prodname_github_codespaces %} during the current billing month. At the beginning of the next monthly billing cycle the included usage is reset. Storage will not be billed while use of {% data variables.product.prodname_github_codespaces %} is blocked.
|
||||
|
||||
You can view details of your usage for the current month at any time. For more information, see "[Viewing your {% data variables.product.prodname_github_codespaces %} usage](/billing/managing-billing-for-github-codespaces/viewing-your-github-codespaces-usage)."
|
||||
|
||||
@@ -62,7 +62,7 @@ If you are blocked from resuming a codespace and you want to continue to work on
|
||||
|
||||
- Add a payment method and a spending limit greater than $0 USD.
|
||||
- Export the changes from the codespace to a branch. For more information, see "[Exporting changes to a branch](/codespaces/troubleshooting/exporting-changes-to-a-branch)."
|
||||
- Wait for your monthly included usage to reset at the start of the next monthly billing cycle.
|
||||
- Wait for your monthly included usage to reset at the start of the next monthly billing cycle.
|
||||
|
||||
If you have used all of either your included storage usage or your included compute usage, and you have set up a payment method and a spending limit, any further use of codespaces owned by your personal account will incur charges for whichever type of usage has no remaining included quota. You will not be charged for the other type of usage until you have also used all of its included quota.
|
||||
|
||||
@@ -107,9 +107,9 @@ For {% data variables.product.prodname_github_codespaces %} billing purposes, st
|
||||
|
||||
{% note %}
|
||||
|
||||
**Notes**:
|
||||
**Notes**:
|
||||
|
||||
- When you use the default dev container configuration (see "[Introduction to dev containers](/codespaces/setting-up-your-project-for-codespaces/introduction-to-dev-containers#using-the-default-dev-container-configuration)"), we do not count the default container as used storage. When you create a custom container using a dev container configuration with a different base image we do count the container as used storage.
|
||||
- When you use the default dev container configuration (see "[Introduction to dev containers](/codespaces/setting-up-your-project-for-codespaces/adding-a-dev-container-configuration/introduction-to-dev-containers#using-the-default-dev-container-configuration)"), we do not count the default container as used storage. When you create a custom container using a dev container configuration with a different base image we do count the container as used storage.
|
||||
- When you rebuild your container from the default image we do not count the base container as used storage. For other base images all of the storage consumed by the codespace, including the base container, is counted as used storage.
|
||||
|
||||
{% endnote %}
|
||||
@@ -121,7 +121,7 @@ For example, if you have one codespace that uses 100 GB of storage and has exist
|
||||
For each hourly report, the storage usage for the previous hour is calculated in seconds. As a result, you won't be charged for a full hour of storage if a codespace did not exist for the full 60 minutes. At the end of the month, {% data variables.product.prodname_dotcom %} rounds your storage to the nearest MB.
|
||||
|
||||
Organization owners can:
|
||||
- List the currently active and stopped codespaces for your organization. For more information, see "[Listing the codespaces in your organization](/codespaces/managing-codespaces-for-your-organization/listing-the-codespaces-in-your-organization)." In addition to the cost of these codespaces, the cost of {% data variables.product.prodname_github_codespaces %} for the current month may include costs for codespaces that existed earlier in the current month but have since been deleted.
|
||||
- List the currently active and stopped codespaces for your organization. For more information, see "[Listing the codespaces in your organization](/codespaces/managing-codespaces-for-your-organization/listing-the-codespaces-in-your-organization)." In addition to the cost of these codespaces, the cost of {% data variables.product.prodname_github_codespaces %} for the current month may include costs for codespaces that existed earlier in the current month but have since been deleted.
|
||||
- See the total {% data variables.product.prodname_github_codespaces %} compute and storage usage for your organization for the current month to date. For more information, see "[Viewing your {% data variables.product.prodname_github_codespaces %} usage](/billing/managing-billing-for-github-codespaces/viewing-your-github-codespaces-usage)."
|
||||
- Configure your organization settings to manage the cost of {% data variables.product.prodname_github_codespaces %}. For more information, see "[Managing the cost of {% data variables.product.prodname_github_codespaces %} in your organization](/codespaces/managing-codespaces-for-your-organization/managing-the-cost-of-github-codespaces-in-your-organization)."
|
||||
|
||||
@@ -182,7 +182,7 @@ For information on managing and changing your account's spending limit, see "[Ma
|
||||
|
||||
By default the machine type with the lowest valid resources is used when a codespace is created. However, users may be able to choose a machine type with more resources. They can do this either when they create a codespace, or they can change the machine type of an existing codespace. For more information, see "[Creating a codespace for a repository](/codespaces/developing-in-codespaces/creating-a-codespace-for-a-repository#creating-a-codespace-for-a-repository)" and "[Changing the machine type for your codespace](/codespaces/customizing-your-codespace/changing-the-machine-type-for-your-codespace)."
|
||||
|
||||
If a machine type that has more resources is chosen, this will affect the per-hour charge for that codespace, as shown above.
|
||||
If a machine type that has more resources is chosen, this will affect the per-hour charge for that codespace, as shown above.
|
||||
|
||||
Organization owners can create a policy to limit the choice of machine types available to users for codespaces that are billed to an organization or enterprise account. For more information, see "[Restricting access to machine types](/codespaces/managing-codespaces-for-your-organization/restricting-access-to-machine-types)."
|
||||
|
||||
@@ -200,4 +200,4 @@ Usage is calculated every hour. An organization pays for usage of codespaces cre
|
||||
|
||||
## What happens when users are removed
|
||||
|
||||
If a user is removed from an organization or repository, their codespaces are automatically deleted.
|
||||
If a user is removed from an organization or repository, their codespaces are automatically deleted.
|
||||
|
||||
@@ -44,7 +44,7 @@ In the examples below, replace `:enabled` with `:not-enabled` to see repositorie
|
||||
|
||||
| Qualifier | Description |
|
||||
| -------- | -------- |
|
||||
| `code-scanning:enabled` | Display repositories that have set up {% data variables.product.prodname_code_scanning %}. |
|
||||
| `code-scanning:enabled` | Display repositories that have set up {% data variables.product.prodname_code_scanning %}. |
|
||||
| `dependabot:enabled` | Display repositories that have enabled {% data variables.product.prodname_dependabot_alerts %}. |
|
||||
| `secret-scanning:enabled` | Display repositories that have enabled {% data variables.secret-scanning.alerts %}. {% ifversion security-overview-org-risk-coverage %} |
|
||||
| `any-feature:enabled` | Display repositories where at least one security feature is enabled. |{% else %}
|
||||
@@ -79,7 +79,7 @@ These qualifiers are available in the main summary views.
|
||||
{% ifversion ghec or ghes > 3.4 or ghae > 3.4 %}
|
||||
## Filter by level of risk for repositories
|
||||
|
||||
The level of risk for a repository is determined by the number and severity of alerts from security features. If one or more security features are not enabled for a repository, the repository will have an unknown level of risk. If a repository has no risks that are detected by security features, the repository will have a clear level of risk.
|
||||
The level of risk for a repository is determined by the number and severity of alerts from security features. If one or more security features are not enabled for a repository, the repository will have an unknown level of risk. If a repository has no risks that are detected by security features, the repository will have a clear level of risk.
|
||||
|
||||
{% ifversion security-overview-org-risk-coverage %}
|
||||
These qualifiers are available in the enterprise-level view.
|
||||
@@ -100,9 +100,9 @@ These qualifiers are available in the enterprise-level view.
|
||||
|
||||
| Qualifier | Description |
|
||||
| -------- | -------- |
|
||||
| <code>code-scanning:<em>n</em></code> | Display repositories that have *n* {% data variables.product.prodname_code_scanning %} alerts. This qualifier can use `=`, `>` and `<` comparison operators. |
|
||||
| <code>secret-scanning:<em>n</em></code> | Display repositories that have *n* {% data variables.secret-scanning.alerts %}. This qualifier can use `=`, `>` and `<` comparison operators. |
|
||||
| <code>dependabot:<em>n</em></code> | Display repositories that have *n* {% data variables.product.prodname_dependabot_alerts %}. This qualifier can use `=`, `>` and `<` comparison operators. |
|
||||
| `code-scanning:NUMBER` | Display repositories that have NUMBER {% data variables.product.prodname_code_scanning %} alerts. This qualifier can use `=`, `>` and `<` comparison operators. |
|
||||
| `secret-scanning:NUMBER` | Display repositories that have NUMBER {% data variables.secret-scanning.alerts %}. This qualifier can use `=`, `>` and `<` comparison operators. |
|
||||
| `dependabot:NUMBER` | Display repositories that have NUMBER {% data variables.product.prodname_dependabot_alerts %}. This qualifier can use `=`, `>` and `<` comparison operators. |
|
||||
|
||||
|
||||
## Filter by team
|
||||
@@ -111,7 +111,7 @@ These qualifiers are available in the main summary views.
|
||||
|
||||
| Qualifier | Description |
|
||||
| -------- | -------- |
|
||||
| <code>team:<em>TEAM-NAME</em></code> | Displays repositories that *TEAM-NAME* has admin privileges for. |
|
||||
| `team:TEAM-NAME` | Displays repositories that TEAM-NAME has {% ifversion security-overview-team-write-access -%} write access or {% endif -%} admin access to. |
|
||||
|
||||
## Filter by topic
|
||||
|
||||
@@ -119,7 +119,7 @@ These qualifiers are available in the main summary views.
|
||||
|
||||
| Qualifier | Description |
|
||||
| -------- | -------- |
|
||||
| <code>topic:<em>TOPIC-NAME</em></code> | Displays repositories that are classified with *TOPIC-NAME*. |
|
||||
| `topic:TOPIC-NAME` | Displays repositories that are classified with TOPIC-NAME. |
|
||||
|
||||
{% ifversion security-overview-alert-views %}
|
||||
|
||||
@@ -159,4 +159,3 @@ You can filter the view to show {% data variables.product.prodname_dependabot_al
|
||||
| `secret-type:CUSTOM-PATTERN` | Displays alerts for secrets matching the specified custom pattern. |
|
||||
|
||||
For more information, see "[{% data variables.product.prodname_secret_scanning_caps %} patterns](/code-security/secret-scanning/secret-scanning-patterns)."
|
||||
|
||||
|
||||
@@ -38,7 +38,7 @@ Any files and folders contained in the `/workspaces` directory of your codespace
|
||||
|
||||
If you want to preserve files outside the `/workspaces` directory over a full rebuild, you can create, at the desired location in the container, a symbolic link (symlink) to the persistent directory. For example, in your `/workspaces/.devcontainer` directory, you can create a `config` directory that will be preserved across a rebuild. You can then symlink the `config` directory and its contents as a `postCreateCommand` in your `devcontainer.json` file.
|
||||
|
||||
```json
|
||||
```json
|
||||
{
|
||||
"image": "mcr.microsoft.com/vscode/devcontainers/base:alpine",
|
||||
"postCreateCommand": ".devcontainer/postCreate.sh"
|
||||
@@ -53,4 +53,4 @@ ln -sf $PWD/.devcontainer/config $HOME/config && set +x
|
||||
```
|
||||
|
||||
## Further reading
|
||||
- [Introduction to dev containers](/codespaces/setting-up-your-project-for-codespaces/introduction-to-dev-containers)
|
||||
- [Introduction to dev containers](/codespaces/setting-up-your-project-for-codespaces/adding-a-dev-container-configuration/introduction-to-dev-containers)
|
||||
@@ -16,7 +16,7 @@ redirect_from:
|
||||
|
||||
## Overview of codespace security
|
||||
|
||||
{% data variables.product.prodname_github_codespaces %} is designed to be security hardened by default. Consequently, you will need to ensure that your software development practices do not risk reducing the security posture of your codespace.
|
||||
{% data variables.product.prodname_github_codespaces %} is designed to be security hardened by default. Consequently, you will need to ensure that your software development practices do not risk reducing the security posture of your codespace.
|
||||
|
||||
This guide describes the way {% data variables.product.prodname_github_codespaces %} keeps your development environment secure and provides some of the good practices that will help maintain your security as you work. As with any development tool, remember that you should only open and work within repositories you know and trust.
|
||||
|
||||
@@ -26,7 +26,7 @@ This guide describes the way {% data variables.product.prodname_github_codespace
|
||||
|
||||
#### Isolated virtual machines
|
||||
|
||||
Each codespace is hosted on its own newly-built virtual machine (VM). Two codespaces are never co-located on the same VM.
|
||||
Each codespace is hosted on its own newly-built virtual machine (VM). Two codespaces are never co-located on the same VM.
|
||||
|
||||
Every time you restart a codespace, it's deployed to a new VM with the latest available security updates.
|
||||
|
||||
@@ -36,7 +36,7 @@ Each codespace has its own isolated virtual network. We use firewalls to block i
|
||||
|
||||
### Authentication
|
||||
|
||||
You can connect to a codespace using a web browser or from {% data variables.product.prodname_vscode %}. If you connect from {% data variables.product.prodname_vscode_shortname %}, you are prompted to authenticate with {% data variables.product.product_name %}.
|
||||
You can connect to a codespace using a web browser or from {% data variables.product.prodname_vscode %}. If you connect from {% data variables.product.prodname_vscode_shortname %}, you are prompted to authenticate with {% data variables.product.product_name %}.
|
||||
|
||||
Every time a codespace is created or restarted, it's assigned a new {% data variables.product.company_short %} token with an automatic expiry period. This period allows you to work in the codespace without needing to reauthenticate during a typical working day, but reduces the chance that you will leave a connection open when you stop using the codespace.
|
||||
|
||||
@@ -54,7 +54,7 @@ If you need to allow external access to services running on a codespace, you can
|
||||
|
||||
### Port forwarding
|
||||
|
||||
If you need to connect to a service (such as a development web server) running within your codespace, you can configure port forwarding to make the service available on the internet.
|
||||
If you need to connect to a service (such as a development web server) running within your codespace, you can configure port forwarding to make the service available on the internet.
|
||||
|
||||
Organization owners can restrict the ability to make forward ports available publicly or within the organization. For more information, see "[Restricting the visibility of forwarded ports](/codespaces/managing-codespaces-for-your-organization/restricting-the-visibility-of-forwarded-ports)."
|
||||
|
||||
@@ -72,12 +72,12 @@ You can use the "Ports" panel to configure a port for public or private access,
|
||||
|
||||
## Good security practices for your codespaces
|
||||
|
||||
Codespaces are designed to be security hardened by default. To help maintain this posture, we recommend that you follow good security practices during your development procedures:
|
||||
Codespaces are designed to be security hardened by default. To help maintain this posture, we recommend that you follow good security practices during your development procedures:
|
||||
|
||||
- As with any development tool, remember that you should only open and work within repositories you know and trust.
|
||||
- Before you add new dependencies to the codespace, check whether they are well-maintained, and if they release updates to fix any security vulnerabilities found in their code.
|
||||
|
||||
### Using secrets to access sensitive information
|
||||
### Using secrets to access sensitive information
|
||||
|
||||
Always use encrypted secrets when you want to use sensitive information (such as access tokens) in a codespace. You can access your secrets as environment variables in the codespace, including from the terminal. For example, you can launch a terminal within your codespace and use `echo $SECRET_NAME ` to see the value of a secret.
|
||||
|
||||
@@ -99,17 +99,17 @@ We also further protect you in these scenarios by not injecting any of your [cod
|
||||
|
||||
### Additional good practices
|
||||
|
||||
There are some additional good practices and risks that you should be aware of when using {% data variables.product.prodname_github_codespaces %}.
|
||||
There are some additional good practices and risks that you should be aware of when using {% data variables.product.prodname_github_codespaces %}.
|
||||
|
||||
#### Understanding a repository's devcontainer.json file
|
||||
|
||||
When you create a codespace, if a `devcontainer.json` file is found for your repository, it is parsed and used to configure your codespace. The `devcontainer.json` file can contain powerful features, such as installing third-party extensions and running arbitrary code supplied in a `postCreateCommand`.
|
||||
|
||||
For more information, see "[Introduction to dev containers](/codespaces/setting-up-your-project-for-codespaces/introduction-to-dev-containers)."
|
||||
For more information, see "[Introduction to dev containers](/codespaces/setting-up-your-project-for-codespaces/adding-a-dev-container-configuration/introduction-to-dev-containers)."
|
||||
|
||||
#### Granting access through features
|
||||
|
||||
Certain development features can potentially add risk to your environment. For example, commit signing, secrets injected into environment variables, authenticated registry access, and packages access can all present potential security issues. We recommend that you only grant access to those who need it and adopt a policy of being as restrictive as possible.
|
||||
Certain development features can potentially add risk to your environment. For example, commit signing, secrets injected into environment variables, authenticated registry access, and packages access can all present potential security issues. We recommend that you only grant access to those who need it and adopt a policy of being as restrictive as possible.
|
||||
|
||||
#### Using extensions
|
||||
|
||||
|
||||
@@ -27,7 +27,7 @@ When using any development environment, customizing the settings and tools to yo
|
||||
|
||||
{% data variables.product.prodname_github_codespaces %} personalization applies to any codespace you create.
|
||||
|
||||
Project maintainers can also define a default configuration that applies to every codespace for a repository, created by anyone. For more information, see "[Introduction to dev containers](/codespaces/setting-up-your-project-for-codespaces/introduction-to-dev-containers)."
|
||||
Project maintainers can also define a default configuration that applies to every codespace for a repository, created by anyone. For more information, see "[Introduction to dev containers](/codespaces/setting-up-your-project-for-codespaces/adding-a-dev-container-configuration/introduction-to-dev-containers)."
|
||||
|
||||
## Settings Sync
|
||||
|
||||
|
||||
@@ -73,7 +73,7 @@ If you want to use Git hooks for your codespace, then you should set up hooks us
|
||||
If codespaces for this repository are billable to an organization, or its parent enterprise, a message is displayed below the **Create codespace on BRANCH** button telling you who will pay for the codespace.
|
||||
|
||||
1. Create your codespace, either using the default options, or after configuring advanced options:
|
||||
|
||||
|
||||
* **Use the default options**
|
||||
|
||||
To create a codespace using the default options, click the plus sign ({% octicon "plus" aria-label="The plus icon" %}). Alternatively, if you don't currently have any codespaces for this repository, you can click **Create codespace on BRANCH**.
|
||||
@@ -91,35 +91,35 @@ If you want to use Git hooks for your codespace, then you should set up hooks us
|
||||

|
||||
|
||||
{% note %}
|
||||
|
||||
|
||||
**Notes**
|
||||
|
||||
|
||||
* You can bookmark the options page to give you a quick way to create a codespace for this repository and branch.
|
||||
* The [https://github.com/codespaces/new](https://github.com/codespaces/new) page provides a quick way to create a codespace for any repository and branch. You can get to this page quickly by typing `codespace.new` into your browser's address bar.
|
||||
* For more information about the `devcontainer.json` file, see "[Introduction to dev containers](/codespaces/setting-up-your-project-for-codespaces/introduction-to-dev-containers#devcontainerjson)."
|
||||
* For more information about the `devcontainer.json` file, see "[Introduction to dev containers](/codespaces/setting-up-your-project-for-codespaces/adding-a-dev-container-configuration/introduction-to-dev-containers#devcontainerjson)."
|
||||
* For more information about machine types, see "[Changing the machine type for your codespace](/codespaces/customizing-your-codespace/changing-the-machine-type-for-your-codespace#about-machine-types)."
|
||||
* {% data reusables.codespaces.codespaces-machine-type-availability %}
|
||||
|
||||
|
||||
{% endnote %}
|
||||
|
||||
1. Click **Create codespace**.
|
||||
|
||||
{% endwebui %}
|
||||
|
||||
|
||||
{% vscode %}
|
||||
|
||||
{% data reusables.codespaces.creating-a-codespace-in-vscode %}
|
||||
|
||||
{% endvscode %}
|
||||
|
||||
|
||||
{% cli %}
|
||||
|
||||
{% data reusables.cli.cli-learn-more %}
|
||||
|
||||
To create a new codespace, use the `gh codespace create` subcommand.
|
||||
To create a new codespace, use the `gh codespace create` subcommand.
|
||||
|
||||
```shell
|
||||
gh codespace create
|
||||
gh codespace create
|
||||
```
|
||||
|
||||
You are prompted to choose a repository. If codespaces for this repository are billable to an organization, or its parent enterprise, a message is displayed telling you who will pay for the codespace. You are then prompted to choose a branch, a dev container configuration file (if more than one is available), and a machine type (if more than one is available).
|
||||
@@ -132,7 +132,7 @@ gh codespace create -r OWNER/REPO -b BRANCH --devcontainer-path PATH -m MACHINE-
|
||||
|
||||
In this example, replace `owner/repo` with the repository identifier. Replace `branch` with the name of the branch, or the full SHA hash of the commit, that you want to be initially checked out in the codespace. If you use the `-r` flag without the `b` flag, the codespace is created from the default branch.
|
||||
|
||||
Replace `path` with the path to the dev container configuration file you want to use for the new codespace. If you omit this flag and more than one dev container file is available you will be prompted to choose one from a list. For more information about the dev container configuration file, see "[Introduction to dev containers](/codespaces/setting-up-your-project-for-codespaces/introduction-to-dev-containers)."
|
||||
Replace `path` with the path to the dev container configuration file you want to use for the new codespace. If you omit this flag and more than one dev container file is available you will be prompted to choose one from a list. For more information about the dev container configuration file, see "[Introduction to dev containers](/codespaces/setting-up-your-project-for-codespaces/adding-a-dev-container-configuration/introduction-to-dev-containers)."
|
||||
|
||||
Replace `machine-type` with a valid identifier for an available machine type. Identifiers are strings such as: `basicLinux32gb` and `standardLinux32gb`. The type of machines that are available depends on the repository, your personal account, and your location. If you enter an invalid or unavailable machine type, the available types are shown in the error message. If you omit this flag and more than one machine type is available you will be prompted to choose one from a list.
|
||||
|
||||
@@ -142,4 +142,4 @@ For full details of the options for this command, see [the {% data variables.pro
|
||||
|
||||
## Further reading
|
||||
- "[Opening an existing codespace](/codespaces/developing-in-codespaces/opening-an-existing-codespace)"
|
||||
- "[Adding an 'Open in {% data variables.product.prodname_github_codespaces %}' badge](/codespaces/setting-up-your-project-for-codespaces/adding-a-codespaces-badge)"
|
||||
- "[Adding an 'Open in {% data variables.product.prodname_github_codespaces %}' badge](/codespaces/setting-up-your-project-for-codespaces/setting-up-your-repository/adding-a-codespaces-badge)"
|
||||
|
||||
@@ -23,17 +23,17 @@ If you're starting a new project, you can get started with development work quic
|
||||
|
||||
{% endnote %}
|
||||
|
||||
You can start from a blank template, choose from templates maintained by {% data variables.product.company_short %} for popular technologies such as React or Jupyter Notebook, or launch a codespace from any template repository on {% data variables.product.prodname_dotcom %}. With a blank template, you'll start with an empty directory, with access to cloud-based compute resources and the tools, languages, and runtime environments that come preinstalled with the default codespace image. With other templates, you'll get starter files for the technology you're working with, plus typically some extra files such as a README file, a `.gitignore` file, and dev container configuration files containing some custom environment configuration. For more information on dev containers and the default image, see "[Introduction to dev containers](/codespaces/setting-up-your-project-for-codespaces/introduction-to-dev-containers)."
|
||||
You can start from a blank template, choose from templates maintained by {% data variables.product.company_short %} for popular technologies such as React or Jupyter Notebook, or launch a codespace from any template repository on {% data variables.product.prodname_dotcom %}. With a blank template, you'll start with an empty directory, with access to cloud-based compute resources and the tools, languages, and runtime environments that come preinstalled with the default codespace image. With other templates, you'll get starter files for the technology you're working with, plus typically some extra files such as a README file, a `.gitignore` file, and dev container configuration files containing some custom environment configuration. For more information on dev containers and the default image, see "[Introduction to dev containers](/codespaces/setting-up-your-project-for-codespaces/adding-a-dev-container-configuration/introduction-to-dev-containers)."
|
||||
|
||||
As an example, if you create a codespace from {% data variables.product.company_short %}'s React template, you'll arrive in a workspace containing template files for a simple application, such as `index.js`, `app.js`, and `package.json`. Shortly after the codespace opens, a development server will start up automatically, and you will be able to view the running application in a simple browser tab within the {% data variables.product.prodname_vscode_shortname %} web client.
|
||||
|
||||

|
||||
|
||||
The files and configuration included in templates are defined in template repositories. The template repository is cloned into your codespace when you create the codespace. After that, the link is severed, and your codespace won't be linked to a remote repository until you publish to one.
|
||||
The files and configuration included in templates are defined in template repositories. The template repository is cloned into your codespace when you create the codespace. After that, the link is severed, and your codespace won't be linked to a remote repository until you publish to one.
|
||||
|
||||
{% tip %}
|
||||
|
||||
**Tip:** To help people get started with your framework, library, or other project, you can set up a template repository for use with {% data variables.product.prodname_github_codespaces %}. For more information, see "[Setting up a template repository for {% data variables.product.prodname_github_codespaces %}](/codespaces/setting-up-your-project-for-codespaces/setting-up-a-template-repository-for-github-codespaces)."
|
||||
**Tip:** To help people get started with your framework, library, or other project, you can set up a template repository for use with {% data variables.product.prodname_github_codespaces %}. For more information, see "[Setting up a template repository for {% data variables.product.prodname_github_codespaces %}](/codespaces/setting-up-your-project-for-codespaces/setting-up-your-repository/setting-up-a-template-repository-for-github-codespaces)."
|
||||
|
||||
{% endtip %}
|
||||
|
||||
@@ -48,7 +48,7 @@ Templates maintained by {% data variables.product.company_short %}, including th
|
||||

|
||||
|
||||
1. Under the template you want to launch, click **Use this template**.
|
||||
|
||||
|
||||

|
||||
|
||||
{% data reusables.codespaces.template-codespaces-default-editor %}
|
||||
@@ -58,7 +58,7 @@ Templates maintained by {% data variables.product.company_short %}, including th
|
||||
You can create a codespace from any template repository, then publish your work to a new repository when you are ready. For more information on template repositories, see "[Creating a repository from a template](/repositories/creating-and-managing-repositories/creating-a-repository-from-a-template#about-repository-templates)."
|
||||
|
||||
{% data reusables.repositories.navigate-to-repo %}
|
||||
{% data reusables.codespaces.open-template-in-codespace-step %}
|
||||
{% data reusables.codespaces.use-this-template %}
|
||||
|
||||
{% note %}
|
||||
|
||||
@@ -72,7 +72,7 @@ You can create a codespace from any template repository, then publish your work
|
||||
|
||||
{% data reusables.codespaces.about-publishing-templates %}
|
||||
|
||||
### Publishing from {% data variables.product.prodname_vscode_shortname %}
|
||||
### Publishing from {% data variables.product.prodname_vscode_shortname %}
|
||||
|
||||
{% data reusables.codespaces.publishing-template-codespaces %}
|
||||
|
||||
@@ -82,7 +82,7 @@ When a codespace is published, you have access to a greater range of options to
|
||||
- Allow {% data variables.product.prodname_dotcom %} to automatically use GPG to sign commits you make in your codespace (see "[Managing GPG verification for {% data variables.product.prodname_github_codespaces %}](/codespaces/managing-your-codespaces/managing-gpg-verification-for-github-codespaces)").
|
||||
- Share encrypted secrets with your codespace (see "[Managing encrypted secrets for your codespaces](/codespaces/managing-your-codespaces/managing-encrypted-secrets-for-your-codespaces)").
|
||||
|
||||
### Publishing from {% data variables.product.prodname_dotcom_the_website %}
|
||||
### Publishing from {% data variables.product.prodname_dotcom_the_website %}
|
||||
|
||||
You can publish an unpublished codespace from the "Your codespaces" page on {% data variables.product.prodname_dotcom_the_website %}. This is useful if you want to publish a codespace that you don't currently have open in your browser. If you do this, your work will be preserved in a repository, but there won't be a link between your existing codespace and the new repository. However, you can navigate to the new repository and create a codespace from there, and this codespace will be connected to the repository.
|
||||
|
||||
@@ -99,4 +99,4 @@ You can publish an unpublished codespace from the "Your codespaces" page on {% d
|
||||
|
||||
- "[Creating a codespace for a repository](/codespaces/developing-in-codespaces/creating-a-codespace-for-a-repository)"
|
||||
- "[The codespace lifecycle](/codespaces/getting-started/the-codespace-lifecycle)"
|
||||
- "[Using source control in your codespace](/codespaces/developing-in-codespaces/using-source-control-in-your-codespace)"
|
||||
- "[Using source control in your codespace](/codespaces/developing-in-codespaces/using-source-control-in-your-codespace)"
|
||||
|
||||
@@ -23,7 +23,7 @@ shortTitle: Develop in a codespace
|
||||
|
||||
## About development with {% data variables.product.prodname_github_codespaces %}
|
||||
|
||||
You can develop code in a codespace using your choice of tool:
|
||||
You can develop code in a codespace using your choice of tool:
|
||||
|
||||
* A command shell, via an SSH connection initiated using {% data variables.product.prodname_cli %}.
|
||||
* One of the JetBrains IDEs, via the JetBrains Gateway.
|
||||
@@ -61,7 +61,7 @@ The tabs in this article allow you to switch between information for each of the
|
||||
|
||||
For more information on using {% data variables.product.prodname_vscode_shortname %}, see the [User Interface guide](https://code.visualstudio.com/docs/getstarted/userinterface) in the {% data variables.product.prodname_vscode_shortname %} documentation.
|
||||
|
||||
{% data reusables.codespaces.connect-to-codespace-from-vscode %}
|
||||
{% data reusables.codespaces.connect-to-codespace-from-vscode %}
|
||||
|
||||
For troubleshooting information, see "[Troubleshooting Codespaces clients](/codespaces/troubleshooting/troubleshooting-github-codespaces-clients)."
|
||||
{% data reusables.codespaces.developing-in-vscode %}
|
||||
@@ -102,7 +102,7 @@ For more information about the IntelliJ IDEA user interface, see the [JetBrains
|
||||
|
||||
### Customizing the codespaces for a repository
|
||||
|
||||
You can customize the codespaces that are created for a repository by creating or updating the dev container configuration for the repository. You can do this from within a codespace. After you change a dev container configuration, you can apply the changes to the current codespace by rebuilding the Docker container for the codespace. For more information, see "[Introduction to dev containers](/codespaces/setting-up-your-project-for-codespaces/introduction-to-dev-containers)."
|
||||
You can customize the codespaces that are created for a repository by creating or updating the dev container configuration for the repository. You can do this from within a codespace. After you change a dev container configuration, you can apply the changes to the current codespace by rebuilding the Docker container for the codespace. For more information, see "[Introduction to dev containers](/codespaces/setting-up-your-project-for-codespaces/adding-a-dev-container-configuration/introduction-to-dev-containers)."
|
||||
|
||||
### Personalizing your codespace
|
||||
|
||||
|
||||
@@ -17,7 +17,7 @@ This guide introduces you to machine learning with {% data variables.product.pro
|
||||
|
||||
## Building a simple image classifier
|
||||
|
||||
We'll use a Jupyter notebook to build a simple image classifier.
|
||||
We'll use a Jupyter notebook to build a simple image classifier.
|
||||
|
||||
Jupyter notebooks are sets of cells that you can execute one after another. The notebook we'll use includes a number of cells that build an image classifier using [PyTorch](https://pytorch.org/). Each cell is a different phase of that process: download a dataset, set up a neural network, train a model, and then test that model.
|
||||
|
||||
@@ -26,13 +26,13 @@ We'll run all of the cells, in sequence, to perform all phases of building the i
|
||||
### Creating a codespace
|
||||
|
||||
1. Go to the [github/codespaces-jupyter](https://github.com/github/codespaces-jupyter) template repository.
|
||||
{% data reusables.codespaces.open-template-in-codespace-step %}
|
||||
{% data reusables.codespaces.use-this-template %}
|
||||
|
||||
A codespace for this template will open in a web-based version of {% data variables.product.prodname_vscode %}.
|
||||
|
||||
### Opening the image classifier notebook
|
||||
### Opening the image classifier notebook
|
||||
|
||||
The default container image that's used by {% data variables.product.prodname_github_codespaces %} includes a set of machine learning libraries that are preinstalled in your codespace. For example, Numpy, pandas, SciPy, Matplotlib, seaborn, scikit-learn, Keras, PyTorch, Requests, and Plotly. For more information about the default image, see "[Introduction to dev containers](/codespaces/setting-up-your-project-for-codespaces/introduction-to-dev-containers#using-the-default-dev-container-configuration)" and [the `devcontainers/images` repository](https://github.com/devcontainers/images/tree/main/src/universal).
|
||||
The default container image that's used by {% data variables.product.prodname_github_codespaces %} includes a set of machine learning libraries that are preinstalled in your codespace. For example, Numpy, pandas, SciPy, Matplotlib, seaborn, scikit-learn, Keras, PyTorch, Requests, and Plotly. For more information about the default image, see "[Introduction to dev containers](/codespaces/setting-up-your-project-for-codespaces/adding-a-dev-container-configuration/introduction-to-dev-containers#using-the-default-dev-container-configuration)" and [the `devcontainers/images` repository](https://github.com/devcontainers/images/tree/main/src/universal).
|
||||
|
||||
1. In the {% data variables.product.prodname_vscode_shortname %} editor, close any "Get Started" tabs that are displayed.
|
||||
1. Open the `notebooks/image-classifier.ipynb` notebook file.
|
||||
@@ -51,7 +51,7 @@ The image classifier notebook contains all the code you need to download a datas
|
||||
|
||||
## Configuring NVIDIA CUDA for your codespace
|
||||
|
||||
Some software requires you to install NVIDIA CUDA to use your codespace’s GPU. Where this is the case, you can create your own custom configuration, by using a `devcontainer.json` file, and specify that CUDA should be installed. For more information on creating a custom configuration, see "[Introduction to dev containers](/codespaces/setting-up-your-project-for-codespaces/introduction-to-dev-containers#creating-a-custom-dev-container-configuration)."
|
||||
Some software requires you to install NVIDIA CUDA to use your codespace’s GPU. Where this is the case, you can create your own custom configuration, by using a `devcontainer.json` file, and specify that CUDA should be installed. For more information on creating a custom configuration, see "[Introduction to dev containers](/codespaces/setting-up-your-project-for-codespaces/adding-a-dev-container-configuration/introduction-to-dev-containers#creating-a-custom-dev-container-configuration)."
|
||||
|
||||
{% note %}
|
||||
|
||||
@@ -64,7 +64,7 @@ Some software requires you to install NVIDIA CUDA to use your codespace’s GPU.
|
||||
|
||||
```json{:copy}
|
||||
"features": {
|
||||
"ghcr.io/devcontainers/features/nvidia-cuda:1": {
|
||||
"ghcr.io/devcontainers/features/nvidia-cuda:1": {
|
||||
"installCudnn": true
|
||||
}
|
||||
}
|
||||
@@ -85,7 +85,7 @@ Some software requires you to install NVIDIA CUDA to use your codespace’s GPU.
|
||||
}
|
||||
},
|
||||
"features": {
|
||||
"ghcr.io/devcontainers/features/nvidia-cuda:1": {
|
||||
"ghcr.io/devcontainers/features/nvidia-cuda:1": {
|
||||
"installCudnn": true
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
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 %}'
|
||||
intro: 'Create a codespace to get started with developing your project inside a dedicated cloud environment. You can use your codespace in the browser or in a choice of code editors.'
|
||||
versions:
|
||||
fpt: '*'
|
||||
ghec: '*'
|
||||
@@ -23,4 +23,3 @@ children:
|
||||
- /using-github-codespaces-in-your-jetbrains-ide
|
||||
- /using-github-codespaces-with-github-cli
|
||||
---
|
||||
|
||||
|
||||
@@ -30,8 +30,8 @@ After installing the JetBrains Gateway, you can set JetBrains as your default ed
|
||||
|
||||
The basic process behind using a codespace in your JetBrains IDE is as follows.
|
||||
|
||||
* In the JetBrains Gateway application you select one of your active or stopped codespaces.
|
||||
* You then choose which JetBrains IDE you want to use.
|
||||
* In the JetBrains Gateway application you select one of your active or stopped codespaces.
|
||||
* You then choose which JetBrains IDE you want to use.
|
||||
* The selected JetBrains IDE is then downloaded to the remote virtual machine that hosts your codespace and source code.
|
||||
* The JetBrains thin client application is then downloaded to your local machine and started.
|
||||
* The client application connects to the full backend IDE.
|
||||
@@ -43,7 +43,7 @@ To work in a codespace in a JetBrains IDE you need:
|
||||
|
||||
* A valid JetBrains license
|
||||
* The JetBrains Gateway application
|
||||
* {% data variables.product.prodname_cli %} version 2.18.0 or later
|
||||
* {% data variables.product.prodname_cli %} version 2.18.0 or later
|
||||
* An existing codespace that's running an SSH server
|
||||
|
||||
### JetBrains license
|
||||
@@ -78,7 +78,7 @@ You must have an existing codespace to connect to. {% data reusables.codespaces.
|
||||
|
||||
{% data reusables.codespaces.ssh-server-installed %}
|
||||
|
||||
For more information about the `devcontainer.json` file and the default container image, see "[Introduction to dev containers](/codespaces/setting-up-your-project-for-codespaces/introduction-to-dev-containers)."
|
||||
For more information about the `devcontainer.json` file and the default container image, see "[Introduction to dev containers](/codespaces/setting-up-your-project-for-codespaces/adding-a-dev-container-configuration/introduction-to-dev-containers)."
|
||||
|
||||
{% note %}
|
||||
|
||||
@@ -88,7 +88,7 @@ For more information about the `devcontainer.json` file and the default containe
|
||||
|
||||
## Setting up the JetBrains Gateway
|
||||
|
||||
The first time you use JetBrains Gateway for {% data variables.product.prodname_github_codespaces %}, you must install the {% data variables.product.prodname_codespaces %} plugin. You must also allow the JetBrains Gateway to access {% data variables.product.prodname_dotcom_the_website %} using your {% data variables.product.prodname_dotcom %} account.
|
||||
The first time you use JetBrains Gateway for {% data variables.product.prodname_github_codespaces %}, you must install the {% data variables.product.prodname_codespaces %} plugin. You must also allow the JetBrains Gateway to access {% data variables.product.prodname_dotcom_the_website %} using your {% data variables.product.prodname_dotcom %} account.
|
||||
|
||||
1. Open the JetBrains Gateway application.
|
||||
1. Under **Install More Providers** click the **Install** link for {% data variables.product.prodname_github_codespaces %}.
|
||||
@@ -107,7 +107,7 @@ The first time you use JetBrains Gateway for {% data variables.product.prodname_
|
||||
|
||||

|
||||
|
||||
1. If you are not currently signed in to {% data variables.product.prodname_dotcom %}, the sign-in page is displayed.
|
||||
1. If you are not currently signed in to {% data variables.product.prodname_dotcom %}, the sign-in page is displayed.
|
||||
* Enter your details and click **Sign in**.
|
||||
* Verify your authentication, for example by entering a two-factor authentication code.
|
||||
1. On the "Device activation" page, paste the copied code and click **Continue**.
|
||||
@@ -119,10 +119,10 @@ The first time you use JetBrains Gateway for {% data variables.product.prodname_
|
||||
|
||||
{% data reusables.codespaces.opening-codespace-in-jetbrains %}
|
||||
|
||||
The first time you connect to a codespace, the backend IDE will be downloaded to the remote machine. This may take a few minutes. The next time you connect to the same codespace this step won't be necessary, making the connection process quicker.
|
||||
The first time you connect to a codespace, the backend IDE will be downloaded to the remote machine. This may take a few minutes. The next time you connect to the same codespace this step won't be necessary, making the connection process quicker.
|
||||
|
||||
The backend IDE is then started. Again, this step will not be required in future if you are reconnecting to a backend IDE that you have left running.
|
||||
|
||||
The backend IDE is then started. Again, this step will not be required in future if you are reconnecting to a backend IDE that you have left running.
|
||||
|
||||
The client application is then launched.
|
||||
|
||||
## Further reading
|
||||
|
||||
@@ -15,7 +15,7 @@ redirect_from:
|
||||
- /codespaces/developing-in-codespaces/using-codespaces-with-github-cli
|
||||
---
|
||||
|
||||
## About {% data variables.product.prodname_cli %}
|
||||
## About {% data variables.product.prodname_cli %}
|
||||
|
||||
{% data reusables.cli.about-cli %} For more information, see "[About {% data variables.product.prodname_cli %}](/github-cli/github-cli/about-github-cli)."
|
||||
|
||||
@@ -37,14 +37,14 @@ You can work with {% data variables.product.prodname_github_codespaces %} in the
|
||||
## Installing {% data variables.product.prodname_cli %}
|
||||
|
||||
{% data reusables.cli.cli-installation %}
|
||||
|
||||
|
||||
## Using {% data variables.product.prodname_cli %}
|
||||
|
||||
If you have not already done so, run `gh auth login` to authenticate with your {% data variables.product.prodname_dotcom %} account.
|
||||
If you have not already done so, run `gh auth login` to authenticate with your {% data variables.product.prodname_dotcom %} account.
|
||||
|
||||
To use `gh` to work with {% data variables.product.prodname_github_codespaces %}, type `gh codespace SUBCOMMAND` or its alias `gh cs SUBCOMMAND`.
|
||||
|
||||
As an example of a series of commands you might use to work with {% data variables.product.prodname_github_codespaces %}, you could:
|
||||
As an example of a series of commands you might use to work with {% data variables.product.prodname_github_codespaces %}, you could:
|
||||
|
||||
* List your current codespaces, to check whether you have a codespace for a particular repository:<br>
|
||||
`gh codespace list`
|
||||
@@ -121,7 +121,7 @@ gh codespace ssh -c CODESPACE-NAME
|
||||
|
||||
**Note**: {% data reusables.codespaces.ssh-server-installed %}
|
||||
|
||||
<br>For more information about the `devcontainer.json` file and the default container image, see "[Introduction to dev containers](/codespaces/setting-up-your-project-for-codespaces/introduction-to-dev-containers)."
|
||||
<br>For more information about the `devcontainer.json` file and the default container image, see "[Introduction to dev containers](/codespaces/setting-up-your-project-for-codespaces/adding-a-dev-container-configuration/introduction-to-dev-containers)."
|
||||
|
||||
{% endnote %}
|
||||
|
||||
@@ -221,12 +221,12 @@ gh codespace logs -c CODESPACE-NAME
|
||||
|
||||
For more information about the creation log, see "[{% data variables.product.prodname_github_codespaces %} logs](/codespaces/troubleshooting/github-codespaces-logs#creation-logs)."
|
||||
|
||||
### Access remote resources
|
||||
### Access remote resources
|
||||
You can use the {% data variables.product.prodname_cli %} extension to create a bridge between a codespace and your local machine, so that the codespace can access any remote resource that is accessible from your machine. For more information on using the extension, see "[Using {% data variables.product.prodname_cli %} to access remote resources](https://github.com/github/gh-net#codespaces-network-bridge)."
|
||||
|
||||
{% note %}
|
||||
|
||||
**Note**: The {% data variables.product.prodname_cli %} extension is currently in beta and subject to change.
|
||||
**Note**: The {% data variables.product.prodname_cli %} extension is currently in beta and subject to change.
|
||||
|
||||
{% endnote %}
|
||||
|
||||
|
||||
@@ -23,8 +23,8 @@ There are a number of entry points to create a codespace.
|
||||
- From a commit in a repository's history to investigate a bug at a specific point in time
|
||||
|
||||
{% data reusables.codespaces.ways-to-create-a-codespace %}
|
||||
|
||||
Your codespace can be ephemeral if you need to test something or you can return to the same codespace to work on long-running feature work.
|
||||
|
||||
Your codespace can be ephemeral if you need to test something or you can return to the same codespace to work on long-running feature work.
|
||||
|
||||
For more information, see "[Creating a codespace for a repository](/codespaces/developing-in-codespaces/creating-a-codespace-for-a-repository)," "[Creating a codespace from a template](/codespaces/developing-in-codespaces/creating-a-codespace-from-a-template)," and "[Opening an existing codespace](/codespaces/developing-in-codespaces/opening-an-existing-codespace)."
|
||||
|
||||
@@ -44,7 +44,7 @@ When you create a codespace, a [shallow clone](https://github.blog/2020-12-21-ge
|
||||
|
||||
### Step 2: Container is created
|
||||
|
||||
{% data variables.product.prodname_github_codespaces %} uses a container as the development environment. This container is created based on configurations that you can define in a `devcontainer.json` file and, optionally, a Dockerfile. If you create a codespace from {% data variables.product.company_short %}'s blank template, or from a repository with no `devcontainer.json` file, {% data variables.product.prodname_github_codespaces %} uses a default image, which has many languages and runtimes available. For more information, see "[Introduction to dev containers](/codespaces/setting-up-your-project-for-codespaces/introduction-to-dev-containers)." For details of what the default image contains, see the [`microsoft/vscode-dev-containers`](https://github.com/microsoft/vscode-dev-containers/tree/main/containers/codespaces-linux) repository.
|
||||
{% data variables.product.prodname_github_codespaces %} uses a container as the development environment. This container is created based on configurations that you can define in a `devcontainer.json` file and, optionally, a Dockerfile. If you create a codespace from {% data variables.product.company_short %}'s blank template, or from a repository with no `devcontainer.json` file, {% data variables.product.prodname_github_codespaces %} uses a default image, which has many languages and runtimes available. For more information, see "[Introduction to dev containers](/codespaces/setting-up-your-project-for-codespaces/adding-a-dev-container-configuration/introduction-to-dev-containers)." For details of what the default image contains, see the [`microsoft/vscode-dev-containers`](https://github.com/microsoft/vscode-dev-containers/tree/main/containers/codespaces-linux) repository.
|
||||
|
||||
{% note %}
|
||||
|
||||
@@ -69,7 +69,7 @@ Once you are connected to your codespace, your automated setup may continue to b
|
||||
|
||||
If you want to use Git hooks in your codespace, set up hooks using the [`devcontainer.json` lifecycle scripts](https://code.visualstudio.com/docs/remote/devcontainerjson-reference#_lifecycle-scripts), such as `postCreateCommand`. For more information, see the [`devcontainer.json` reference](https://code.visualstudio.com/docs/remote/devcontainerjson-reference#_devcontainerjson-properties) in the {% data variables.product.prodname_vscode_shortname %} documentation.
|
||||
|
||||
If you have a public dotfiles repository for {% data variables.product.prodname_github_codespaces %}, you can enable it for use with new codespaces. When enabled, your dotfiles will be cloned to the container and the install script will be invoked. For more information, see "[Personalizing {% data variables.product.prodname_github_codespaces %} for your account](/codespaces/customizing-your-codespace/personalizing-github-codespaces-for-your-account#dotfiles)."
|
||||
If you have a public dotfiles repository for {% data variables.product.prodname_github_codespaces %}, you can enable it for use with new codespaces. When enabled, your dotfiles will be cloned to the container and the install script will be invoked. For more information, see "[Personalizing {% data variables.product.prodname_github_codespaces %} for your account](/codespaces/customizing-your-codespace/personalizing-github-codespaces-for-your-account#dotfiles)."
|
||||
|
||||
Finally, if you created the codespace from a repository, the entire history of the repository is copied down with a full clone. If you created the codespace from a template, the full history of the template repository is not preserved; instead, unless you are using the blank template, you will start with an initial commit for the contents of the template repository.
|
||||
|
||||
@@ -80,11 +80,11 @@ During post-creation setup you'll still be able to use the integrated terminal a
|
||||
|
||||
Save changes to files in the normal way, depending on the editor you are using.
|
||||
|
||||
If you work on codespaces in {% data variables.product.prodname_vscode %}, you can enable [Auto Save](https://code.visualstudio.com/docs/editor/codebasics#_save-auto-save) to ensure that your changes are always saved.
|
||||
If you work on codespaces in {% data variables.product.prodname_vscode %}, you can enable [Auto Save](https://code.visualstudio.com/docs/editor/codebasics#_save-auto-save) to ensure that your changes are always saved.
|
||||
|
||||
### Closing or stopping your codespace
|
||||
|
||||
Your codespace will keep running while you are using it, but will time out after a period of inactivity. File changes from the editor and terminal output are counted as activity, so your codespace will not time out if terminal output is continuing. The default inactivity timeout period is 30 minutes. You can define your personal timeout setting for codespaces you create, but this may be overruled by an organization timeout policy. For more information, see "[Setting your timeout period for Codespaces](/codespaces/customizing-your-codespace/setting-your-timeout-period-for-codespaces)."
|
||||
Your codespace will keep running while you are using it, but will time out after a period of inactivity. File changes from the editor and terminal output are counted as activity, so your codespace will not time out if terminal output is continuing. The default inactivity timeout period is 30 minutes. You can define your personal timeout setting for codespaces you create, but this may be overruled by an organization timeout policy. For more information, see "[Setting your timeout period for Codespaces](/codespaces/customizing-your-codespace/setting-your-timeout-period-for-codespaces)."
|
||||
|
||||
If a codespace times out it will stop running, but you can restart it from the browser tab (if you were using the codespace in the browser), from within {% data variables.product.prodname_vscode_shortname %}, or from your list of codespaces at [https://github.com/codespaces](https://github.com/codespaces).
|
||||
|
||||
@@ -95,7 +95,7 @@ To stop your codespace you can
|
||||
* In the JetBrains client, click the stop button at the top of the {% data variables.product.prodname_github_codespaces %} tool window. For more information, see the "JetBrains IDEs" tab of "[Stopping and starting a codespace](/codespaces/developing-in-codespaces/stopping-and-starting-a-codespace)."
|
||||
* In a terminal window: use the {% data variables.product.prodname_cli %} command `gh codespace stop`. For more information, see "[Using {% data variables.product.prodname_github_codespaces %} with {% data variables.product.prodname_cli %}](/codespaces/developing-in-codespaces/using-github-codespaces-with-github-cli#gh-commands-for-github-codespaces)."
|
||||
|
||||
If you exit your codespace without running the stop command (for example, by closing the browser tab), or if you leave the codespace running without interaction, the codespace and its running processes will continue for the duration of the inactivity timeout period.
|
||||
If you exit your codespace without running the stop command (for example, by closing the browser tab), or if you leave the codespace running without interaction, the codespace and its running processes will continue for the duration of the inactivity timeout period.
|
||||
|
||||
When you close or stop your codespace, all uncommitted changes are preserved until you connect to the codespace again.
|
||||
|
||||
@@ -137,7 +137,7 @@ You can add plugins and extensions within a codespace to personalize your experi
|
||||
|
||||
### {% data variables.product.prodname_vscode_shortname %} extensions
|
||||
|
||||
If you work on your codespaces in the {% data variables.product.prodname_vscode_shortname %} desktop application, or the web client, you can add any extensions you need from the {% data variables.product.prodname_vscode_marketplace %}. For information on how extensions run in {% data variables.product.prodname_github_codespaces %}, see [Supporting Remote Development and {% data variables.product.prodname_github_codespaces %}](https://code.visualstudio.com/api/advanced-topics/remote-extensions) in the {% data variables.product.prodname_vscode_shortname %} documentation.
|
||||
If you work on your codespaces in the {% data variables.product.prodname_vscode_shortname %} desktop application, or the web client, you can add any extensions you need from the {% data variables.product.prodname_vscode_marketplace %}. For information on how extensions run in {% data variables.product.prodname_github_codespaces %}, see [Supporting Remote Development and {% data variables.product.prodname_github_codespaces %}](https://code.visualstudio.com/api/advanced-topics/remote-extensions) in the {% data variables.product.prodname_vscode_shortname %} documentation.
|
||||
|
||||
If you already use {% data variables.product.prodname_vscode_shortname %}, you can use [Settings Sync](https://code.visualstudio.com/docs/editor/settings-sync) to automatically sync extensions, settings, themes, and keyboard shortcuts between your local instance and any codespaces you create.
|
||||
|
||||
@@ -146,7 +146,7 @@ If you already use {% data variables.product.prodname_vscode_shortname %}, you c
|
||||
If you work on your codespaces in a JetBrains IDE, you can add plugins from the JetBrains Marketplace.
|
||||
|
||||
1. Click **JetBrains Client**, then click **Preferences**.
|
||||
1. In the Preferences dialog box, click either **Plugins On Host** to install a plugin in the full JetBrains IDE that's running remotely, or **Plugins** to install a plugin on the local client, for example to change the user interface theme.
|
||||
1. In the Preferences dialog box, click either **Plugins On Host** to install a plugin in the full JetBrains IDE that's running remotely, or **Plugins** to install a plugin on the local client, for example to change the user interface theme.
|
||||
1. Click the **Marketplace** tab.
|
||||
|
||||

|
||||
@@ -157,5 +157,5 @@ If you work on your codespaces in a JetBrains IDE, you can add plugins from the
|
||||
|
||||
- "[Enabling {% data variables.product.prodname_github_codespaces %} for your organization](/codespaces/managing-codespaces-for-your-organization/enabling-github-codespaces-for-your-organization)"
|
||||
- "[Managing the cost of {% data variables.product.prodname_github_codespaces %} in your organization](/codespaces/managing-codespaces-for-your-organization/managing-the-cost-of-github-codespaces-in-your-organization)"
|
||||
- "[Add a dev container configuration to your repository](/codespaces/setting-up-your-project-for-codespaces/setting-up-your-project-for-codespaces)"
|
||||
- "[Adding a dev container configuration to your repository](/codespaces/setting-up-your-project-for-codespaces/adding-a-dev-container-configuration)"
|
||||
- "[The codespace lifecycle](/codespaces/getting-started/the-codespace-lifecycle)"
|
||||
|
||||
@@ -1,13 +1,14 @@
|
||||
---
|
||||
title: 'Getting started with {% data variables.product.prodname_github_codespaces %}'
|
||||
shortTitle: Getting started
|
||||
intro: 'Learn how to get started with {% data variables.product.prodname_github_codespaces %}, including set up and configuration for specific languages.'
|
||||
intro: 'Learn how to get started with {% data variables.product.prodname_github_codespaces %}, then find out more about how a codespace works.'
|
||||
versions:
|
||||
fpt: '*'
|
||||
ghec: '*'
|
||||
redirect_from:
|
||||
- /codespaces/getting-started-with-codespaces
|
||||
children:
|
||||
- /quickstart
|
||||
- /the-codespace-lifecycle
|
||||
- /deep-dive
|
||||
---
|
||||
|
||||
|
||||
@@ -24,19 +24,19 @@ For more information on exactly how {% data variables.product.prodname_github_co
|
||||
## Creating your codespace
|
||||
|
||||
1. Navigate to the [github/haikus-for-codespaces](https://github.com/github/haikus-for-codespaces) template repository.
|
||||
{% data reusables.codespaces.open-template-in-codespace-step %}
|
||||
{% data reusables.codespaces.use-this-template %}
|
||||
|
||||
## Running the application
|
||||
|
||||
Once your codespace is created, the template repository will be automatically cloned into it. Now you can run the application and launch it in a browser.
|
||||
|
||||
1. When the terminal becomes available, enter the command `npm run dev`. This example uses a Node.js project, and this command runs the script labeled "dev" in the `package.json` file, which starts up the web application defined in the sample repository.
|
||||
|
||||
|
||||

|
||||
|
||||
If you're following along with a different application type, enter the corresponding start command for that project.
|
||||
|
||||
2. When your application starts, the codespace recognizes the port the application is running on and displays a prompt to let you know it has been forwarded.
|
||||
2. When your application starts, the codespace recognizes the port the application is running on and displays a prompt to let you know it has been forwarded.
|
||||
|
||||

|
||||
|
||||
@@ -49,7 +49,7 @@ Once your codespace is created, the template repository will be automatically cl
|
||||
2. Edit the `text` field of the first haiku to personalize the application with your own haiku.
|
||||
|
||||
3. Go back to the running application tab in your browser and refresh to see your changes.
|
||||
|
||||
|
||||
{% octicon "light-bulb" aria-label="The lightbulb icon" %} If you've closed the tab, open the Ports panel and click the **Open in browser** icon for the running port.
|
||||
|
||||

|
||||
@@ -68,16 +68,16 @@ Now that you've made a few changes, you can use the integrated terminal or the s
|
||||

|
||||
|
||||
3. Click **Publish Branch**.
|
||||
|
||||
|
||||

|
||||
|
||||
4. In the "Repository Name" dropdown, type a name for your new repository, then select **Publish to {% data variables.product.company_short %} private repository** or **Publish to {% data variables.product.company_short %} public repository**.
|
||||
|
||||
|
||||

|
||||
|
||||
The owner of the new repository will be the {% data variables.product.prodname_dotcom %} account with which you created the codespace.
|
||||
5. In the pop-up that appears in the lower right corner of the editor, click **Open on {% data variables.product.company_short %}** to view the new repository on {% data variables.product.prodname_dotcom_the_website %}. In the new repository, view the `haikus.json` file and check that the change you made in your codespace has been successfully pushed to the repository.
|
||||
|
||||
|
||||

|
||||
|
||||
## Personalizing with an extension
|
||||
@@ -102,8 +102,8 @@ You can enable Settings Sync to sync extensions and other settings across device
|
||||
You've successfully created, personalized, and run your first application within a codespace but there's so much more to explore! Here are some helpful resources for taking your next steps with {% data variables.product.prodname_github_codespaces %}.
|
||||
|
||||
* "[Deep dive](/codespaces/getting-started/deep-dive)": This quickstart presented some of the features of {% data variables.product.prodname_github_codespaces %}. The deep dive looks at these areas from a technical standpoint.
|
||||
* "[Add a dev container configuration to your repository](/codespaces/setting-up-your-project-for-codespaces/setting-up-your-project-for-codespaces)": These guides provide information on setting up your repository to use {% data variables.product.prodname_github_codespaces %} with specific languages.
|
||||
* "[Introduction to dev containers](/codespaces/setting-up-your-project-for-codespaces/introduction-to-dev-containers)": This guide provides details on creating a custom configuration for {% data variables.product.prodname_codespaces %} for your project.
|
||||
* "[Adding a dev container configuration to your repository](/codespaces/setting-up-your-project-for-codespaces/adding-a-dev-container-configuration)": These guides provide information on setting up your repository to use {% data variables.product.prodname_github_codespaces %} with specific languages.
|
||||
* "[Introduction to dev containers](/codespaces/setting-up-your-project-for-codespaces/adding-a-dev-container-configuration/introduction-to-dev-containers)": This guide provides details on creating a custom configuration for {% data variables.product.prodname_codespaces %} for your project.
|
||||
|
||||
## Further reading
|
||||
|
||||
|
||||
@@ -23,7 +23,7 @@ When you want to work on a project, you can choose to create a new codespace or
|
||||
|
||||
{% data reusables.codespaces.max-number-codespaces %} Similarly, if you reach the maximum number of active codespaces and you try to start another, you are prompted to stop one of your active codespaces.
|
||||
|
||||
If you choose to create a new codespace each time you work on a project, you should regularly push your changes so that any new commits are on {% data variables.product.prodname_dotcom %}. If you choose to use a long-running codespace for your project, you should pull from your repository's default branch each time you start working in your codespace so that your environment has the latest commits. This workflow is very similar to if you were working with a project on your local machine.
|
||||
If you choose to create a new codespace each time you work on a project, you should regularly push your changes so that any new commits are on {% data variables.product.prodname_dotcom %}. If you choose to use a long-running codespace for your project, you should pull from your repository's default branch each time you start working in your codespace so that your environment has the latest commits. This workflow is very similar to if you were working with a project on your local machine.
|
||||
|
||||
{% data reusables.codespaces.prebuilds-crossreference %}
|
||||
|
||||
@@ -43,7 +43,7 @@ When a codespace times out, your data is preserved from the last time your chang
|
||||
|
||||
You can rebuild your codespace to implement changes to your dev container configuration. For most uses, you can create a new codespace as an alternative to rebuilding a codespace. By default, when you rebuild your codespace, {% data variables.product.prodname_github_codespaces %} will reuse images from your cache to speed up the rebuild process. Alternatively, you can perform a full rebuild, which clears your cache and rebuilds the container with fresh images.
|
||||
|
||||
For more information, see "[Introduction to dev containers](/codespaces/setting-up-your-project-for-codespaces/introduction-to-dev-containers#applying-configuration-changes-to-a-codespace)" and "[Performing a full rebuild of a container](/codespaces/codespaces-reference/performing-a-full-rebuild-of-a-container)."
|
||||
For more information, see "[Introduction to dev containers](/codespaces/setting-up-your-project-for-codespaces/adding-a-dev-container-configuration/introduction-to-dev-containers#applying-configuration-changes-to-a-codespace)" and "[Performing a full rebuild of a container](/codespaces/codespaces-reference/performing-a-full-rebuild-of-a-container)."
|
||||
|
||||
## Stopping a codespace
|
||||
|
||||
|
||||
@@ -10,14 +10,16 @@ versions:
|
||||
includeGuides:
|
||||
- /codespaces/getting-started/quickstart
|
||||
- /codespaces/getting-started/deep-dive
|
||||
- /codespaces/setting-up-your-project-for-codespaces/setting-up-your-nodejs-project-for-codespaces
|
||||
- /codespaces/setting-up-your-project-for-codespaces/setting-up-your-python-project-for-codespaces
|
||||
- /codespaces/setting-up-your-project-for-codespaces/setting-up-your-dotnet-project-for-codespaces
|
||||
- /codespaces/setting-up-your-project-for-codespaces/setting-up-your-java-project-for-codespaces
|
||||
- /codespaces/setting-up-your-project-for-codespaces/setting-a-minimum-specification-for-codespace-machines
|
||||
- /codespaces/setting-up-your-project-for-codespaces/automatically-opening-files-in-the-codespaces-for-a-repository
|
||||
- /codespaces/setting-up-your-project-for-codespaces/adding-a-codespaces-badge
|
||||
- /codespaces/setting-up-your-project-for-codespaces/introduction-to-dev-containers
|
||||
- /codespaces/setting-up-your-project-for-codespaces/adding-a-dev-container-configuration/introduction-to-dev-containers
|
||||
- /codespaces/setting-up-your-project-for-codespaces/adding-a-dev-container-configuration/setting-up-your-nodejs-project-for-codespaces
|
||||
- /codespaces/setting-up-your-project-for-codespaces/adding-a-dev-container-configuration/setting-up-your-python-project-for-codespaces
|
||||
- /codespaces/setting-up-your-project-for-codespaces/adding-a-dev-container-configuration/setting-up-your-dotnet-project-for-codespaces
|
||||
- /codespaces/setting-up-your-project-for-codespaces/adding-a-dev-container-configuration/setting-up-your-java-project-for-codespaces
|
||||
- /codespaces/setting-up-your-project-for-codespaces/configuring-dev-containers/setting-a-minimum-specification-for-codespace-machines
|
||||
- /codespaces/setting-up-your-project-for-codespaces/configuring-dev-containers/adding-features-to-a-devcontainer-file
|
||||
- /codespaces/setting-up-your-project-for-codespaces/configuring-dev-containers/automatically-opening-files-in-the-codespaces-for-a-repository
|
||||
- /codespaces/setting-up-your-project-for-codespaces/setting-up-your-repository/adding-a-codespaces-badge
|
||||
- /codespaces/setting-up-your-project-for-codespaces/setting-up-your-repository/setting-up-a-template-repository-for-github-codespaces
|
||||
- /codespaces/setting-up-your-codespace/personalizing-codespaces-for-your-account
|
||||
- /codespaces/developing-in-codespaces/creating-a-codespace-for-a-repository
|
||||
- /codespaces/developing-in-codespaces/creating-a-codespace-from-a-template
|
||||
@@ -57,4 +59,3 @@ includeGuides:
|
||||
- /codespaces/codespaces-reference/disaster-recovery-for-codespaces
|
||||
- /codespaces/codespaces-reference/security-in-codespaces
|
||||
---
|
||||
|
||||
|
||||
@@ -13,7 +13,7 @@ topics:
|
||||
|
||||
## Overview
|
||||
|
||||
Typically, when you create a codespace you are offered a choice of specifications for the machine that will run your codespace. You can choose the machine type that best suits your needs. For more information, see "[Creating a codespace for a repository](/codespaces/developing-in-codespaces/creating-a-codespace-for-a-repository#creating-a-codespace-for-a-repository)."
|
||||
Typically, when you create a codespace you are offered a choice of specifications for the machine that will run your codespace. You can choose the machine type that best suits your needs. For more information, see "[Creating a codespace for a repository](/codespaces/developing-in-codespaces/creating-a-codespace-for-a-repository#creating-a-codespace-for-a-repository)."
|
||||
|
||||
If you pay for using {% data variables.product.prodname_github_codespaces %} then your choice of machine type will affect how much your are billed. The compute cost for a codespace is proportional to the number of processor cores in the machine type you choose. For example, the compute cost of using a codespace for an hour on a 16-core machine is eight times greater than a 2-core machine. For more information about pricing, see "[About billing for {% data variables.product.prodname_github_codespaces %}](/billing/managing-billing-for-github-codespaces/about-billing-for-github-codespaces)."
|
||||
|
||||
@@ -27,7 +27,7 @@ If you remove higher specification machine types that are required by the {% dat
|
||||
|
||||
{% note %}
|
||||
|
||||
**Note**: Anyone who can edit the `devcontainer.json` configuration file in a repository can set a minimum specification for machines that can be used for codespaces for that repository. For more information, see "[Setting a minimum specification for codespace machines](/codespaces/setting-up-your-project-for-codespaces/setting-a-minimum-specification-for-codespace-machines)."
|
||||
**Note**: Anyone who can edit the `devcontainer.json` configuration file in a repository can set a minimum specification for machines that can be used for codespaces for that repository. For more information, see "[Setting a minimum specification for codespace machines](/codespaces/setting-up-your-project-for-codespaces/configuring-dev-containers/setting-a-minimum-specification-for-codespace-machines)."
|
||||
|
||||
{% endnote %}
|
||||
|
||||
@@ -78,7 +78,7 @@ You can edit an existing policy. For example, you may want to add or remove cons
|
||||
1. Click the pencil icon ({% octicon "pencil" aria-label="The edit icon" %}) beside the "Machine types" constraint.
|
||||
1. Make the required changes then click **Save**.
|
||||
|
||||
## Deleting a policy
|
||||
## Deleting a policy
|
||||
|
||||
1. Display the "Codespace policies" page. For more information, see "[Adding a policy to limit the available machine types](#adding-a-policy-to-limit-the-available-machine-types)."
|
||||
1. Click the delete button to the right of the policy you want to delete.
|
||||
|
||||
@@ -21,9 +21,9 @@ You can choose which image you want to use for your codespaces by specifying it
|
||||
"image": "mcr.microsoft.com/vscode/devcontainers/javascript-node:18",
|
||||
```
|
||||
|
||||
For more information, see the [dev containers specification](https://containers.dev/implementors/json_reference/) on containers.dev.
|
||||
For more information, see the [dev containers specification](https://containers.dev/implementors/json_reference/) on the Development Containers website.
|
||||
|
||||
If you don't specify an image in the dev container configuration for a repository, the default image is used. The default image contains a number of runtime versions for popular languages and commonly used tools. For more information, see "[Introduction to dev containers](/codespaces/setting-up-your-project-for-codespaces/introduction-to-dev-containers#using-the-default-dev-container-configuration)."
|
||||
If you don't specify an image in the dev container configuration for a repository, the default image is used. The default image contains a number of runtime versions for popular languages and commonly used tools. For more information, see "[Introduction to dev containers](/codespaces/setting-up-your-project-for-codespaces/adding-a-dev-container-configuration/introduction-to-dev-containers#using-the-default-dev-container-configuration)."
|
||||
|
||||
As an organization owner, you can add a policy to restrict which images can be used for codespaces created within your organization.
|
||||
|
||||
@@ -33,9 +33,9 @@ If the image specified in the dev container configuration does not match one of
|
||||
|
||||
{% note %}
|
||||
|
||||
**Notes**:
|
||||
**Notes**:
|
||||
* The base image policy is only applied when a codespace is created. It is currently not applied when you rebuild a container. This will change in a future release. For more information, see "[The codespace lifecycle](/codespaces/getting-started/the-codespace-lifecycle#rebuilding-a-codespace)."
|
||||
* The base image policy does not apply to the default image, or the image that's used to recover a codespace if an error is introduced into a dev container configuration which prevents the container from being rebuilt.
|
||||
* The base image policy does not apply to the default image, or the image that's used to recover a codespace if an error is introduced into a dev container configuration which prevents the container from being rebuilt.
|
||||
|
||||
{% endnote %}
|
||||
|
||||
@@ -63,7 +63,7 @@ For example, you could create an organization-wide policy that restricts the bas
|
||||
1. In the "Allowed values" field, enter the complete URL of an image you want to allow.
|
||||
|
||||

|
||||
|
||||
|
||||
{% note %}
|
||||
|
||||
**Note**: You must specify an image URL that exactly matches the value specified in a dev container configuration.
|
||||
@@ -92,7 +92,7 @@ You can edit an existing policy. For example, you may want to add or remove cons
|
||||
1. Add or remove image URLs.
|
||||
1. Click **Save**.
|
||||
|
||||
## Deleting a policy
|
||||
## Deleting a policy
|
||||
|
||||
1. Display the "Codespace policies" page. For more information, see "[Adding a policy to define the allowed images](#adding-a-policy-to-define-the-allowed-images)."
|
||||
1. Click the delete button to the right of the policy you want to delete.
|
||||
|
||||
@@ -90,12 +90,12 @@ A secret is exported as an environment variable into the user's terminal session
|
||||
You can use secrets in a codespace after the codespace is built and is running. For example, a secret can be used:
|
||||
|
||||
* When launching an application from the integrated terminal or ssh session.
|
||||
* Within a dev container lifecycle script that is run after the codespace is running. For more information about dev container lifecycle scripts, see the documentation on containers.dev: [Specification](https://containers.dev/implementors/json_reference/#lifecycle-scripts).
|
||||
* Within a dev container lifecycle script that is run after the codespace is running. For more information about dev container lifecycle scripts, see the documentation on the Development Containers website.: [Specification](https://containers.dev/implementors/json_reference/#lifecycle-scripts).
|
||||
|
||||
Codespace secrets cannot be used:
|
||||
|
||||
* During codespace build time (that is, within a Dockerfile or custom entry point).
|
||||
* Within a dev container feature. For more information, see the `features` property in the [dev containers specification](https://containers.dev/implementors/json_reference/#general-properties) on containers.dev.
|
||||
* Within a dev container feature. For more information, see the `features` property in the [dev containers specification](https://containers.dev/implementors/json_reference/#general-properties) on the Development Containers website.
|
||||
|
||||
## Further reading
|
||||
|
||||
|
||||
@@ -32,7 +32,7 @@ To create codespaces with custom permissions defined, you must use one of the fo
|
||||
|
||||
## Setting additional repository permissions
|
||||
|
||||
1. You configure repository permissions for {% data variables.product.prodname_github_codespaces %} in the `devcontainer.json` file. If your repository does not already contain a `devcontainer.json` file, add one now. For more information, "[Add a dev container to your project](/codespaces/setting-up-your-project-for-codespaces/setting-up-your-project-for-codespaces)."
|
||||
1. You configure repository permissions for {% data variables.product.prodname_github_codespaces %} in the `devcontainer.json` file. If your repository does not already contain a `devcontainer.json` file, add one now. For more information, "[Adding a dev container configuration to your repository](/codespaces/setting-up-your-project-for-codespaces/adding-a-dev-container-configuration)."
|
||||
|
||||
1. Edit the `devcontainer.json` file, adding the repository name and permissions needed to the `repositories` object:
|
||||
|
||||
@@ -124,7 +124,7 @@ You can only authorize permissions that your personal account already possesses.
|
||||
|
||||
{% endwarning %}
|
||||
|
||||
When you enable access and security for a repository owned by your personal account, any codespaces that are created for that repository will have read permissions to all other repositories you own. If you want to restrict the repositories a codespace can access, you can limit to it to either the repository the codespace was opened for or specific repositories. You should only enable access and security for repositories you trust.
|
||||
When you enable access and security for a repository owned by your personal account, any codespaces that are created for that repository will have read permissions to all other repositories you own. If you want to restrict the repositories a codespace can access, you can limit to it to either the repository the codespace was opened for or specific repositories. You should only enable access and security for repositories you trust.
|
||||
|
||||
{% data reusables.user-settings.access_settings %}
|
||||
{% data reusables.user-settings.codespaces-tab %}
|
||||
|
||||
@@ -19,9 +19,9 @@ topics:
|
||||
|
||||
## What is a codespace?
|
||||
|
||||
A codespace is a development environment that's hosted in the cloud. You can customize your project for {% data variables.product.prodname_github_codespaces %} by committing [configuration files](/codespaces/setting-up-your-project-for-codespaces/introduction-to-dev-containers) to your repository (often known as Configuration-as-Code), which creates a repeatable codespace configuration for all users of your project.
|
||||
A codespace is a development environment that's hosted in the cloud. You can customize your project for {% data variables.product.prodname_github_codespaces %} by committing [configuration files](/codespaces/setting-up-your-project-for-codespaces/adding-a-dev-container-configuration/introduction-to-dev-containers) to your repository (often known as Configuration-as-Code), which creates a repeatable codespace configuration for all users of your project.
|
||||
|
||||
Each codespace runs on a virtual machine hosted by {% data variables.product.prodname_dotcom %}. You can choose the type of machine you want to use, depending on the resources you need. Various types of machine are available, starting with a 2-core processor, 4 GB of RAM, and 32 GB of storage.
|
||||
Each codespace runs on a virtual machine hosted by {% data variables.product.prodname_dotcom %}. You can choose the type of machine you want to use, depending on the resources you need. Various types of machine are available, starting with a 2-core processor, 4 GB of RAM, and 32 GB of storage.
|
||||
|
||||
You can connect to your codespaces from your browser, from {% data variables.product.prodname_vscode %}, from the JetBrains Gateway application, or by using {% data variables.product.prodname_cli %}.
|
||||
|
||||
@@ -37,23 +37,23 @@ To begin developing using cloud-based compute resources, you can create a codesp
|
||||
|
||||
All personal {% data variables.product.prodname_dotcom_the_website %} accounts have a monthly quota of free use of {% data variables.product.prodname_github_codespaces %} included in the Free or Pro plan. You can get started using {% data variables.product.prodname_github_codespaces %} on your personal account without changing any settings or providing payment details.
|
||||
|
||||
You can create and use a codespace for any repository you can clone. You can also use a template to create codespaces that are not initially associated with a repository. If you create a codespace from an organization-owned repository, use of the codespace will either be charged to the organization (if the organization is configured for this), or to your personal account. Codespaces created from templates are always charged to your personal account.
|
||||
You can create and use a codespace for any repository you can clone. You can also use a template to create codespaces that are not initially associated with a repository. If you create a codespace from an organization-owned repository, use of the codespace will either be charged to the organization (if the organization is configured for this), or to your personal account. Codespaces created from templates are always charged to your personal account.
|
||||
|
||||
{% data reusables.codespaces.codespaces-continue-by-paying %}
|
||||
{% data reusables.codespaces.codespaces-continue-by-paying %}
|
||||
|
||||
### Using organization-owned codespaces
|
||||
|
||||
Organization owners can enable use of {% data variables.product.prodname_github_codespaces %}, billable to the organization or enterprise account. This applies to codespaces created from repositories owned by the organization. For more information, see "[Enabling {% data variables.product.prodname_github_codespaces %} for your organization](/codespaces/managing-codespaces-for-your-organization/enabling-github-codespaces-for-your-organization)." You can set a spending limit for use of {% data variables.product.prodname_github_codespaces %} on your organization or enterprise account. For more information, see "[Managing spending limits for {% data variables.product.prodname_github_codespaces %}](/billing/managing-billing-for-github-codespaces/managing-the-spending-limit-for-github-codespaces)."
|
||||
|
||||
If use of a codespace will be billed to an organization or enterprise, this is shown when the codespace is created. For more information, see "[Creating a codespace for a repository](/codespaces/developing-in-codespaces/creating-a-codespace-for-a-repository#creating-a-codespace-for-a-repository)." Codespaces that are billed to an organization, or its parent enterprise, are owned by the organization and can be deleted by an organization owner. For more information, see "[Deleting a codespace](/codespaces/developing-in-codespaces/deleting-a-codespace#deleting-codespaces-in-your-organization)."
|
||||
If use of a codespace will be billed to an organization or enterprise, this is shown when the codespace is created. For more information, see "[Creating a codespace for a repository](/codespaces/developing-in-codespaces/creating-a-codespace-for-a-repository#creating-a-codespace-for-a-repository)." Codespaces that are billed to an organization, or its parent enterprise, are owned by the organization and can be deleted by an organization owner. For more information, see "[Deleting a codespace](/codespaces/developing-in-codespaces/deleting-a-codespace#deleting-codespaces-in-your-organization)."
|
||||
|
||||
### Customizing {% data variables.product.prodname_github_codespaces %}
|
||||
|
||||
To customize the runtimes and tools in your codespace, you can create one or more dev container configurations for your repository. Adding dev container configurations to your repository allows you to define a choice of different development environments that are appropriate for the work people will do in your repository.
|
||||
To customize the runtimes and tools in your codespace, you can create one or more dev container configurations for your repository. Adding dev container configurations to your repository allows you to define a choice of different development environments that are appropriate for the work people will do in your repository.
|
||||
|
||||
If you create a codespace from a repository without any dev container configurations, {% data variables.product.prodname_github_codespaces %} will clone your repository into an environment with the default codespace image that includes many tools, languages, and runtime environments. If you create a codespace from a template, you might start with some initial configuration on top of the default image. For more information, see "[Introduction to dev containers](/codespaces/setting-up-your-project-for-codespaces/introduction-to-dev-containers)."
|
||||
If you create a codespace from a repository without any dev container configurations, {% data variables.product.prodname_github_codespaces %} will clone your repository into an environment with the default codespace image that includes many tools, languages, and runtime environments. If you create a codespace from a template, you might start with some initial configuration on top of the default image. For more information, see "[Introduction to dev containers](/codespaces/setting-up-your-project-for-codespaces/adding-a-dev-container-configuration/introduction-to-dev-containers)."
|
||||
|
||||
You can personalize aspects of your codespace environment by using a public [dotfiles](https://dotfiles.github.io/tutorials/) repository. You can use dotfiles to set shell aliases and preferences, or to install your personal preference of the tools you like to use. If you use {% data variables.product.prodname_github_codespaces %} in the browser, or in {% data variables.product.prodname_vscode %}, you can use [Settings Sync](https://code.visualstudio.com/docs/editor/settings-sync) to give your codespace editor the same settings, keyboard shortcuts, snippets, and extensions that you have set up in your local installation of {% data variables.product.prodname_vscode %}.
|
||||
You can personalize aspects of your codespace environment by using a public [dotfiles](https://dotfiles.github.io/tutorials/) repository. You can use dotfiles to set shell aliases and preferences, or to install your personal preference of the tools you like to use. If you use {% data variables.product.prodname_github_codespaces %} in the browser, or in {% data variables.product.prodname_vscode %}, you can use [Settings Sync](https://code.visualstudio.com/docs/editor/settings-sync) to give your codespace editor the same settings, keyboard shortcuts, snippets, and extensions that you have set up in your local installation of {% data variables.product.prodname_vscode %}.
|
||||
|
||||
For more information, see "[Customizing your codespace](/codespaces/customizing-your-codespace)".
|
||||
|
||||
@@ -61,6 +61,6 @@ For more information, see "[Customizing your codespace](/codespaces/customizing-
|
||||
|
||||
For information on pricing, storage, and usage for {% data variables.product.prodname_github_codespaces %}, see "[About billing for {% data variables.product.prodname_github_codespaces %}](/billing/managing-billing-for-github-codespaces/about-billing-for-github-codespaces)."
|
||||
|
||||
{% data reusables.codespaces.codespaces-spending-limit-requirement %}
|
||||
{% data reusables.codespaces.codespaces-spending-limit-requirement %}
|
||||
|
||||
{% data reusables.codespaces.codespaces-monthly-billing %} For information on how organizations owners and billing managers can manage the spending limit for {% data variables.product.prodname_github_codespaces %} for an organization, see "[Managing spending limits for {% data variables.product.prodname_github_codespaces %}](/billing/managing-billing-for-github-codespaces/managing-spending-limits-for-github-codespaces)."
|
||||
|
||||
@@ -15,7 +15,7 @@ redirect_from:
|
||||
|
||||
{% data reusables.codespaces.prebuilds-definition %}
|
||||
|
||||
If it currently takes more than 2 minutes to create a codespace for a repository, you are likely to benefit from using prebuilds. This is because, with a prebuild, any source code, editor extensions, project dependencies, commands, and configurations have already been downloaded, installed, and applied before you create a codespace.
|
||||
If it currently takes more than 2 minutes to create a codespace for a repository, you are likely to benefit from using prebuilds. This is because, with a prebuild, any source code, editor extensions, project dependencies, commands, and configurations have already been downloaded, installed, and applied before you create a codespace.
|
||||
|
||||
By default, whenever you push changes to your repository, {% data variables.product.prodname_github_codespaces %} uses {% data variables.product.prodname_actions %} to automatically update your prebuilds.
|
||||
|
||||
@@ -27,7 +27,7 @@ When you create a codespace from a template on the "Your codespaces" page, {% da
|
||||
|
||||
## The prebuild process
|
||||
|
||||
To create a prebuild you set up a prebuild configuration. When you save the configuration, a {% data variables.product.prodname_actions %} workflow runs to create each of the required prebuilds; one workflow per prebuild. Workflows also run whenever the prebuilds for your configuration need to be updated. This can happen at scheduled intervals, on pushes to a prebuild-enabled repository, or when you change the dev container configuration. For more information, see "[Configuring prebuilds](/codespaces/prebuilding-your-codespaces/configuring-prebuilds#configuring-prebuilds)."
|
||||
To create a prebuild you set up a prebuild configuration. When you save the configuration, a {% data variables.product.prodname_actions %} workflow runs to create each of the required prebuilds; one workflow per prebuild. Workflows also run whenever the prebuilds for your configuration need to be updated. This can happen at scheduled intervals, on pushes to a prebuild-enabled repository, or when you change the dev container configuration. For more information, see "[Configuring prebuilds](/codespaces/prebuilding-your-codespaces/configuring-prebuilds#configuring-prebuilds)."
|
||||
|
||||
When a prebuild configuration workflow runs, {% data variables.product.prodname_dotcom %} creates a temporary codespace, performing setup operations up to and including any `onCreateCommand` and `updateContentCommand` commands in the `devcontainer.json` file. No `postCreateCommand` commands are run during the creation of a prebuild. For more information about these commands, see the [`devcontainer.json` reference](https://code.visualstudio.com/docs/remote/devcontainerjson-reference#_devcontainerjson-properties) in the {% data variables.product.prodname_vscode_shortname %} documentation. A snapshot of the generated container is then taken and stored.
|
||||
|
||||
@@ -37,15 +37,15 @@ When you create a codespace from a prebuild, {% data variables.product.prodname_
|
||||
|
||||
## About pushing changes to prebuild-enabled branches
|
||||
|
||||
By default, each push to a branch that has a prebuild configuration results in a {% data variables.product.prodname_dotcom %}-managed {% data variables.product.prodname_actions %} workflow run to update the prebuild. The prebuild workflow has a concurrency limit of one workflow run at a time for a given prebuild configuration, unless changes were made that affect the dev container configuration for the associated repository. For more information, see "[Introduction to dev containers](/codespaces/setting-up-your-project-for-codespaces/introduction-to-dev-containers)." If a run is already in progress, the workflow run that was queued most recently will run next, after the current run completes.
|
||||
By default, each push to a branch that has a prebuild configuration results in a {% data variables.product.prodname_dotcom %}-managed {% data variables.product.prodname_actions %} workflow run to update the prebuild. The prebuild workflow has a concurrency limit of one workflow run at a time for a given prebuild configuration, unless changes were made that affect the dev container configuration for the associated repository. For more information, see "[Introduction to dev containers](/codespaces/setting-up-your-project-for-codespaces/adding-a-dev-container-configuration/introduction-to-dev-containers)." If a run is already in progress, the workflow run that was queued most recently will run next, after the current run completes.
|
||||
|
||||
With the prebuild set to be updated on each push, it means that if there are very frequent pushes to your repository, prebuild updates will occur at least as often as it takes to run the prebuild workflow. That is, if your workflow run typically takes one hour to complete, prebuilds will be created for your repository roughly hourly, if the run succeeds, or more often if there were pushes that change the dev container configuration on the branch.
|
||||
|
||||
For example, let's imagine 5 pushes are made, in quick succession, against a branch that has a prebuild configuration. In this situation:
|
||||
|
||||
* A workflow run is started for the first push, to update the prebuild.
|
||||
* If the 4 remaining pushes do not affect the dev container configuration, the workflow runs for these are queued in a "pending" state.
|
||||
|
||||
If any of the remaining 4 pushes change the dev container configuration, then the service will not skip that one and will immediately run the prebuild creation workflow, updating the prebuild accordingly if it succeeds.
|
||||
* If the 4 remaining pushes do not affect the dev container configuration, the workflow runs for these are queued in a "pending" state.
|
||||
|
||||
* Once the first run completes, workflow runs for pushes 2, 3, and 4 will be canceled, and the last queued workflow (for push 5) will run and update the prebuild.
|
||||
If any of the remaining 4 pushes change the dev container configuration, then the service will not skip that one and will immediately run the prebuild creation workflow, updating the prebuild accordingly if it succeeds.
|
||||
|
||||
* Once the first run completes, workflow runs for pushes 2, 3, and 4 will be canceled, and the last queued workflow (for push 5) will run and update the prebuild.
|
||||
|
||||
@@ -14,11 +14,11 @@ permissions: People with admin access to a repository can configure prebuilds fo
|
||||
|
||||
You can set up a prebuild configuration for the combination of a specific branch of your repository with a specific dev container configuration file.
|
||||
|
||||
Any branches created from a prebuild-enabled parent branch will typically also get prebuilds for the same dev container configuration. This is because prebuilds for child branches that use the same dev container configuration as the parent branch are, for the most part, identical, so developers can benefit from faster codespace creation times on those branches also. For more information, see "[Introduction to dev containers](/codespaces/setting-up-your-project-for-codespaces/introduction-to-dev-containers)."
|
||||
Any branches created from a prebuild-enabled parent branch will typically also get prebuilds for the same dev container configuration. This is because prebuilds for child branches that use the same dev container configuration as the parent branch are, for the most part, identical, so developers can benefit from faster codespace creation times on those branches also. For more information, see "[Introduction to dev containers](/codespaces/setting-up-your-project-for-codespaces/adding-a-dev-container-configuration/introduction-to-dev-containers)."
|
||||
|
||||
Typically, when you configure prebuilds for a branch, prebuilds will be available for multiple machine types. However, if your repository is greater than 32 GB, prebuilds won't be available for 2-core and 4-core machine types, since the storage these provide is limited to 32 GB.
|
||||
|
||||
## Prerequisites
|
||||
## Prerequisites
|
||||
|
||||
Prebuilds are created using {% data variables.product.prodname_actions %}. As a result, {% data variables.product.prodname_actions %} must be enabled for the repository for which you are configuring prebuilds. For more information, see "[Managing {% data variables.product.prodname_actions %} settings for a repository](/repositories/managing-your-repositorys-settings-and-features/enabling-features-for-your-repository/managing-github-actions-settings-for-a-repository)."
|
||||
|
||||
@@ -33,13 +33,13 @@ Prebuilds are created using {% data variables.product.prodname_actions %}. As a
|
||||
|
||||

|
||||
|
||||
{% note %}
|
||||
{% note %}
|
||||
|
||||
**Note**: Any branches created from a prebuild-enabled base branch will typically also get prebuilds for the same dev container configuration. For example, if you enable prebuilds for a dev container configuration file on the default branch of the repository, branches based on the default branch will, in most cases, also get prebuilds for the same dev container configuration.
|
||||
|
||||
{% endnote %}
|
||||
|
||||
1. Optionally, in the **Configuration file** dropdown menu that's displayed, choose the `devcontainer.json` configuration file that you want to use for your prebuilds. For more information, see "[Introduction to dev containers](/codespaces/setting-up-your-project-for-codespaces/introduction-to-dev-containers#devcontainerjson)."
|
||||
1. Optionally, in the **Configuration file** dropdown menu that's displayed, choose the `devcontainer.json` configuration file that you want to use for your prebuilds. For more information, see "[Introduction to dev containers](/codespaces/setting-up-your-project-for-codespaces/adding-a-dev-container-configuration/introduction-to-dev-containers#devcontainerjson)."
|
||||
|
||||

|
||||
|
||||
@@ -59,7 +59,7 @@ Prebuilds are created using {% data variables.product.prodname_actions %}. As a
|
||||
|
||||
{% note %}
|
||||
|
||||
**Notes**:
|
||||
**Notes**:
|
||||
* The prebuild in each region incurs individual storage charges. You should, therefore, only enable prebuilds for regions in which you know they'll be used. For more information, see "[About billing for {% data variables.product.prodname_github_codespaces %}](/billing/managing-billing-for-github-codespaces/about-billing-for-github-codespaces#billing-for-codespaces-prebuilds)."
|
||||
* Developers can set their default region for {% data variables.product.prodname_github_codespaces %}, which can allow you to enable prebuilds for fewer regions. For more information, see "[Setting your default region for {% data variables.product.prodname_github_codespaces %}](/codespaces/customizing-your-codespace/setting-your-default-region-for-github-codespaces)."
|
||||
|
||||
@@ -69,10 +69,10 @@ Prebuilds are created using {% data variables.product.prodname_actions %}. As a
|
||||
|
||||

|
||||
|
||||
Depending on your prebuild trigger settings, your prebuild could change with each push or on each dev container configuration change. Retaining older versions of prebuilds enables you to create a prebuild from an older commit with a different dev container configuration than the current prebuild. This setting allows you to set the number of retained versions to a level that is appropriate for your needs.
|
||||
Depending on your prebuild trigger settings, your prebuild could change with each push or on each dev container configuration change. Retaining older versions of prebuilds enables you to create a prebuild from an older commit with a different dev container configuration than the current prebuild. This setting allows you to set the number of retained versions to a level that is appropriate for your needs.
|
||||
|
||||
If you set the number of prebuild versions to save to 1, {% data variables.product.prodname_github_codespaces %} will only save the latest version of the prebuild and will delete the older version each time the template is updated. This means you will not get a prebuilt codespace if you go back to an older dev container configuration.
|
||||
|
||||
|
||||
There is a storage cost associated with each prebuild version that's retained. For example, if you are generating prebuilds in 4 regions and retaining 2 versions, you will be charged for storage of up to 8 prebuilds. For more information on billing, see "[About billing for {% data variables.product.prodname_github_codespaces %}](/billing/managing-billing-for-github-codespaces/about-billing-for-github-codespaces#codespaces-pricing)."
|
||||
|
||||
1. Optionally, add users or teams to notify when the prebuild workflow run fails for this configuration. You can begin typing a username, team name, or full name, then click the name once it appears to add them to the list. The users or teams you add will receive an email when prebuild failures occur, containing a link to the workflow run logs to help with further investigation.
|
||||
@@ -89,7 +89,7 @@ Prebuilds are created using {% data variables.product.prodname_actions %}. As a
|
||||
|
||||
{% data reusables.codespaces.prebuilds-permission-authorization %}
|
||||
|
||||
After you create a prebuild configuration it is listed on the {% data variables.product.prodname_github_codespaces %} page of your repository settings. A {% data variables.product.prodname_actions %} workflow is queued and then run to create prebuilds in the regions you specified, based on the branch and dev container configuration file you selected.
|
||||
After you create a prebuild configuration it is listed on the {% data variables.product.prodname_github_codespaces %} page of your repository settings. A {% data variables.product.prodname_actions %} workflow is queued and then run to create prebuilds in the regions you specified, based on the branch and dev container configuration file you selected.
|
||||
|
||||

|
||||
|
||||
@@ -97,9 +97,9 @@ For information about editing and deleting prebuild configurations, see "[Managi
|
||||
|
||||
## Configuring environment variables
|
||||
|
||||
To allow the prebuild process to access environment variables required to create your development environment, you can set these either as {% data variables.product.prodname_codespaces %} repository secrets or as {% data variables.product.prodname_codespaces %} organization secrets. For more information, see "[Adding secrets for a repository](/codespaces/managing-codespaces-for-your-organization/managing-encrypted-secrets-for-your-repository-and-organization-for-github-codespaces#adding-secrets-for-a-repository)" and "[Adding secrets for an organization](/codespaces/managing-codespaces-for-your-organization/managing-encrypted-secrets-for-your-repository-and-organization-for-github-codespaces#adding-secrets-for-an-organization)."
|
||||
To allow the prebuild process to access environment variables required to create your development environment, you can set these either as {% data variables.product.prodname_codespaces %} repository secrets or as {% data variables.product.prodname_codespaces %} organization secrets. For more information, see "[Adding secrets for a repository](/codespaces/managing-codespaces-for-your-organization/managing-encrypted-secrets-for-your-repository-and-organization-for-github-codespaces#adding-secrets-for-a-repository)" and "[Adding secrets for an organization](/codespaces/managing-codespaces-for-your-organization/managing-encrypted-secrets-for-your-repository-and-organization-for-github-codespaces#adding-secrets-for-an-organization)."
|
||||
|
||||
Secrets that you create in this way will be accessible by anyone who creates a codespace from this repository. If you do not want this, you can alternatively set the `CODESPACES_PREBUILD_TOKEN` secret. The `CODESPACES_PREBUILD_TOKEN` secret is only used for prebuilding and its value is not accessible in users' codespaces.
|
||||
Secrets that you create in this way will be accessible by anyone who creates a codespace from this repository. If you do not want this, you can alternatively set the `CODESPACES_PREBUILD_TOKEN` secret. The `CODESPACES_PREBUILD_TOKEN` secret is only used for prebuilding and its value is not accessible in users' codespaces.
|
||||
|
||||
Prebuilds cannot use any user-level secrets while building your environment, because these are not available until after the codespace has been created.
|
||||
|
||||
|
||||
@@ -15,18 +15,18 @@ permissions: People with write permissions to a repository can create or edit th
|
||||
|
||||
Any changes you make to the dev container configuration for a prebuild-enabled branch will result in an update to the codespace configuration and the associated prebuild. It’s therefore important to test such changes in a codespace from a test branch before committing your changes to a branch of your repository that's actively used. This will ensure you’re not introducing breaking changes for your team.
|
||||
|
||||
For more information, see "[Introduction to dev containers](/codespaces/setting-up-your-project-for-codespaces/introduction-to-dev-containers)."
|
||||
For more information, see "[Introduction to dev containers](/codespaces/setting-up-your-project-for-codespaces/adding-a-dev-container-configuration/introduction-to-dev-containers)."
|
||||
|
||||
## Testing changes to the dev container configuration
|
||||
|
||||
1. Create a codespace from the prebuild-enabled branch whose dev container you want to change. For more information, see "[Creating a codespace for a repository](/codespaces/developing-in-codespaces/creating-a-codespace-for-a-repository#creating-a-codespace-for-a-repository)."
|
||||
1. In the codespace, check out a test branch. For more information, see "[Using source control in your codespace](/codespaces/developing-in-codespaces/using-source-control-in-your-codespace#creating-or-switching-branches)."
|
||||
1. Make the required changes to the dev container configuration.
|
||||
1. Apply the changes by rebuilding the container. For more information, see "[Introduction to dev containers](/codespaces/setting-up-your-project-for-codespaces/introduction-to-dev-containers#applying-configuration-changes-to-a-codespace)."
|
||||
1. Apply the changes by rebuilding the container. For more information, see "[Introduction to dev containers](/codespaces/setting-up-your-project-for-codespaces/adding-a-dev-container-configuration/introduction-to-dev-containers#applying-configuration-changes-to-a-codespace)."
|
||||
1. After everything looks good, we also recommend creating a new codespace from your test branch to ensure everything is working. You can then commit your changes to your repository's default branch, or an active feature branch, triggering an update of the prebuild for that branch.
|
||||
|
||||
{% note %}
|
||||
|
||||
|
||||
**Note**: Creating this codespace will take longer than usual because it will not be created from a prebuild.
|
||||
|
||||
|
||||
{% endnote %}
|
||||
|
||||
@@ -0,0 +1,17 @@
|
||||
---
|
||||
title: Adding a dev container configuration to your repository
|
||||
shortTitle: Adding a dev container configuration
|
||||
allowTitleToDifferFromFilename: true
|
||||
intro: 'You can add a custom dev container configuration to your repository to set up the {% data variables.product.prodname_github_codespaces %} development environment for your codebase.'
|
||||
versions:
|
||||
fpt: '*'
|
||||
ghec: '*'
|
||||
redirect_from:
|
||||
- /codespaces/setting-up-your-project-for-codespaces/setting-up-your-project-for-codespaces
|
||||
children:
|
||||
- /introduction-to-dev-containers
|
||||
- /setting-up-your-nodejs-project-for-codespaces
|
||||
- /setting-up-your-dotnet-project-for-codespaces
|
||||
- /setting-up-your-java-project-for-codespaces
|
||||
- /setting-up-your-python-project-for-codespaces
|
||||
---
|
||||
@@ -8,6 +8,7 @@ redirect_from:
|
||||
- /github/developing-online-with-codespaces/configuring-codespaces-for-your-project
|
||||
- /codespaces/customizing-your-codespace/configuring-codespaces-for-your-project
|
||||
- /codespaces/setting-up-your-project-for-codespaces/configuring-codespaces-for-your-project
|
||||
- /codespaces/setting-up-your-project-for-codespaces/introduction-to-dev-containers
|
||||
versions:
|
||||
fpt: '*'
|
||||
ghec: '*'
|
||||
@@ -38,10 +39,10 @@ The primary file in a dev container configuration is the `devcontainer.json` fil
|
||||
|
||||
If you create a codespace from a repository without a `devcontainer.json` file, or if you start from {% data variables.product.company_short %}'s blank template, the default dev container configuration is used. For more information, see "[Using the default dev container configuration](#using-the-default-dev-container-configuration)."
|
||||
|
||||
The `devcontainer.json` file is usually located in the `.devcontainer` directory of your repository. Alternatively, you can locate it directly in the root of the repository, in which case the file name must begin with a period: `.devcontainer.json`.
|
||||
The `devcontainer.json` file is usually located in the `.devcontainer` directory of your repository. Alternatively, you can locate it directly in the root of the repository, in which case the file name must begin with a period: `.devcontainer.json`.
|
||||
|
||||
If you want to have a choice of dev container configurations in your repository, any alternatives to the `.devcontainer/devcontainer.json` (or `.devcontainer.json`) file must be located in their own subdirectory at the path `.devcontainer/SUBDIRECTORY/devcontainer.json`. For example, you could have a choice of two configurations:
|
||||
* `.devcontainer/database-dev/devcontainer.json`
|
||||
If you want to have a choice of dev container configurations in your repository, any alternatives to the `.devcontainer/devcontainer.json` (or `.devcontainer.json`) file must be located in their own subdirectory at the path `.devcontainer/SUBDIRECTORY/devcontainer.json`. For example, you could have a choice of two configurations:
|
||||
* `.devcontainer/database-dev/devcontainer.json`
|
||||
* `.devcontainer/gui-dev/devcontainer.json`
|
||||
|
||||
When you have multiple `devcontainer.json` files in your repository, each codespace is created from only one of the configurations. Settings cannot be imported or inherited between `devcontainer.json` files. If a `devcontainer.json` file in a custom subdirectory has dependent files, such as the Dockerfile or scripts that are run by commands in the `devcontainer.json` file, it's recommended that you co-locate these files in the same subdirectory.
|
||||
@@ -58,11 +59,11 @@ You can personalize your codespaces by using dotfiles and Settings Sync. For mor
|
||||
|
||||
### Dockerfile
|
||||
|
||||
You can add a Dockerfile as part of your dev container configuration.
|
||||
You can add a Dockerfile as part of your dev container configuration.
|
||||
|
||||
The Dockerfile is a text file that contains the instructions needed to create a Docker container image. This image is used to generate a development container each time someone creates a codespace using the `devcontainer.json` file that references this Dockerfile. The instructions in the Dockerfile typically begin by referencing a parent image on which the new image that will be created is based. This is followed by commands that are run during the image creation process, for example to install software packages.
|
||||
|
||||
The Dockerfile for a dev container is typically located in the `.devcontainer` folder, alongside the `devcontainer.json` in which it is referenced.
|
||||
The Dockerfile for a dev container is typically located in the `.devcontainer` folder, alongside the `devcontainer.json` in which it is referenced.
|
||||
|
||||
{% note %}
|
||||
|
||||
@@ -78,7 +79,7 @@ The following example uses four instructions:
|
||||
|
||||
`FROM` specifies the parent image on which the generated Docker image will be based.
|
||||
|
||||
`COPY` copies a file and adds it to the filesystem.
|
||||
`COPY` copies a file and adds it to the filesystem.
|
||||
|
||||
`RUN` updates package lists and runs a script. You can also use a `RUN` instruction to install software, as shown by the commented out instructions. To run multiple commands, use `&&` to combine the commands into a single `RUN` statement.
|
||||
|
||||
@@ -117,7 +118,7 @@ Various options are available to you if you want to use existing container orche
|
||||
|
||||
If you don't define a configuration in your repository, {% data variables.product.prodname_dotcom %} creates a codespace using a default Linux image. This Linux image includes a number of runtime versions for popular languages like Python, Node, PHP, Java, Go, C++, Ruby, and .NET Core/C#. The latest or LTS releases of these languages are used. There are also tools to support data science and machine learning, such as JupyterLab and Conda. The image also includes other developer tools and utilities like Git, GitHub CLI, yarn, openssh, and vim. To see all the languages, runtimes, and tools that are included use the `devcontainer-info content-url` command inside your codespace terminal and follow the URL that the command outputs.
|
||||
|
||||
For information about what's included in the default Linux image, see the [`devcontainers/images`](https://github.com/devcontainers/images/tree/main/src/universal) repository.
|
||||
For information about what's included in the default Linux image, see the [`devcontainers/images`](https://github.com/devcontainers/images/tree/main/src/universal) repository.
|
||||
|
||||
The default configuration is a good option if you're working on a small project that uses the languages and tools that {% data variables.product.prodname_github_codespaces %} provides.
|
||||
|
||||
@@ -145,20 +146,20 @@ You can add a predefined dev container configuration either while working in a c
|
||||
|
||||
### Adding additional features to your `devcontainer.json` file
|
||||
|
||||
{% data reusables.codespaces.about-features %} For more information, see "[Adding features to a `devcontainer.json` file](/codespaces/setting-up-your-project-for-codespaces/adding-features-to-a-devcontainer-file?tool=vscode)."
|
||||
{% data reusables.codespaces.about-features %} For more information, see "[Adding features to a `devcontainer.json` file](/codespaces/setting-up-your-project-for-codespaces/configuring-dev-containers/adding-features-to-a-devcontainer-file?tool=vscode)."
|
||||
|
||||
## Creating a custom dev container configuration
|
||||
|
||||
If none of the predefined configurations meets your needs, you can create a custom configuration by writing your own `devcontainer.json` file.
|
||||
|
||||
* If you're adding a single `devcontainer.json` file that will be used by everyone who creates a codespace from your repository, create the file within a `.devcontainer` directory at the root of the repository.
|
||||
* If you're adding a single `devcontainer.json` file that will be used by everyone who creates a codespace from your repository, create the file within a `.devcontainer` directory at the root of the repository.
|
||||
* If you want to offer users a choice of configuration, you can create multiple custom `devcontainer.json` files, each located within a separate subdirectory of the `.devcontainer` directory.
|
||||
|
||||
{% note %}
|
||||
|
||||
**Notes**:
|
||||
- You can't locate your `devcontainer.json` files in directories more than one level below `.devcontainer`. For example, a file at `.devcontainer/teamA/devcontainer.json` will work, but `.devcontainer/teamA/testing/devcontainer.json` will not.
|
||||
- {% data reusables.codespaces.configuration-choice-templates %} For more information, see "[Setting up a template repository for {% data variables.product.prodname_github_codespaces %}](/codespaces/setting-up-your-project-for-codespaces/setting-up-a-template-repository-for-github-codespaces)."
|
||||
- {% data reusables.codespaces.configuration-choice-templates %} For more information, see "[Setting up a template repository for {% data variables.product.prodname_github_codespaces %}](/codespaces/setting-up-your-project-for-codespaces/setting-up-your-repository/setting-up-a-template-repository-for-github-codespaces)."
|
||||
|
||||
{% endnote %}
|
||||
|
||||
@@ -174,13 +175,13 @@ If you don't already have a `devcontainer.json` file in your repository, you can
|
||||
|
||||

|
||||
|
||||
A new `.devcontainer/devcontainer.json` file will open in the editor. The file will contain some initial properties, including a `features` object to which you can add new tools, libraries, or runtimes. For more information, see "[Adding features to a `devcontainer.json` file](/codespaces/setting-up-your-project-for-codespaces/adding-features-to-a-devcontainer-file?tool=webui)."
|
||||
A new `.devcontainer/devcontainer.json` file will open in the editor. The file will contain some initial properties, including a `features` object to which you can add new tools, libraries, or runtimes. For more information, see "[Adding features to a `devcontainer.json` file](/codespaces/setting-up-your-project-for-codespaces/configuring-dev-containers/adding-features-to-a-devcontainer-file?tool=webui)."
|
||||
|
||||
If your repository already contains one or more `devcontainer.json` files, then clicking **Configure dev container** will open the existing `devcontainer.json` file with the highest precedence according to the [specification](https://containers.dev/implementors/spec/#devcontainerjson) on containers.dev.
|
||||
If your repository already contains one or more `devcontainer.json` files, then clicking **Configure dev container** will open the existing `devcontainer.json` file with the highest precedence according to the [specification](https://containers.dev/implementors/spec/#devcontainerjson) on the Development Containers website.
|
||||
|
||||
### Default configuration selection during codespace creation
|
||||
|
||||
If `.devcontainer/devcontainer.json` or `.devcontainer.json` exists, it will be the default selection in the list of available configuration files when you create a codespace. If neither file exists, the default dev container configuration will be selected by default.
|
||||
If `.devcontainer/devcontainer.json` or `.devcontainer.json` exists, it will be the default selection in the list of available configuration files when you create a codespace. If neither file exists, the default dev container configuration will be selected by default.
|
||||
|
||||

|
||||
|
||||
@@ -222,7 +223,7 @@ Changes to a configuration will be applied the next time you create a codespace.
|
||||
|
||||
- To diagnose the error by reviewing the creation logs, click **View creation log**.
|
||||
- To fix the errors identified in the logs, update your `devcontainer.json` file.
|
||||
- To apply the changes, rebuild your container.
|
||||
- To apply the changes, rebuild your container.
|
||||
|
||||
### Using {% data variables.product.prodname_cli %} to rebuild a dev container
|
||||
|
||||
@@ -0,0 +1,186 @@
|
||||
---
|
||||
title: Setting up a C# (.NET) project for GitHub Codespaces
|
||||
shortTitle: Setting up a C# (.NET) project
|
||||
allowTitleToDifferFromFilename: true
|
||||
intro: 'Get started with a C# (.NET) project in {% data variables.product.prodname_github_codespaces %} by creating a custom dev container configuration.'
|
||||
redirect_from:
|
||||
- /codespaces/getting-started-with-codespaces/getting-started-with-your-dotnet-project
|
||||
versions:
|
||||
fpt: '*'
|
||||
ghec: '*'
|
||||
type: tutorial
|
||||
topics:
|
||||
- Codespaces
|
||||
- Developer
|
||||
- Set up
|
||||
---
|
||||
|
||||
## Introduction
|
||||
|
||||
This tutorial guide shows you how to set up an example C# (.NET) project {% data reusables.codespaces.setting-up-project-intro %}
|
||||
|
||||
## Step 1: Open the project in a codespace
|
||||
|
||||
1. Go to https://github.com/microsoft/vscode-remote-try-dotnet.
|
||||
{% 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 .NET. It also includes a common set of tools like 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 %} comes with the latest .NET version and common tools preinstalled. 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 `c#` and click **C# (.NET)**. Other options are available if your project uses particular tools. For example, C# and MS SQL.
|
||||
|
||||

|
||||
|
||||
1. Click the latest version of .NET.
|
||||
|
||||

|
||||
|
||||
1. A list of additional features is displayed. We'll install the .NET CLI, a command-line interface for developing, building, running, and publishing .NET applications. To install this tool, type `dotnet`, select `Dotnet CLI`, then click **OK**.
|
||||
|
||||

|
||||
|
||||
{% data reusables.codespaces.overwrite-devcontainer-config %}
|
||||
{% data reusables.codespaces.details-of-devcontainer-config %}
|
||||
|
||||
```json
|
||||
// For format details, see https://aka.ms/devcontainer.json. For config options, see the
|
||||
// README at: https://github.com/devcontainers/templates/tree/main/src/dotnet
|
||||
{
|
||||
"name": "C# (.NET)",
|
||||
// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
|
||||
"image": "mcr.microsoft.com/devcontainers/dotnet:0-7.0",
|
||||
"features": {
|
||||
"ghcr.io/devcontainers/features/dotnet:1": {}
|
||||
}
|
||||
|
||||
// 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": [5000, 5001],
|
||||
// "portsAttributes": {
|
||||
// "5001": {
|
||||
// "protocol": "https"
|
||||
// }
|
||||
// }
|
||||
|
||||
// Use 'postCreateCommand' to run commands after the container is created.
|
||||
// "postCreateCommand": "dotnet restore",
|
||||
|
||||
// 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 %}
|
||||
- **portsAttributes** - This property maps a specified port to one or more default options. For more information, see the [dev containers specification](https://containers.dev/implementors/json_reference/#port-attributes) on the Development Containers website.
|
||||
{% 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:
|
||||
* Forward the port on which the application runs on the remote machine to your local machine.
|
||||
* Run `dotnet restore`, after the dev container is created, to restore the dependencies required by the application.
|
||||
* Automatically install a {% data variables.product.prodname_vscode_shortname %} extension in this codespace.
|
||||
|
||||
{% data reusables.codespaces.add-comma-after-features %}
|
||||
|
||||
```json{:copy}
|
||||
"features": {
|
||||
"ghcr.io/devcontainers/features/dotnet:1": {}
|
||||
},
|
||||
|
||||
// Features to add to the dev container. More info: https://containers.dev/features.
|
||||
// "features": {},
|
||||
```
|
||||
|
||||
1. Uncomment the `forwardPorts` property and change its value to port `5000` only.
|
||||
|
||||
```json{:copy}
|
||||
// Use 'forwardPorts' to make a list of ports inside the container available locally.
|
||||
"forwardPorts": [5000],
|
||||
```
|
||||
|
||||
1. Uncomment the `postCreateCommand` property.
|
||||
|
||||
```json{:copy}
|
||||
// Use 'postCreateCommand' to run commands after the container is created.
|
||||
"postCreateCommand": "dotnet restore",
|
||||
```
|
||||
|
||||
{% data reusables.codespaces.add-extension-to-devcontainer %}
|
||||
|
||||
```json
|
||||
// For format details, see https://aka.ms/devcontainer.json. For config options, see the
|
||||
// README at: https://github.com/devcontainers/templates/tree/main/src/dotnet
|
||||
{
|
||||
"name": "C# (.NET)",
|
||||
// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
|
||||
"image": "mcr.microsoft.com/devcontainers/dotnet:0-7.0",
|
||||
"features": {
|
||||
"ghcr.io/devcontainers/features/dotnet:1": {}
|
||||
},
|
||||
|
||||
// Use 'forwardPorts' to make a list of ports inside the container available locally.
|
||||
"forwardPorts": [5000],
|
||||
// "portsAttributes": {
|
||||
// "5001": {
|
||||
// "protocol": "https"
|
||||
// }
|
||||
// }
|
||||
|
||||
// Use 'postCreateCommand' to run commands after the container is created.
|
||||
"postCreateCommand": "dotnet restore",
|
||||
|
||||
// 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 %}
|
||||
{% indented_data_reference reusables.codespaces.rebuild-reason %}
|
||||
|
||||
After the dev container is rebuilt, and your codespace becomes available again, the `postCreateCommand` will have been run, restoring the required dependencies, 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 `dotnet restore` command. With the dependencies now installed, you can run the application.
|
||||
|
||||
1. Run the application by pressing `F5` or entering `dotnet watch run` in the Terminal.
|
||||
1. When the application starts, click the **Ports** tab, right-click port 5000 and 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 C# (.NET) project.
|
||||
|
||||
{% data reusables.codespaces.next-steps-adding-devcontainer %}
|
||||
@@ -0,0 +1,202 @@
|
||||
---
|
||||
title: Setting up a Java project for GitHub Codespaces
|
||||
allowTitleToDifferFromFilename: true
|
||||
shortTitle: Setting up a Java project
|
||||
intro: 'Get started with a Java project in {% data variables.product.prodname_github_codespaces %} by creating a custom dev container configuration.'
|
||||
redirect_from:
|
||||
- /codespaces/getting-started-with-codespaces/getting-started-with-your-java-project-in-codespaces
|
||||
versions:
|
||||
fpt: '*'
|
||||
ghec: '*'
|
||||
type: tutorial
|
||||
topics:
|
||||
- Codespaces
|
||||
- Developer
|
||||
- Set up
|
||||
---
|
||||
|
||||
## Introduction
|
||||
|
||||
This guide shows you how to set up an example Java project {% data reusables.codespaces.setting-up-project-intro %}
|
||||
|
||||
## Step 1: Open the project in a codespace
|
||||
|
||||
1. Go to https://github.com/microsoft/vscode-remote-try-java.
|
||||
{% 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 Java. It also includes a set of commonly used tools such as Gradle, Maven, 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 Java project like [vscode-remote-try-java](https://github.com/microsoft/vscode-remote-try-java). 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 `java` and click the **Java** option. Other options are available if your project uses particular tools. For example, Java & PostgreSQL.
|
||||
|
||||

|
||||
|
||||
1. Click the latest version of Java.
|
||||
|
||||

|
||||
|
||||
1. Select the option to **Install Maven** and click **OK**.
|
||||
|
||||

|
||||
|
||||
1. A list of additional features you can install is displayed. We'll install Ant, the Java library and command-line tool for building applications. To install this feature, type `ant`, select `Ant (via SDKMAN)`, then click **OK**.
|
||||
|
||||

|
||||
|
||||
{% data reusables.codespaces.overwrite-devcontainer-config %}
|
||||
{% data reusables.codespaces.details-of-devcontainer-config %}
|
||||
|
||||
```json
|
||||
// For format details, see https://aka.ms/devcontainer.json. For config options, see the
|
||||
// README at: https://github.com/devcontainers/templates/tree/main/src/java
|
||||
{
|
||||
"name": "Java",
|
||||
// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
|
||||
"image": "mcr.microsoft.com/devcontainers/java:0-17",
|
||||
|
||||
"features": {
|
||||
"ghcr.io/devcontainers/features/java:1": {
|
||||
"version": "none",
|
||||
"installMaven": "true",
|
||||
"installGradle": "false"
|
||||
},
|
||||
"ghcr.io/devcontainers-contrib/features/ant-sdkman: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": "java -version",
|
||||
|
||||
// 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 a command, after the dev container is created, to create a new file.
|
||||
* Automatically install two {% data variables.product.prodname_vscode_shortname %} extensions in this codespace.
|
||||
|
||||
1. In the `devcontainer.json` file, add a comma after the `features` property.
|
||||
|
||||
```json{:copy}
|
||||
"features": {
|
||||
"ghcr.io/devcontainers/features/java:1": {
|
||||
"version": "none",
|
||||
"installMaven": "true",
|
||||
"installGradle": "false"
|
||||
},
|
||||
"ghcr.io/devcontainers-contrib/features/ant-sdkman:2": {}
|
||||
},
|
||||
```
|
||||
|
||||
1. Uncomment the `postCreateCommand` property and change its value to `echo \"This file was added by the postCreateCommand.\" > TEMP.md`.
|
||||
|
||||
```json{:copy}
|
||||
// Use 'postCreateCommand' to run commands after the container is created.
|
||||
"postCreateCommand": "echo \"This file was added by the postCreateCommand.\" > TEMP.md",
|
||||
```
|
||||
|
||||
1. Uncomment the `customizations` property and edit it as follows to install the "Code Spell Checker" extension and the "Extension Pack for Java."
|
||||
|
||||
```json{:copy}
|
||||
// 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",
|
||||
"vscjava.vscode-java-pack"
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
The `devcontainer.json` file should now look similar to this, depending on which image you chose:
|
||||
|
||||
```json
|
||||
// For format details, see https://aka.ms/devcontainer.json. For config options, see the
|
||||
// README at: https://github.com/devcontainers/templates/tree/main/src/java
|
||||
{
|
||||
"name": "Java",
|
||||
// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
|
||||
"image": "mcr.microsoft.com/devcontainers/java:0-17",
|
||||
|
||||
"features": {
|
||||
"ghcr.io/devcontainers/features/java:1": {
|
||||
"version": "none",
|
||||
"installMaven": "true",
|
||||
"installGradle": "false"
|
||||
},
|
||||
"ghcr.io/devcontainers-contrib/features/ant-sdkman: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": "echo \"This file was added by the postCreateCommand.\" > TEMP.md",
|
||||
|
||||
// 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",
|
||||
"vscjava.vscode-java-pack"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
// 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 %}
|
||||
{% indented_data_reference reusables.codespaces.rebuild-reason %}
|
||||
|
||||
After the dev container is rebuilt, and your codespace becomes available again, the `postCreateCommand` will have been run, creating a `TEMP.md` file, and the two extensions will be available for use.
|
||||
|
||||
## Step 4: Run your application
|
||||
|
||||
1. Run the application by pressing `F5`.
|
||||
1. If a "toast" notification message is displayed at the bottom right corner of {% data variables.product.prodname_vscode_shortname %}, asking whether you want to switch to standard mode, click **Yes**.
|
||||
|
||||

|
||||
|
||||
1. When the project files have been imported, click the **Debug Console** tab to see the program output.
|
||||
|
||||

|
||||
|
||||
## 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 Java project.
|
||||
|
||||
{% data reusables.codespaces.next-steps-adding-devcontainer %}
|
||||
@@ -0,0 +1,168 @@
|
||||
---
|
||||
title: Setting up a Node.js project for GitHub Codespaces
|
||||
allowTitleToDifferFromFilename: true
|
||||
shortTitle: Setting up a Node.js project
|
||||
intro: 'Get started with a Node.js, JavaScript, or TypeScript project in {% data variables.product.prodname_github_codespaces %} by creating a custom dev container configuration.'
|
||||
versions:
|
||||
fpt: '*'
|
||||
ghec: '*'
|
||||
redirect_from:
|
||||
- /codespaces/getting-started-with-codespaces/getting-started-with-your-nodejs-project-in-codespaces
|
||||
type: tutorial
|
||||
topics:
|
||||
- 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
|
||||
|
||||
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](https://github.com/microsoft/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.
|
||||
|
||||

|
||||
|
||||
1. Click the latest version of Node.js.
|
||||
|
||||

|
||||
|
||||
1. 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 %}
|
||||
|
||||
```json
|
||||
// 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 %}
|
||||
|
||||
```json{:copy}
|
||||
"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`.
|
||||
|
||||
```json{:copy}
|
||||
// Use 'postCreateCommand' to run commands after the container is created.
|
||||
"postCreateCommand": "npm install",
|
||||
```
|
||||
|
||||
{% data reusables.codespaces.add-extension-to-devcontainer %}
|
||||
|
||||
```json
|
||||
// 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 %}
|
||||
{% indented_data_reference 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`.
|
||||
|
||||

|
||||
|
||||
1. 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 %}
|
||||
@@ -0,0 +1,170 @@
|
||||
---
|
||||
title: Setting up a Python project for GitHub Codespaces
|
||||
allowTitleToDifferFromFilename: true
|
||||
shortTitle: Setting up a Python project
|
||||
intro: 'Get started with a Python project in {% data variables.product.prodname_github_codespaces %} by creating a custom dev container configuration.'
|
||||
versions:
|
||||
fpt: '*'
|
||||
ghec: '*'
|
||||
redirect_from:
|
||||
- /codespaces/getting-started-with-codespaces/getting-started-with-your-python-project-in-codespaces
|
||||
type: tutorial
|
||||
topics:
|
||||
- Codespaces
|
||||
- Developer
|
||||
- Set up
|
||||
---
|
||||
|
||||
## Introduction
|
||||
|
||||
This guide shows you how to set up an example Python project {% data reusables.codespaces.setting-up-project-intro %}
|
||||
|
||||
## Step 1: Open the project in a codespace
|
||||
|
||||
1. Go to https://github.com/microsoft/vscode-remote-try-python.
|
||||
{% 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 Python. It also includes a common set of tools like 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 %} comes with the latest Python version, package managers (pip, Miniconda), and other common tools preinstalled. 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. Start typing `python` and click **Python 3** in the list. Other options are available if your project uses particular tools. For example, Python 3 & PostgreSQL.
|
||||
|
||||

|
||||
|
||||
1. Click the latest version of Python 3.
|
||||
|
||||

|
||||
|
||||
1. A list of additional features is displayed. We'll install Coverage.py, a code coverage tool for Python. To install this tool, type `py`, select `Coverage.py (via pipx)`, then click **OK**.
|
||||
|
||||

|
||||
|
||||
{% data reusables.codespaces.overwrite-devcontainer-config %}
|
||||
{% data reusables.codespaces.details-of-devcontainer-config %}
|
||||
|
||||
```json
|
||||
// For format details, see https://aka.ms/devcontainer.json. For config options, see the
|
||||
// README at: https://github.com/devcontainers/templates/tree/main/src/python
|
||||
{
|
||||
"name": "Python 3",
|
||||
// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
|
||||
"image": "mcr.microsoft.com/devcontainers/python:0-3.11-bullseye",
|
||||
"features": {
|
||||
"ghcr.io/devcontainers-contrib/features/coverage-py: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": "pip3 install --user -r requirements.txt",
|
||||
|
||||
// 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:
|
||||
* Install a package required by the application.
|
||||
* Install a {% data variables.product.prodname_vscode_shortname %} extension in this codespace.
|
||||
|
||||
{% data reusables.codespaces.add-comma-after-features %}
|
||||
|
||||
```json{:copy}
|
||||
"features": {
|
||||
"ghcr.io/devcontainers-contrib/features/coverage-py:2": {}
|
||||
},
|
||||
|
||||
// Features to add to the dev container. More info: https://containers.dev/features.
|
||||
// "features": {},
|
||||
```
|
||||
|
||||
1. Uncomment the `postCreateCommand` property.
|
||||
|
||||
```json{:copy}
|
||||
// Use 'postCreateCommand' to run commands after the container is created.
|
||||
"postCreateCommand": "pip3 install --user -r requirements.txt",
|
||||
```
|
||||
|
||||
{% data reusables.codespaces.add-extension-to-devcontainer %}
|
||||
|
||||
```json
|
||||
// For format details, see https://aka.ms/devcontainer.json. For config options, see the
|
||||
// README at: https://github.com/devcontainers/templates/tree/main/src/python
|
||||
{
|
||||
"name": "Python 3",
|
||||
// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
|
||||
"image": "mcr.microsoft.com/devcontainers/python:0-3.11-bullseye",
|
||||
"features": {
|
||||
"ghcr.io/devcontainers-contrib/features/coverage-py: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": "pip3 install --user -r requirements.txt",
|
||||
|
||||
// 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 %}
|
||||
{% indented_data_reference reusables.codespaces.rebuild-reason %}
|
||||
|
||||
After the dev container is rebuilt, and your codespace becomes available again, the `postCreateCommand` will have been run, installing the package listed in the `requirements.txt` file, 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 package for the Flask web framework. You can now use this to run the web application.
|
||||
|
||||
1. In the Terminal of your codespace, enter `python -m flask run`.
|
||||
|
||||

|
||||
|
||||
1. 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 Python project.
|
||||
|
||||
{% data reusables.codespaces.next-steps-adding-devcontainer %}
|
||||
@@ -10,6 +10,8 @@ type: how_to
|
||||
topics:
|
||||
- Codespaces
|
||||
- Set up
|
||||
redirect_from:
|
||||
- /codespaces/setting-up-your-project-for-codespaces/adding-features-to-a-devcontainer-file
|
||||
---
|
||||
|
||||
{% data reusables.codespaces.about-features %} Use the tabs in this article to display instructions for each of these ways of adding features.
|
||||
@@ -19,8 +21,8 @@ topics:
|
||||
{% webui %}
|
||||
|
||||
1. Navigate to your repository on {% data variables.product.prodname_dotcom_the_website %}, find your `devcontainer.json` file, and click {% octicon "pencil" aria-label="The edit icon" %} to edit the file.
|
||||
|
||||
If you don't already have a `devcontainer.json` file, you can create one now. For more information, see "[Introduction to dev containers](/codespaces/setting-up-your-project-for-codespaces/introduction-to-dev-containers#creating-a-custom-dev-container-configuration)."
|
||||
|
||||
If you don't already have a `devcontainer.json` file, you can create one now. For more information, see "[Introduction to dev containers](/codespaces/setting-up-your-project-for-codespaces/adding-a-dev-container-configuration/introduction-to-dev-containers#creating-a-custom-dev-container-configuration)."
|
||||
1. To the right of the file editor, in the **Marketplace** tab, browse or search for the feature you want to add, then click the name of the feature.
|
||||
|
||||

|
||||
@@ -51,7 +53,7 @@ topics:
|
||||
```
|
||||
1. Commit the changes to your `devcontainer.json` file.
|
||||
|
||||
The configuration changes will take effect in new codespaces created from the repository. To make the changes take effect in existing codespaces, you will need to pull the updates to the `devcontainer.json` file into your codespace, then rebuild the container for the codespace. For more information, see "[Introduction to dev containers](/codespaces/setting-up-your-project-for-codespaces/introduction-to-dev-containers#applying-configuration-changes-to-a-codespace)."
|
||||
The configuration changes will take effect in new codespaces created from the repository. To make the changes take effect in existing codespaces, you will need to pull the updates to the `devcontainer.json` file into your codespace, then rebuild the container for the codespace. For more information, see "[Introduction to dev containers](/codespaces/setting-up-your-project-for-codespaces/adding-a-dev-container-configuration/introduction-to-dev-containers#applying-configuration-changes-to-a-codespace)."
|
||||
|
||||
{% endwebui %}
|
||||
|
||||
@@ -10,11 +10,13 @@ type: how_to
|
||||
topics:
|
||||
- Codespaces
|
||||
- Set up
|
||||
redirect_from:
|
||||
- /codespaces/setting-up-your-project-for-codespaces/automatically-opening-files-in-the-codespaces-for-a-repository
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
If there's a particular file that's useful for people to see when they create a codespace for your repository, you can set this file to be opened automatically in the {% data variables.product.prodname_vscode_shortname %} web client. You set this up in the dev container configuration file for your repository.
|
||||
If there's a particular file that's useful for people to see when they create a codespace for your repository, you can set this file to be opened automatically in the {% data variables.product.prodname_vscode_shortname %} web client. You set this up in the dev container configuration file for your repository.
|
||||
|
||||
The file, or files, you specify are only opened the first time a codespace is opened in the web client. If the person closes the specified files, those files are not automatically reopened the next time that person opens or restarts the codespace.
|
||||
|
||||
@@ -42,9 +44,9 @@ The file, or files, you specify are only opened the first time a codespace is op
|
||||
```
|
||||
|
||||
The value of the `openFiles` property is an array of one or more files in your repository. The paths are relative to the root of the repository (absolute paths are not supported). The files are opened in the web client in the order specified, with the first file in the array displayed in the editor.
|
||||
|
||||
|
||||
1. Save the file and commit your changes to the required branch of the repository.
|
||||
|
||||
## Further reading
|
||||
|
||||
- "[Introduction to dev containers](/codespaces/setting-up-your-project-for-codespaces/introduction-to-dev-containers)"
|
||||
- "[Introduction to dev containers](/codespaces/setting-up-your-project-for-codespaces/adding-a-dev-container-configuration/introduction-to-dev-containers)"
|
||||
@@ -0,0 +1,12 @@
|
||||
---
|
||||
title: Configuring dev containers
|
||||
allowTitleToDifferFromFilename: true
|
||||
intro: 'You can customize the dev container configuration for your repository.'
|
||||
versions:
|
||||
fpt: '*'
|
||||
ghec: '*'
|
||||
children:
|
||||
- /setting-a-minimum-specification-for-codespace-machines
|
||||
- /adding-features-to-a-devcontainer-file
|
||||
- /automatically-opening-files-in-the-codespaces-for-a-repository
|
||||
---
|
||||
@@ -10,6 +10,8 @@ type: how_to
|
||||
topics:
|
||||
- Codespaces
|
||||
- Set up
|
||||
redirect_from:
|
||||
- /codespaces/setting-up-your-project-for-codespaces/setting-a-minimum-specification-for-codespace-machines
|
||||
---
|
||||
|
||||
## Overview
|
||||
@@ -35,14 +37,14 @@ If your project needs a certain level of compute power, you can configure {% dat
|
||||
"hostRequirements": {
|
||||
"cpus": 8,
|
||||
"memory": "8gb",
|
||||
"storage": "32gb"
|
||||
"storage": "32gb"
|
||||
}
|
||||
```
|
||||
|
||||
You can specify any or all of the options: `cpus`, `memory`, and `storage`.
|
||||
|
||||
|
||||
To check the specifications of the {% data variables.product.prodname_github_codespaces %} machine types that are currently available for your repository, step through the process of creating a codespace until you see the choice of machine types. For more information, see "[Creating a codespace for a repository](/codespaces/developing-in-codespaces/creating-a-codespace-for-a-repository#creating-a-codespace-for-a-repository)."
|
||||
|
||||
|
||||
1. Save the file and commit your changes to the required branch of the repository.
|
||||
|
||||
Now when you create a codespace for that branch of the repository, and you go to the creation configuration options, you will only be able to select machine types that match or exceed the resources you've specified.
|
||||
@@ -51,4 +53,4 @@ If your project needs a certain level of compute power, you can configure {% dat
|
||||
|
||||
## Further reading
|
||||
|
||||
- "[Introduction to dev containers](/codespaces/setting-up-your-project-for-codespaces/introduction-to-dev-containers)"
|
||||
- "[Introduction to dev containers](/codespaces/setting-up-your-project-for-codespaces/adding-a-dev-container-configuration/introduction-to-dev-containers)"
|
||||
@@ -1,24 +1,13 @@
|
||||
---
|
||||
title: 'Setting up your repository for {% data variables.product.prodname_github_codespaces %}'
|
||||
shortTitle: Setting up your repository
|
||||
title: 'Setting up your project for {% data variables.product.prodname_github_codespaces %}'
|
||||
shortTitle: Setting up your project
|
||||
allowTitleToDifferFromFilename: true
|
||||
intro: 'Learn how to get started with {% data variables.product.prodname_github_codespaces %}, including set up and configuration for specific languages.'
|
||||
intro: 'You can configure {% data variables.product.prodname_github_codespaces %} for the specific requirements of your project. Every time you create a codespace from your repository your working environment will have everything you need.'
|
||||
versions:
|
||||
fpt: '*'
|
||||
ghec: '*'
|
||||
redirect_from:
|
||||
- /codespaces/getting-started-with-codespaces
|
||||
children:
|
||||
- /introduction-to-dev-containers
|
||||
- /setting-up-your-project-for-codespaces
|
||||
- /setting-up-your-nodejs-project-for-codespaces
|
||||
- /setting-up-your-dotnet-project-for-codespaces
|
||||
- /setting-up-your-java-project-for-codespaces
|
||||
- /setting-up-your-python-project-for-codespaces
|
||||
- /setting-a-minimum-specification-for-codespace-machines
|
||||
- /adding-features-to-a-devcontainer-file
|
||||
- /automatically-opening-files-in-the-codespaces-for-a-repository
|
||||
- /adding-a-codespaces-badge
|
||||
- /setting-up-a-template-repository-for-github-codespaces
|
||||
- /adding-a-dev-container-configuration
|
||||
- /configuring-dev-containers
|
||||
- /setting-up-your-repository
|
||||
---
|
||||
|
||||
|
||||
@@ -1,212 +0,0 @@
|
||||
---
|
||||
title: Setting up your C# (.NET) project for GitHub Codespaces
|
||||
shortTitle: Setting up your C# (.NET) project
|
||||
allowTitleToDifferFromFilename: true
|
||||
intro: 'Get started with your C# (.NET) project in {% data variables.product.prodname_github_codespaces %} by creating a custom dev container.'
|
||||
redirect_from:
|
||||
- /codespaces/getting-started-with-codespaces/getting-started-with-your-dotnet-project
|
||||
versions:
|
||||
fpt: '*'
|
||||
ghec: '*'
|
||||
topics:
|
||||
- Codespaces
|
||||
hasExperimentalAlternative: true
|
||||
hidden: true
|
||||
---
|
||||
|
||||
## Introduction
|
||||
|
||||
This guide shows you how to set up your C# (.NET) project {% data reusables.codespaces.setting-up-project-intro %}
|
||||
|
||||
### Prerequisites
|
||||
|
||||
- You should have an existing C# (.NET) project in a repository on {% data variables.product.prodname_dotcom_the_website %}. If you don't have a project, you can try this tutorial with the following example: https://github.com/2percentsilk/dotnet-quickstart.
|
||||
- You must have {% data variables.product.prodname_github_codespaces %} enabled for your organization.
|
||||
|
||||
## Step 1: Open your project in a codespace
|
||||
|
||||
1. Under the repository name, use the **{% octicon "code" aria-label="The code icon" %} Code** dropdown menu, and in the **Codespaces** tab, click the plus sign ({% octicon "plus" aria-label="The plus icon" %}).
|
||||
|
||||

|
||||
|
||||
When you create a codespace, your project is created on a remote VM that is dedicated to you. By default, the container for your codespace has many languages and runtimes including .NET. It also includes a common set of tools like git, wget, rsync, openssh, and nano.
|
||||
|
||||
{% data reusables.codespaces.customize-vcpus-and-ram %}
|
||||
|
||||
## Step 2: Add a dev container configuration to your repository from a template
|
||||
|
||||
The default development container, or "dev container," for {% data variables.product.prodname_github_codespaces %} comes with the latest .NET version and common tools preinstalled. However, we recommend that you configure your own dev container to include all of the tools and scripts that 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. For this example, click **C# (.NET)**. If you need additional features you can select any container that’s specific to C# (.NET) or a combination of tools such as C# (.NET) and MS SQL.
|
||||

|
||||
1. Click the recommended version of .NET.
|
||||

|
||||
1. Accept the default option to add Node.js to your customization.
|
||||

|
||||
{% data reusables.codespaces.rebuild-command %}
|
||||
|
||||
### Anatomy of your dev container
|
||||
|
||||
Adding the C# (.NET) dev container template adds a `.devcontainer` folder to the root of your project's repository with the following files:
|
||||
|
||||
- `devcontainer.json`
|
||||
- Dockerfile
|
||||
|
||||
The newly added `devcontainer.json` file defines a few properties that are described after the sample.
|
||||
|
||||
#### devcontainer.json
|
||||
|
||||
```json
|
||||
{
|
||||
"name": "C# (.NET)",
|
||||
"build": {
|
||||
"dockerfile": "Dockerfile",
|
||||
"args": {
|
||||
// Update 'VARIANT' to pick a .NET Core version: 2.1, 3.1, 5.0
|
||||
"VARIANT": "5.0",
|
||||
// Options
|
||||
"INSTALL_NODE": "true",
|
||||
"NODE_VERSION": "lts/*",
|
||||
"INSTALL_AZURE_CLI": "false"
|
||||
}
|
||||
},
|
||||
|
||||
// Set *default* container specific settings.json values on container create.
|
||||
"settings": {
|
||||
"terminal.integrated.shell.linux": "/bin/bash"
|
||||
},
|
||||
|
||||
// Add the IDs of extensions you want installed when the container is created.
|
||||
"extensions": [
|
||||
"ms-dotnettools.csharp"
|
||||
],
|
||||
|
||||
// Use 'forwardPorts' to make a list of ports inside the container available locally.
|
||||
// "forwardPorts": [5000, 5001],
|
||||
|
||||
// [Optional] To reuse of your local HTTPS dev cert:
|
||||
//
|
||||
// 1. Export it locally using this command:
|
||||
// * Windows PowerShell:
|
||||
// dotnet dev-certs https --trust; dotnet dev-certs https -ep "$env:USERPROFILE/.aspnet/https/aspnetapp.pfx" -p "SecurePwdGoesHere"
|
||||
// * macOS/Linux terminal:
|
||||
// dotnet dev-certs https --trust; dotnet dev-certs https -ep "${HOME}/.aspnet/https/aspnetapp.pfx" -p "SecurePwdGoesHere"
|
||||
//
|
||||
// 2. Uncomment these 'remoteEnv' lines:
|
||||
// "remoteEnv": {
|
||||
// "ASPNETCORE_Kestrel__Certificates__Default__Password": "SecurePwdGoesHere",
|
||||
// "ASPNETCORE_Kestrel__Certificates__Default__Path": "/home/vscode/.aspnet/https/aspnetapp.pfx",
|
||||
// },
|
||||
//
|
||||
// 3. Start the container.
|
||||
//
|
||||
// 4. Drag ~/.aspnet/https/aspnetapp.pfx into the root of the file explorer.
|
||||
//
|
||||
// 5. Open a terminal in VS Code and run "mkdir -p /home/vscode/.aspnet/https && mv aspnetapp.pfx /home/vscode/.aspnet/https".
|
||||
//
|
||||
|
||||
// Use 'postCreateCommand' to run commands after the container is created.
|
||||
// "postCreateCommand": "dotnet restore",
|
||||
|
||||
// Comment out connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
|
||||
"remoteUser": "vscode"
|
||||
}
|
||||
```
|
||||
|
||||
- **name** - You can name our dev container anything, this is just the default.
|
||||
- **build** - The build properties.
|
||||
- **dockerfile** - In the `build` object, `dockerfile` contains the path to the Dockerfile that was also added from the template.
|
||||
- **args**
|
||||
- **variant**: This file only contains one build argument, which is the .NET Core version that we want to use.
|
||||
- **settings** - These are {% data variables.product.prodname_vscode %} settings.
|
||||
- **terminal.integrated.shell.linux** - While bash is the default here, you could use other terminal shells by modifying this.
|
||||
- **extensions** - These are extensions included by default.
|
||||
- **ms-dotnettools.csharp** - The Microsoft C# extension provides rich support for developing in C#, including features such as IntelliSense, linting, debugging, code navigation, code formatting, refactoring, variable explorer, test explorer, and more.
|
||||
- **forwardPorts** - Any ports listed here will be forwarded automatically. For more information, see "[Forwarding ports in your codespace](/codespaces/developing-in-codespaces/forwarding-ports-in-your-codespace)."
|
||||
- **postCreateCommand** - Use this to run commands that aren't defined in the Dockerfile, after your codespace is created.
|
||||
- **remoteUser** - By default, you’re running as the vscode user, but you can optionally set this to root.
|
||||
|
||||
#### Dockerfile
|
||||
|
||||
```bash
|
||||
# [Choice] .NET version: 5.0, 3.1, 2.1
|
||||
ARG VARIANT="5.0"
|
||||
FROM mcr.microsoft.com/vscode/devcontainers/dotnetcore:0-${VARIANT}
|
||||
|
||||
# [Option] Install Node.js
|
||||
ARG INSTALL_NODE="true"
|
||||
ARG NODE_VERSION="lts/*"
|
||||
RUN if [ "${INSTALL_NODE}" = "true" ]; then su vscode -c "umask 0002 && . /usr/local/share/nvm/nvm.sh && nvm install ${NODE_VERSION} 2>&1"; fi
|
||||
|
||||
# [Option] Install Azure CLI
|
||||
ARG INSTALL_AZURE_CLI="false"
|
||||
COPY library-scripts/azcli-debian.sh /tmp/library-scripts/
|
||||
RUN if [ "$INSTALL_AZURE_CLI" = "true" ]; then bash /tmp/library-scripts/azcli-debian.sh; fi \
|
||||
&& apt-get clean -y && rm -rf /var/lib/apt/lists/* /tmp/library-scripts
|
||||
|
||||
# [Optional] Uncomment this section to install additional OS packages.
|
||||
# RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
|
||||
# && apt-get -y install --no-install-recommends <your-package-list-here>
|
||||
|
||||
# [Optional] Uncomment this line to install global node packages.
|
||||
# RUN su vscode -c "source /usr/local/share/nvm/nvm.sh && npm install -g <your-package-here>" 2>&1
|
||||
```
|
||||
|
||||
You can use the Dockerfile to add additional container layers to specify OS packages, node versions, or global packages we want included in our container.
|
||||
|
||||
## 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 to install extensions and your project dependencies when your codespace launches.
|
||||
|
||||
1. In the Explorer, select the `devcontainer.json` file from the tree to open it. You might have to expand the `.devcontainer` folder to see it.
|
||||
|
||||

|
||||
|
||||
2. Update your the `extensions` list in your `devcontainer.json` file to add a few extensions that are useful when working with your project.
|
||||
|
||||
```json{:copy}
|
||||
"extensions": [
|
||||
"ms-dotnettools.csharp",
|
||||
"streetsidesoftware.code-spell-checker",
|
||||
],
|
||||
```
|
||||
|
||||
3. Uncomment the `postCreateCommand` to restore dependencies as part of the codespace setup process.
|
||||
|
||||
```json{:copy}
|
||||
// Use 'postCreateCommand' to run commands after the container is created.
|
||||
"postCreateCommand": "dotnet restore",
|
||||
```
|
||||
|
||||
{% data reusables.codespaces.more-info-devcontainer %}
|
||||
|
||||
{% data reusables.codespaces.rebuild-command %}
|
||||
|
||||
{% data reusables.codespaces.rebuild-reason %}
|
||||
|
||||
5. Check your changes were successfully applied by verifying the "Code Spell Checker" extension was installed.
|
||||
|
||||

|
||||
|
||||
## Step 4: Run your application
|
||||
|
||||
In the previous section, you used the `postCreateCommand` to install a set of packages via the `dotnet restore` command. With our dependencies now installed, we can run our application.
|
||||
|
||||
1. Run your application by pressing `F5` or entering `dotnet watch run` in your terminal.
|
||||
|
||||
2. When your project starts, you should see a "toast" notification message at the bottom right corner of {% data variables.product.prodname_vscode_shortname %}, containing a prompt to connect to the port your project uses.
|
||||
|
||||

|
||||
|
||||
## Step 5: Commit your changes
|
||||
|
||||
{% data reusables.codespaces.committing-link-to-procedure %}
|
||||
|
||||
## Next steps
|
||||
|
||||
You should now be ready start developing your C# (.NET) project in {% data variables.product.prodname_github_codespaces %}. Here are some additional resources for more advanced scenarios.
|
||||
|
||||
{% data reusables.codespaces.next-steps-adding-devcontainer %}
|
||||
@@ -1,183 +0,0 @@
|
||||
---
|
||||
title: Setting up your Java project for GitHub Codespaces
|
||||
allowTitleToDifferFromFilename: true
|
||||
shortTitle: Setting up with your Java project
|
||||
intro: 'Get started with your Java project in {% data variables.product.prodname_github_codespaces %} by creating a custom dev container.'
|
||||
redirect_from:
|
||||
- /codespaces/getting-started-with-codespaces/getting-started-with-your-java-project-in-codespaces
|
||||
versions:
|
||||
fpt: '*'
|
||||
ghec: '*'
|
||||
topics:
|
||||
- Codespaces
|
||||
hasExperimentalAlternative: true
|
||||
hidden: true
|
||||
---
|
||||
|
||||
## Introduction
|
||||
|
||||
This guide shows you how to set up your Java project {% data reusables.codespaces.setting-up-project-intro %}
|
||||
|
||||
### Prerequisites
|
||||
|
||||
- You should have an existing Java project in a repository on {% data variables.product.prodname_dotcom_the_website %}. If you don't have a project, you can try this tutorial with the following example: https://github.com/microsoft/vscode-remote-try-java
|
||||
- You must have {% data variables.product.prodname_github_codespaces %} enabled for your organization.
|
||||
|
||||
## Step 1: Open your project in a codespace
|
||||
|
||||
1. Under the repository name, use the **{% octicon "code" aria-label="The code icon" %} Code** dropdown menu, and in the **Codespaces** tab, click the plus sign ({% octicon "plus" aria-label="The plus icon" %}).
|
||||
|
||||

|
||||
|
||||
When you create a codespace, your project is created on a remote VM that is dedicated to you. By default, the container for your codespace has many languages and runtimes including Java, nvm, npm, and Yarn. It also includes a set of commonly used tools such as git, wget, rsync, openssh, and nano.
|
||||
|
||||
{% data reusables.codespaces.customize-vcpus-and-ram %}
|
||||
|
||||
## Step 2: Add a dev container configuration to your repository from a template
|
||||
|
||||
The default development container, or "dev container," for {% data variables.product.prodname_github_codespaces %} comes with the latest Java version, package managers (Maven, Gradle), and other common tools preinstalled. However, we recommend that you configure your own dev container to include all of the tools and scripts that 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. For this example, click **Java**. In practice, you could select any container that’s specific to Java or a combination of tools such as Java and Azure Functions.
|
||||

|
||||
1. Click the recommended version of Java.
|
||||

|
||||
{% data reusables.codespaces.rebuild-command %}
|
||||
|
||||
### Anatomy of your dev container
|
||||
|
||||
Adding the Java dev container template adds a `.devcontainer` directory to the root of your project's repository with the following files:
|
||||
|
||||
- `devcontainer.json`
|
||||
- Dockerfile
|
||||
|
||||
The newly added `devcontainer.json` file defines a few properties that are described after the sample.
|
||||
|
||||
#### devcontainer.json
|
||||
|
||||
```json
|
||||
// For format details, see https://aka.ms/vscode-remote/devcontainer.json or this file's README at:
|
||||
// https://github.com/microsoft/vscode-dev-containers/tree/v0.159.0/containers/java
|
||||
{
|
||||
"name": "Java",
|
||||
"build": {
|
||||
"dockerfile": "Dockerfile",
|
||||
"args": {
|
||||
// Update the VARIANT arg to pick a Java version: 11, 14
|
||||
"VARIANT": "11",
|
||||
// Options
|
||||
"INSTALL_MAVEN": "true",
|
||||
"INSTALL_GRADLE": "false",
|
||||
"INSTALL_NODE": "false",
|
||||
"NODE_VERSION": "lts/*"
|
||||
}
|
||||
},
|
||||
|
||||
// Set *default* container specific settings.json values on container create.
|
||||
"settings": {
|
||||
"terminal.integrated.shell.linux": "/bin/bash",
|
||||
"java.home": "/docker-java-home",
|
||||
"maven.executable.path": "/usr/local/sdkman/candidates/maven/current/bin/mvn"
|
||||
},
|
||||
|
||||
// Add the IDs of extensions you want installed when the container is created.
|
||||
"extensions": [
|
||||
"vscjava.vscode-java-pack"
|
||||
],
|
||||
|
||||
// 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": "java -version",
|
||||
|
||||
// Uncomment to connect as a non-root user. See https://aka.ms/vscode-remote/containers/non-root.
|
||||
"remoteUser": "vscode"
|
||||
}
|
||||
```
|
||||
|
||||
- **name** - You can name your dev container anything, this is just the default.
|
||||
- **build** - The build properties.
|
||||
- **dockerfile** - In the `build` object, `dockerfile` contains the path to the Dockerfile that was also added from the template.
|
||||
- **args**
|
||||
- **variant**: This file only contains one build argument, which is the Java version that is passed into the Dockerfile.
|
||||
- **settings** - These are {% data variables.product.prodname_vscode %} settings that you can set.
|
||||
- **terminal.integrated.shell.linux** - While bash is the default here, you could use other terminal shells by modifying this.
|
||||
- **extensions** - These are extensions included by default.
|
||||
- **vscjava.vscode-java-pack** - The Java Extension Pack provides popular extensions for Java development to get you started.
|
||||
- **forwardPorts** - Any ports listed here will be forwarded automatically. For more information, see "[Forwarding ports in your codespace](/codespaces/developing-in-codespaces/forwarding-ports-in-your-codespace)."
|
||||
- **postCreateCommand** - Use this to run commands that aren't defined in the Dockerfile, after your codespace is created.
|
||||
- **remoteUser** - By default, you’re running as the `vscode` user, but you can optionally set this to `root`.
|
||||
|
||||
#### Dockerfile
|
||||
|
||||
```bash
|
||||
# See here for image contents: https://github.com/microsoft/vscode-dev-containers/tree/v0.159.0/containers/java/.devcontainer/base.Dockerfile
|
||||
ARG VARIANT="14"
|
||||
FROM mcr.microsoft.com/vscode/devcontainers/java:0-${VARIANT}
|
||||
|
||||
# [Optional] Install Maven or Gradle
|
||||
ARG INSTALL_MAVEN="false"
|
||||
ARG MAVEN_VERSION=3.6.3
|
||||
ARG INSTALL_GRADLE="false"
|
||||
ARG GRADLE_VERSION=5.4.1
|
||||
RUN if [ "${INSTALL_MAVEN}" = "true" ]; then su vscode -c "source /usr/local/sdkman/bin/sdkman-init.sh && sdk install maven \"${MAVEN_VERSION}\""; fi \
|
||||
&& if [ "${INSTALL_GRADLE}" = "true" ]; then su vscode -c "source /usr/local/sdkman/bin/sdkman-init.sh && sdk install gradle \"${GRADLE_VERSION}\""; fi
|
||||
|
||||
# [Optional] Install a version of Node.js using nvm for front end dev
|
||||
ARG INSTALL_NODE="true"
|
||||
ARG NODE_VERSION="lts/*"
|
||||
RUN if [ "${INSTALL_NODE}" = "true" ]; then su vscode -c "source /usr/local/share/nvm/nvm.sh && nvm install ${NODE_VERSION} 2>&1"; fi
|
||||
|
||||
# [Optional] Uncomment this section to install additional OS packages.
|
||||
# RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
|
||||
# && apt-get -y install --no-install-recommends <your-package-list-here>
|
||||
|
||||
# [Optional] Uncomment this line to install global node packages.
|
||||
# RUN su vscode -c "source /usr/local/share/nvm/nvm.sh && npm install -g <your-package-here>" 2>&1
|
||||
```
|
||||
|
||||
You can use the Dockerfile to add additional container layers to specify OS packages, Java versions, or global packages we want included in our container.
|
||||
|
||||
## 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 to install extensions and your project dependencies when your codespace launches.
|
||||
|
||||
1. In the Explorer, select the `devcontainer.json` file from the tree to open it. You might have to expand the `.devcontainer` folder to see it.
|
||||
|
||||

|
||||
|
||||
2. Add the following lines to your `devcontainer.json` file after `extensions`.
|
||||
|
||||
```json{:copy}
|
||||
"postCreateCommand": "npm install",
|
||||
"forwardPorts": [4000],
|
||||
```
|
||||
|
||||
{% data reusables.codespaces.more-info-devcontainer %}
|
||||
|
||||
{% data reusables.codespaces.rebuild-command %}
|
||||
|
||||
{% data reusables.codespaces.rebuild-reason %}
|
||||
|
||||
## Step 4: Run your application
|
||||
|
||||
In the previous section, you used the `postCreateCommand` to install a set of packages via npm. You can now use this to run our application with npm.
|
||||
|
||||
1. Run your application by pressing `F5`.
|
||||
|
||||
2. When your project starts, you should see a "toast" notification message at the bottom right corner of {% data variables.product.prodname_vscode_shortname %}, containing a prompt to connect to the port your project uses.
|
||||
|
||||

|
||||
|
||||
## Step 5: Commit your changes
|
||||
|
||||
{% data reusables.codespaces.committing-link-to-procedure %}
|
||||
|
||||
## Next steps
|
||||
|
||||
You should now be ready start developing your Java project in {% data variables.product.prodname_github_codespaces %}. Here are some additional resources for more advanced scenarios.
|
||||
|
||||
{% data reusables.codespaces.next-steps-adding-devcontainer %}
|
||||
@@ -1,177 +0,0 @@
|
||||
---
|
||||
title: Setting up your Node.js project for GitHub Codespaces
|
||||
allowTitleToDifferFromFilename: true
|
||||
shortTitle: Setting up your Node.js project
|
||||
intro: 'Get started with your JavaScript, Node.js, or TypeScript project in {% data variables.product.prodname_github_codespaces %} by creating a custom dev container.'
|
||||
versions:
|
||||
fpt: '*'
|
||||
ghec: '*'
|
||||
redirect_from:
|
||||
- /codespaces/getting-started-with-codespaces/getting-started-with-your-nodejs-project-in-codespaces
|
||||
type: tutorial
|
||||
topics:
|
||||
- Codespaces
|
||||
- Developer
|
||||
- Node
|
||||
- JavaScript
|
||||
hasExperimentalAlternative: true
|
||||
hidden: true
|
||||
---
|
||||
|
||||
|
||||
|
||||
## Introduction
|
||||
|
||||
This guide shows you how to set up your JavaScript, Node.js, or TypeScript project {% data reusables.codespaces.setting-up-project-intro %}
|
||||
|
||||
### Prerequisites
|
||||
|
||||
- You should have an existing JavaScript, Node.js, or TypeScript project in a repository on {% data variables.product.prodname_dotcom_the_website %}. If you don't have a project, you can try this tutorial with the following example: https://github.com/microsoft/vscode-remote-try-node
|
||||
- You must have {% data variables.product.prodname_github_codespaces %} enabled for your organization.
|
||||
|
||||
## Step 1: Open your project in a codespace
|
||||
|
||||
1. Under the repository name, use the **{% octicon "code" aria-label="The code icon" %} Code** dropdown menu, and in the **Codespaces** tab, click the plus sign ({% octicon "plus" aria-label="The plus icon" %}).
|
||||
|
||||

|
||||
|
||||
When you create a codespace, your project is created on a remote VM that is dedicated to you. By default, the container for your codespace has many languages and runtimes including Node.js, JavaScript, Typescript, nvm, npm, and yarn. It also includes a common set of tools like git, wget, rsync, openssh, and nano.
|
||||
|
||||
{% data reusables.codespaces.customize-vcpus-and-ram %}
|
||||
|
||||
## Step 2: Add a dev container configuration to your repository from a template
|
||||
|
||||
The default development container, or "dev container," for {% data variables.product.prodname_github_codespaces %} will support running Node.js projects like [vscode-remote-try-node](https://github.com/microsoft/vscode-remote-try-node) out of the box. However, we recommend that you configure your own dev container, as this allows you to define any particular 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. For this example, click **Node.js**. If you need additional features you can select any container that’s specific to Node or a combination of tools such as Node and MongoDB.
|
||||
|
||||

|
||||
|
||||
1. Click the recommended version of Node.js.
|
||||
|
||||

|
||||
|
||||
{% data reusables.codespaces.rebuild-command %}
|
||||
|
||||
### Anatomy of your dev container
|
||||
|
||||
Adding the Node.js dev container template adds a `.devcontainer` directory to the root of your project's repository with the following files:
|
||||
|
||||
- `devcontainer.json`
|
||||
- Dockerfile
|
||||
|
||||
The newly added `devcontainer.json` file defines a few properties that are described after the sample.
|
||||
|
||||
#### devcontainer.json
|
||||
|
||||
```json
|
||||
// For format details, see https://aka.ms/devcontainer.json. For config options, see the README at:
|
||||
// https://github.com/microsoft/vscode-dev-containers/tree/v0.162.0/containers/javascript-node
|
||||
{
|
||||
"name": "Node.js",
|
||||
"build": {
|
||||
"dockerfile": "Dockerfile",
|
||||
// Update 'VARIANT' to pick a Node version: 10, 12, 14
|
||||
"args": { "VARIANT": "14" }
|
||||
},
|
||||
|
||||
// Set *default* container specific settings.json values on container create.
|
||||
"settings": {
|
||||
"terminal.integrated.shell.linux": "/bin/bash"
|
||||
},
|
||||
|
||||
// Add the IDs of extensions you want installed when the container is created.
|
||||
"extensions": [
|
||||
"dbaeumer.vscode-eslint"
|
||||
],
|
||||
|
||||
// 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",
|
||||
|
||||
// Comment out connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
|
||||
"remoteUser": "node"
|
||||
}
|
||||
```
|
||||
|
||||
- **name** - You can name your dev container anything, this is just the default.
|
||||
- **build** - The build properties.
|
||||
- **dockerfile** - In the `build` object, `dockerfile` contains the path to the Dockerfile that was also added from the template.
|
||||
- **args**
|
||||
- **variant**: This file only contains one build argument, which is the node variant we want to use that is passed into the Dockerfile.
|
||||
- **settings** - These are {% data variables.product.prodname_vscode %} settings that you can set.
|
||||
- **terminal.integrated.shell.linux** - While bash is the default here, you could use other terminal shells by modifying this.
|
||||
- **extensions** - These are extensions included by default.
|
||||
- **dbaeumer.vscode-eslint** - ES lint is a great extension for linting, but for JavaScript there are a number of great Marketplace extensions you could also include.
|
||||
- **forwardPorts** - Any ports listed here will be forwarded automatically. For more information, see "[Forwarding ports in your codespace](/codespaces/developing-in-codespaces/forwarding-ports-in-your-codespace)."
|
||||
- **postCreateCommand** - Use this to run commands that aren't defined in the Dockerfile, after your codespace is created.
|
||||
- **remoteUser** - By default, you’re running as the vscode user, but you can optionally set this to root.
|
||||
|
||||
#### Dockerfile
|
||||
|
||||
```bash
|
||||
# [Choice] Node.js version: 14, 12, 10
|
||||
ARG VARIANT="14-buster"
|
||||
FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:0-${VARIANT}
|
||||
|
||||
# [Optional] Uncomment this section to install additional OS packages.
|
||||
# RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
|
||||
# && apt-get -y install --no-install-recommends <your-package-list-here>
|
||||
|
||||
# [Optional] Uncomment if you want to install an additional version of node using nvm
|
||||
# ARG EXTRA_NODE_VERSION=10
|
||||
# RUN su node -c "source /usr/local/share/nvm/nvm.sh && nvm install ${EXTRA_NODE_VERSION}"
|
||||
|
||||
# [Optional] Uncomment if you want to install more global node modules
|
||||
# RUN su node -c "npm install -g <your-package-list-here>"
|
||||
```
|
||||
|
||||
You can use the Dockerfile to add additional container layers to specify OS packages, node versions, or global packages we want included in our container.
|
||||
|
||||
## 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 to install npm when your codespace launches and make a list of ports inside the container available locally.
|
||||
|
||||
1. In the Explorer, select the `devcontainer.json` file from the tree to open it. You might have to expand the `.devcontainer` folder to see it.
|
||||
|
||||

|
||||
|
||||
2. Add the following lines to your `devcontainer.json` file after `extensions`:
|
||||
|
||||
```json{:copy}
|
||||
"postCreateCommand": "npm install",
|
||||
"forwardPorts": [4000],
|
||||
```
|
||||
|
||||
{% data reusables.codespaces.more-info-devcontainer %}
|
||||
|
||||
{% data reusables.codespaces.rebuild-command %}
|
||||
|
||||
{% data reusables.codespaces.rebuild-reason %}
|
||||
|
||||
## Step 4: Run your application
|
||||
|
||||
In the previous section, you used the `postCreateCommand` to installing a set of packages via npm. You can now use this to run our application with npm.
|
||||
|
||||
1. Run your start command in the terminal with`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 %}, containing a prompt to connect to the port your project uses.
|
||||
|
||||

|
||||
|
||||
## Step 5: Commit your changes
|
||||
|
||||
{% data reusables.codespaces.committing-link-to-procedure %}
|
||||
|
||||
## Next steps
|
||||
|
||||
You should now be ready start developing your JavaScript project in {% data variables.product.prodname_github_codespaces %}. Here are some additional resources for more advanced scenarios.
|
||||
|
||||
{% data reusables.codespaces.next-steps-adding-devcontainer %}
|
||||
@@ -1,19 +0,0 @@
|
||||
---
|
||||
title: Adding a dev container to your repository
|
||||
shortTitle: Add a dev container to your repository
|
||||
allowTitleToDifferFromFilename: true
|
||||
intro: 'Get started with your Node.js, Python, .NET, or Java project in {% data variables.product.prodname_codespaces %} by creating a custom dev container.'
|
||||
versions:
|
||||
fpt: '*'
|
||||
ghec: '*'
|
||||
type: tutorial
|
||||
topics:
|
||||
- Codespaces
|
||||
- Developer
|
||||
- Node
|
||||
- JavaScript
|
||||
hasExperimentalAlternative: true
|
||||
interactive: true
|
||||
---
|
||||
|
||||
<!-- This article is specially rendered via the pages/ directory -->
|
||||
@@ -1,204 +0,0 @@
|
||||
---
|
||||
title: Setting up your Python project for GitHub Codespaces
|
||||
allowTitleToDifferFromFilename: true
|
||||
shortTitle: Setting up your Python project
|
||||
intro: 'Get started with your Python project in {% data variables.product.prodname_github_codespaces %} by creating a custom dev container.'
|
||||
versions:
|
||||
fpt: '*'
|
||||
ghec: '*'
|
||||
redirect_from:
|
||||
- /codespaces/getting-started-with-codespaces/getting-started-with-your-python-project-in-codespaces
|
||||
type: tutorial
|
||||
topics:
|
||||
- Codespaces
|
||||
- Developer
|
||||
- Python
|
||||
hasExperimentalAlternative: true
|
||||
hidden: true
|
||||
---
|
||||
|
||||
## Introduction
|
||||
|
||||
This guide shows you how to set up your Python project {% data reusables.codespaces.setting-up-project-intro %}
|
||||
|
||||
### Prerequisites
|
||||
|
||||
- You should have an existing Python project in a repository on {% data variables.product.prodname_dotcom_the_website %}. If you don't have a project, you can try this tutorial with the following example: https://github.com/2percentsilk/python-quickstart.
|
||||
- You must have {% data variables.product.prodname_github_codespaces %} enabled for your organization.
|
||||
|
||||
## Step 1: Open your project in a codespace
|
||||
|
||||
1. Under the repository name, use the **{% octicon "code" aria-label="The code icon" %} Code** dropdown menu, and in the **Codespaces** tab, click the plus sign ({% octicon "plus" aria-label="The plus icon" %}).
|
||||
|
||||

|
||||
|
||||
When you create a codespace, your project is created on a remote VM that is dedicated to you. By default, the container for your codespace has many languages and runtimes including Node.js, JavaScript, Typescript, nvm, npm, and yarn. It also includes a common set of tools like git, wget, rsync, openssh, and nano.
|
||||
|
||||
{% data reusables.codespaces.customize-vcpus-and-ram %}
|
||||
|
||||
## Step 2: Add a dev container configuration to your repository from a template
|
||||
|
||||
The default development container, or "dev container," for {% data variables.product.prodname_github_codespaces %} comes with the latest Python version, package managers (pip, Miniconda), and other common tools preinstalled. However, we recommend that you configure your own dev container to include all of the tools and scripts that 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. For this example, click **Python 3**. If you need additional features you can select any container that’s specific to Python or a combination of tools such as Python 3 and PostgreSQL.
|
||||

|
||||
1. Click the recommended version of Python.
|
||||

|
||||
1. Accept the default option to add Node.js to your customization.
|
||||

|
||||
{% data reusables.codespaces.rebuild-command %}
|
||||
|
||||
### Anatomy of your dev container
|
||||
|
||||
Adding the Python dev container template adds a `.devcontainer` directory to the root of your project's repository with the following files:
|
||||
|
||||
- `devcontainer.json`
|
||||
- Dockerfile
|
||||
|
||||
The newly added `devcontainer.json` file defines a few properties that are described after the sample.
|
||||
|
||||
#### devcontainer.json
|
||||
|
||||
```json
|
||||
{
|
||||
"name": "Python 3",
|
||||
"build": {
|
||||
"dockerfile": "Dockerfile",
|
||||
"context": "..",
|
||||
"args": {
|
||||
// Update 'VARIANT' to pick a Python version: 3, 3.6, 3.7, 3.8, 3.9
|
||||
"VARIANT": "3",
|
||||
// Options
|
||||
"INSTALL_NODE": "true",
|
||||
"NODE_VERSION": "lts/*"
|
||||
}
|
||||
},
|
||||
|
||||
// Set *default* container specific settings.json values on container create.
|
||||
"settings": {
|
||||
"terminal.integrated.shell.linux": "/bin/bash",
|
||||
"python.pythonPath": "/usr/local/bin/python",
|
||||
"python.linting.enabled": true,
|
||||
"python.linting.pylintEnabled": true,
|
||||
"python.formatting.autopep8Path": "/usr/local/py-utils/bin/autopep8",
|
||||
"python.formatting.blackPath": "/usr/local/py-utils/bin/black",
|
||||
"python.formatting.yapfPath": "/usr/local/py-utils/bin/yapf",
|
||||
"python.linting.banditPath": "/usr/local/py-utils/bin/bandit",
|
||||
"python.linting.flake8Path": "/usr/local/py-utils/bin/flake8",
|
||||
"python.linting.mypyPath": "/usr/local/py-utils/bin/mypy",
|
||||
"python.linting.pycodestylePath": "/usr/local/py-utils/bin/pycodestyle",
|
||||
"python.linting.pydocstylePath": "/usr/local/py-utils/bin/pydocstyle",
|
||||
"python.linting.pylintPath": "/usr/local/py-utils/bin/pylint"
|
||||
},
|
||||
|
||||
// Add the IDs of extensions you want installed when the container is created.
|
||||
"extensions": [
|
||||
"ms-python.python"
|
||||
],
|
||||
|
||||
// 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": "pip3 install --user -r requirements.txt",
|
||||
|
||||
// Comment out connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
|
||||
"remoteUser": "vscode"
|
||||
}
|
||||
```
|
||||
|
||||
- **name** - You can name our dev container anything, this is just the default.
|
||||
- **build** - The build properties.
|
||||
- **dockerfile** - In the `build` object, `dockerfile` contains the path to the Dockerfile that was also added from the template.
|
||||
- **args**
|
||||
- **variant**: This file only contains one build argument, which is the node variant we want to use that is passed into the Dockerfile.
|
||||
- **settings** - These are {% data variables.product.prodname_vscode %} settings.
|
||||
- **terminal.integrated.shell.linux** - While bash is the default here, you could use other terminal shells by modifying this.
|
||||
- **extensions** - These are extensions included by default.
|
||||
- **ms-python.python** - The Microsoft Python extension provides rich support for the Python language (for all actively supported versions of the language: >=3.6), including features such as IntelliSense, linting, debugging, code navigation, code formatting, refactoring, variable explorer, test explorer, and more.
|
||||
- **forwardPorts** - Any ports listed here will be forwarded automatically. For more information, see "[Forwarding ports in your codespace](/codespaces/developing-in-codespaces/forwarding-ports-in-your-codespace)."
|
||||
- **postCreateCommand** - Use this to run commands that aren't defined in the Dockerfile, like `pip3 install -r requirements`, after your codespace is created.
|
||||
- **remoteUser** - By default, you’re running as the `vscode` user, but you can optionally set this to `root`.
|
||||
|
||||
#### Dockerfile
|
||||
|
||||
```bash
|
||||
# [Choice] Python version: 3, 3.9, 3.8, 3.7, 3.6
|
||||
ARG VARIANT="3"
|
||||
FROM mcr.microsoft.com/vscode/devcontainers/python:0-${VARIANT}
|
||||
|
||||
# [Option] Install Node.js
|
||||
ARG INSTALL_NODE="true"
|
||||
ARG NODE_VERSION="lts/*"
|
||||
RUN if [ "${INSTALL_NODE}" = "true" ]; then su vscode -c "umask 0002 && . /usr/local/share/nvm/nvm.sh && nvm install ${NODE_VERSION} 2>&1"; fi
|
||||
|
||||
# [Optional] If your pip requirements rarely change, uncomment this section to add them to the image.
|
||||
# COPY requirements.txt /tmp/pip-tmp/
|
||||
# RUN pip3 --disable-pip-version-check --no-cache-dir install -r /tmp/pip-tmp/requirements.txt \
|
||||
# && rm -rf /tmp/pip-tmp
|
||||
|
||||
# [Optional] Uncomment this section to install additional OS packages.
|
||||
# RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
|
||||
# && apt-get -y install --no-install-recommends <your-package-list-here>
|
||||
|
||||
# [Optional] Uncomment this line to install global node packages.
|
||||
# RUN su vscode -c "source /usr/local/share/nvm/nvm.sh && npm install -g <your-package-here>" 2>&1
|
||||
```
|
||||
|
||||
You can use the Dockerfile to add additional container layers to specify OS packages, node versions, or global packages we want included in our container.
|
||||
|
||||
## 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 to install extensions and your project dependencies when your codespace launches.
|
||||
|
||||
1. In the Explorer, expand the `.devcontainer` folder and select the `devcontainer.json` file from the tree to open it.
|
||||
|
||||

|
||||
|
||||
2. Update the `extensions` list in your `devcontainer.json` file to add a few extensions that are useful when working with your project.
|
||||
|
||||
```json{:copy}
|
||||
"extensions": [
|
||||
"ms-python.python",
|
||||
"cstrap.flask-snippets",
|
||||
"streetsidesoftware.code-spell-checker"
|
||||
],
|
||||
```
|
||||
|
||||
3. Uncomment the `postCreateCommand` to auto-install requirements as part of the codespaces setup process.
|
||||
|
||||
```json{:copy}
|
||||
// Use 'postCreateCommand' to run commands after the container is created.
|
||||
"postCreateCommand": "pip3 install --user -r requirements.txt",
|
||||
```
|
||||
|
||||
{% data reusables.codespaces.rebuild-command %}
|
||||
|
||||
{% data reusables.codespaces.rebuild-reason %}
|
||||
|
||||
5. Check your changes were successfully applied by verifying the Code Spell Checker and Flask Snippet extensions were installed.
|
||||
|
||||

|
||||
|
||||
## Step 4: Run your application
|
||||
|
||||
In the previous section, you used the `postCreateCommand` to install a set of packages via pip3. With your dependencies now installed, you can run your application.
|
||||
|
||||
1. Run your application by pressing `F5` or entering `python -m flask run` in the codespace terminal.
|
||||
|
||||
2. When your project starts, you should see a "toast" notification message at the bottom right corner of {% data variables.product.prodname_vscode_shortname %}, containing a prompt to connect to the port your project uses.
|
||||
|
||||

|
||||
|
||||
## Step 5: Commit your changes
|
||||
|
||||
{% data reusables.codespaces.committing-link-to-procedure %}
|
||||
|
||||
## Next steps
|
||||
|
||||
You should now be ready start developing your Python project in {% data variables.product.prodname_github_codespaces %}. Here are some additional resources for more advanced scenarios.
|
||||
|
||||
{% data reusables.codespaces.next-steps-adding-devcontainer %}
|
||||
@@ -10,6 +10,8 @@ type: how_to
|
||||
topics:
|
||||
- Codespaces
|
||||
- Set up
|
||||
redirect_from:
|
||||
- /codespaces/setting-up-your-project-for-codespaces/adding-a-codespaces-badge
|
||||
---
|
||||
|
||||
## Overview
|
||||
@@ -0,0 +1,12 @@
|
||||
---
|
||||
title: 'Setting up your repository for {% data variables.product.prodname_github_codespaces %}'
|
||||
shortTitle: Setting up your repository
|
||||
allowTitleToDifferFromFilename: true
|
||||
intro: 'You can set up your repository to make it easy for people to work on a project using {% data variables.product.prodname_github_codespaces %}.'
|
||||
versions:
|
||||
fpt: '*'
|
||||
ghec: '*'
|
||||
children:
|
||||
- /adding-a-codespaces-badge
|
||||
- /setting-up-a-template-repository-for-github-codespaces
|
||||
---
|
||||
@@ -9,6 +9,8 @@ type: how_to
|
||||
topics:
|
||||
- Codespaces
|
||||
- Set up
|
||||
redirect_from:
|
||||
- /codespaces/setting-up-your-project-for-codespaces/setting-up-a-template-repository-for-github-codespaces
|
||||
---
|
||||
|
||||
## Introduction
|
||||
@@ -47,7 +49,7 @@ For guidance on the kinds of files to include, you can look at the starter files
|
||||
|
||||
## Configure the container image
|
||||
|
||||
You can add dev container configuration files to your template repository to customize the development environment for people using your template with {% data variables.product.prodname_github_codespaces %}. You can choose from a list of predefined configuration settings in {% data variables.product.prodname_vscode %}, or you can create a custom configuration by writing your own `devcontainer.json` file. If you don't add configuration files, the default container image will be used. For more information, see "[Introduction to dev containers](/codespaces/setting-up-your-project-for-codespaces/introduction-to-dev-containers)" and "[Add a dev container configuration to your repository](/codespaces/setting-up-your-project-for-codespaces/setting-up-your-project-for-codespaces)."
|
||||
You can add dev container configuration files to your template repository to customize the development environment for people using your template with {% data variables.product.prodname_github_codespaces %}. You can choose from a list of predefined configuration settings in {% data variables.product.prodname_vscode %}, or you can create a custom configuration by writing your own `devcontainer.json` file. If you don't add configuration files, the default container image will be used. For more information, see "[Introduction to dev containers](/codespaces/setting-up-your-project-for-codespaces/adding-a-dev-container-configuration/introduction-to-dev-containers)" and "[Adding a dev container configuration to your repository](/codespaces/setting-up-your-project-for-codespaces/adding-a-dev-container-configuration)."
|
||||
|
||||
{% note %}
|
||||
|
||||
@@ -55,7 +57,7 @@ You can add dev container configuration files to your template repository to cus
|
||||
|
||||
{% endnote %}
|
||||
|
||||
You should configure your dev container with the tools and customization to give users the best experience with your template. For example, in your `devcontainer.json` file:
|
||||
You should configure your dev container with the tools and customization to give users the best experience with your template. For example, in your `devcontainer.json` file:
|
||||
- You can use the `openFiles` property to define a list of files to be opened automatically in the {% data variables.product.prodname_vscode_shortname %} web client when a codespace is created from your template.
|
||||
- If your template contains files for a web application, you can make the application run automatically in the user's codespace. You can do this by using the `postAttachCommand` property to run a script that starts the application on a local server as soon as the {% data variables.product.prodname_vscode_shortname %} web client connects to the codespace, and by setting the `onAutoForward` property of a port to `openPreview` to display the application running on that port in a simple browser embedded in the {% data variables.product.prodname_vscode_shortname %} web client.
|
||||
|
||||
@@ -81,4 +83,4 @@ The following configuration settings for a React template will open the `app.js`
|
||||
}
|
||||
}
|
||||
```
|
||||
For more information, see "[Automatically opening files in the codespaces for a repository](/codespaces/setting-up-your-project-for-codespaces/automatically-opening-files-in-the-codespaces-for-a-repository)" and the [dev containers specification](https://containers.dev/implementors/json_reference/#general-properties) on containers.dev.
|
||||
For more information, see "[Automatically opening files in the codespaces for a repository](/codespaces/setting-up-your-project-for-codespaces/configuring-dev-containers/automatically-opening-files-in-the-codespaces-for-a-repository)" and the [dev containers specification](https://containers.dev/implementors/json_reference/#general-properties) on the Development Containers website.
|
||||
@@ -50,11 +50,11 @@ If you create a codespace and the creation fails:
|
||||
{% note %}
|
||||
|
||||
**Note**: To view the logs during a build:
|
||||
* In the browser, click **View logs.**
|
||||
* In the browser, click **View logs.**
|
||||
|
||||

|
||||
|
||||
* In the VS Code desktop application, click **Building codespace** in the "Setting up remote connection" that's displayed.
|
||||
* In the VS Code desktop application, click **Building codespace** in the "Setting up remote connection" that's displayed.
|
||||
|
||||

|
||||
|
||||
@@ -66,7 +66,7 @@ If you create a codespace and the creation fails:
|
||||
A codespace can only be deleted by:
|
||||
* The person who created the codespace.
|
||||
* An organization owner for an organization-owned codespace.
|
||||
* Automatic deletion at the end of a retention period.
|
||||
* Automatic deletion at the end of a retention period.
|
||||
|
||||
For more information, see "[Deleting a codespace](/codespaces/developing-in-codespaces/deleting-a-codespace)" and "[Configuring automatic deletion of your codespaces](/codespaces/customizing-your-codespace/configuring-automatic-deletion-of-your-codespaces)."
|
||||
|
||||
@@ -93,4 +93,4 @@ This codespace is currently running in recovery mode due to a container error.
|
||||
```
|
||||
Review the creation logs and update the dev container configuration as needed. For more information, see "[{% data variables.product.prodname_github_codespaces %} logs](/codespaces/troubleshooting/github-codespaces-logs)."
|
||||
|
||||
You can then try restarting the codespace, or rebuilding the container. For more information on rebuilding the container, see "[Introduction to dev containers](/codespaces/setting-up-your-project-for-codespaces/introduction-to-dev-containers#applying-configuration-changes-to-a-codespace)."
|
||||
You can then try restarting the codespace, or rebuilding the container. For more information on rebuilding the container, see "[Introduction to dev containers](/codespaces/setting-up-your-project-for-codespaces/adding-a-dev-container-configuration/introduction-to-dev-containers#applying-configuration-changes-to-a-codespace)."
|
||||
|
||||
@@ -14,7 +14,7 @@ redirect_from:
|
||||
|
||||
## 503 codespace service unavailable
|
||||
|
||||
Codespaces are set to stop after 30 minutes without any activity. If you try to interact with a codespace after it has stopped, you may see a `503 service unavailable` error.
|
||||
Codespaces are set to stop after 30 minutes without any activity. If you try to interact with a codespace after it has stopped, you may see a `503 service unavailable` error.
|
||||
|
||||
- If a **Start** button is shown in {% data variables.product.prodname_vscode %} or in your browser window, click **Start** to reconnect to the codespace.
|
||||
- Reset your codespace by reloading the window. From the [Command Palette](/codespaces/codespaces-reference/using-the-command-palette-in-codespaces#accessing-the-command-palette) in {% data variables.product.prodname_vscode %}, click **Developer: Reload Window**.
|
||||
@@ -36,7 +36,7 @@ To be able to use a codespace in JupyterLab, you must ensure that your codespace
|
||||
|
||||
If your codespace uses a Debian-based image, you can install JupyterLab in the dev container by adding the `python` feature to your `devcontainer.json` file, with the `installJupyterlab` option set to `true`. Otherwise, install it directly in your Dockerfile. For installation instructions, see "[Installation](https://jupyterlab.readthedocs.io/en/stable/getting_started/installation.html)" in the JupyterLab documentation.
|
||||
|
||||
For more information about the `python` feature, see the README page in the [`devcontainers/features` repository](https://github.com/devcontainers/features/tree/main/src/python). For more information about the `devcontainer.json` file and the Dockerfile, see "[Introduction to dev containers](/codespaces/setting-up-your-project-for-codespaces/introduction-to-dev-containers#devcontainerjson)."
|
||||
For more information about the `python` feature, see the README page in the [`devcontainers/features` repository](https://github.com/devcontainers/features/tree/main/src/python). For more information about the `devcontainer.json` file and the Dockerfile, see "[Introduction to dev containers](/codespaces/setting-up-your-project-for-codespaces/adding-a-dev-container-configuration/introduction-to-dev-containers#devcontainerjson)."
|
||||
|
||||
If you still cannot connect, {% data reusables.codespaces.contact-support %}
|
||||
|
||||
|
||||