Quickstart for GitHub Codespaces - GitHub Docs
https://docs.github.com/en/codespaces/quickstart • 202 KB fetched
Open original page
Quickstart for GitHub Codespaces - GitHub Docs Skip to main content
GitHub Docs Version: Free, Pro, & Team
Search or ask Copilot Search or ask Copilot
Select language: current language is English
Search or ask Copilot Search or ask Copilot
Open menu
Collapse sidebar Expand sidebar
Scroll breadcrumbs left
* Home
* Codespaces
* Quickstart
Scroll breadcrumbs right
Codespaces
*
*
* Quickstart
* Getting started
* What are Codespaces?
* Codespaces features
* The codespace lifecycle
* Deep dive into Codespaces
* Developing in a codespace
* Develop in a codespace
* Create a codespace for a repo
* Create a codespace from a template
* Delete a codespace
* Open an existing codespace
* Work collaboratively
* Source control
* Pull requests
* Stop a codespace
* Forward ports
* Rebuilding a container
* Default environment variables
* Persist variables and files
* Connecting to a private network
* Machine learning
* Visual Studio Code
* GitHub CLI
* Customizing your codespace
* Rename a codespace
* Change your shell
* Change the machine type
* Setting your user preferences
* Personalize your codespaces
* Set the default editor
* Set the default region
* Set the timeout
* Configure automatic deletion
* Choose the host image
* Setting up your project
* Adding a dev container configuration
* Introduction to dev containers
* Setting up a Node.js project
* Setting up a C# (.NET) project
* Setting up a Java project
* Setting up a PHP project
* Setting up a Python project
* Configuring dev containers
* Set a minimum machine spec
* Adding features
* Automatically opening files
* Specifying recommended secrets
* Setting up your repository
* Facilitating codespace creation
* Set up a template repo
* Prebuilding your codespaces
* About prebuilds
* Configure prebuilds
* Allow external repo access
* Manage prebuilds
* Test dev container changes
* Managing your codespaces
* Codespaces secrets
* Repository access
* Security logs
* GPG verification
* Managing your organization
* Enable or disable Codespaces
* Billing and ownership
* List organization codespaces
* Manage Codespaces costs
* Manage secrets
* Audit logs
* Restrict machine types
* Restrict codespace creation
* Restrict base image
* Restrict port visibility
* Restrict timeout periods
* Restrict the retention period
* Reference
* Access a private registry
* Copilot in Codespaces
* VS Code Command Palette
* Security in Codespaces
* Disaster recovery
* Troubleshooting
* Codespaces logs
* Codespaces clients
* Included usage
* Exporting changes
* Creation and deletion
* Authenticating to repositories
* Connection
* Codespaces prebuilds
* Personalization
* Port forwarding
* GPG verification
* Working with support
* github.dev editor
Quickstart for GitHub Codespaces
Get started with GitHub Codespaces quickly.
Copy as Markdown
In this article
* Introduction
* Creating your codespace
* Running the application
* Edit the application and view changes
* Committing and pushing your changes
* Personalizing with an extension
* Next steps
* Further reading
Introduction
In this guide, you'll create a codespace from a template repository and explore some of the essential features available to you within the codespace. You'll work in the browser version of Visual Studio Code, which is initially the default editor for GitHub Codespaces. After trying out this quickstart you can use Codespaces in other editors, and you can change the default editor. Links are provided at the end of this guide.
From this quickstart, you'll learn how to create a codespace, connect to a forwarded port to view your running application, publish your codespace to a new repository, and personalize your setup with extensions.
For more information on exactly how GitHub Codespaces works, see the companion guide Deep dive into GitHub Codespaces .
Creating your codespace
*
Navigate to the github/haikus-for-codespaces template repository.
*
Click Use this template , then click Open in a codespace .
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.
*
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.
*
When your application starts, the codespace recognizes the port the application is running on and displays a pop-up message to let you know that the port has been forwarded.
*
Click Open in Browser to view your running application in a new tab.
Edit the application and view changes
*
Switch back to your codespace and open the haikus.json file by clicking it in the Explorer.
*
Edit the text field of the first haiku to personalize the application with your own haiku.
*
Go back to the running application tab in your browser and refresh to see your changes.
If you've closed the browser tab, click the Ports tab in VS Code, hover over the Local Address value for the running port, and click the Open in Browser icon.
Committing and pushing your changes
Now that you've made a few changes, you can use the integrated terminal or the source view to publish your work to a new repository.
*
In the Activity Bar, click the Source Control view.
*
To stage your changes, click next to the haikus.json file, or next to Changes if you've changed multiple files and you want to stage them all.
*
To commit your staged changes, type a commit message describing the change you've made, then click Commit .
*
Click Publish Branch .
*
In the "Repository Name" dropdown, type a name for your new repository, then select Publish to GitHub private repository or Publish to GitHub public repository .
The owner of the new repository will be the GitHub account with which you created the codespace.
*
In the pop-up that appears in the lower right corner of the editor, click Open on GitHub to view the new repository on GitHub. 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
When you connect to a codespace using the browser, or the Visual Studio Code desktop application, you can access the Visual Studio Code Marketplace directly from the editor. For this example, you'll install a VS Code extension that alters the theme, but you can install any extension that's useful for your workflow.
*
In the Activity Bar, click the Extensions icon.
*
In the search bar, type fairyfloss and click Install .
*
Select the fairyfloss theme by selecting it from the list.
About Settings Sync
You can enable Settings Sync to sync extensions and other settings across devices and instances of VS Code. Your synced settings are cached in the cloud. If Settings Sync is turned on in a codespace, any updates you make to your settings in the codespace are pushed to the cloud, and any updates you push to the cloud from elsewhere are pulled into your codespace. For more information, see Personalizing GitHub Codespaces for your account .
Next steps
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 GitHub Codespaces.
* Deep dive into GitHub Codespaces : This quickstart presented some of the features of GitHub Codespaces. The deep dive looks at these areas from a technical standpoint.
* Adding a dev container configuration to your repository : These guides provide information on setting up your repository to use GitHub Codespaces with specific languages.
* Introduction to dev containers : This guide provides details on creating a custom configuration for Codespaces for your project.
Further reading
* Enabling or disabling GitHub Codespaces for your organization
* Using GitHub Codespaces in Visual Studio Code
* Using GitHub Codespaces with GitHub CLI
* Setting your default editor for GitHub Codespaces
* Managing the cost of GitHub Codespaces in your organization
Back to top
Help and support
Was this Doc helpful?
Yes No
Help us make GitHub Docs great!
All Docs are open source. See something that's wrong or unclear? Submit a pull request.
Make a contribution
Still need help?
Provide GitHub Feedback Contact support Expert services Blog
GitHub Inc. © 2026 Terms Privacy Status Pricing
Links found on this page
- Skip to main content [direct]
- GitHub Docs [direct]
- Codespaces [direct]
- What are Codespaces? [direct]
- Codespaces features [direct]
- The codespace lifecycle [direct]
- Deep dive into Codespaces [direct]
- Develop in a codespace [direct]
- Create a codespace for a repo [direct]
- Create a codespace from a template [direct]
- Delete a codespace [direct]
- Open an existing codespace [direct]
- Work collaboratively [direct]
- Source control [direct]
- Pull requests [direct]
- Stop a codespace [direct]
- Forward ports [direct]
- Rebuilding a container [direct]
- Default environment variables [direct]
- Persist variables and files [direct]
- Connecting to a private network [direct]
- Machine learning [direct]
- Visual Studio Code [direct]
- GitHub CLI [direct]
- Rename a codespace [direct]
- Change your shell [direct]
- Change the machine type [direct]
- Personalize your codespaces [direct]
- Set the default editor [direct]
- Set the default region [direct]
- Set the timeout [direct]
- Configure automatic deletion [direct]
- Choose the host image [direct]
- Introduction to dev containers [direct]
- Setting up a Node.js project [direct]
- Setting up a C# (.NET) project [direct]
- Setting up a Java project [direct]
- Setting up a PHP project [direct]
- Setting up a Python project [direct]
- Set a minimum machine spec [direct]
- Adding features [direct]
- Automatically opening files [direct]
- Specifying recommended secrets [direct]
- Facilitating codespace creation [direct]
- Set up a template repo [direct]
- About prebuilds [direct]
- Configure prebuilds [direct]
- Allow external repo access [direct]
- Manage prebuilds [direct]
- Test dev container changes [direct]
- Codespaces secrets [direct]
- Repository access [direct]
- Security logs [direct]
- GPG verification [direct]
- Enable or disable Codespaces [direct]
- Billing and ownership [direct]
- List organization codespaces [direct]
- Manage Codespaces costs [direct]
- Manage secrets [direct]
- Audit logs [direct]
- Restrict machine types [direct]
- Restrict codespace creation [direct]
- Restrict base image [direct]
- Restrict port visibility [direct]
- Restrict timeout periods [direct]
- Restrict the retention period [direct]
- Access a private registry [direct]
- Copilot in Codespaces [direct]
- VS Code Command Palette [direct]
- Security in Codespaces [direct]
- Disaster recovery [direct]
- Codespaces logs [direct]
- Codespaces clients [direct]
- Included usage [direct]
- Exporting changes [direct]
- Creation and deletion [direct]
- Authenticating to repositories [direct]
- Connection [direct]
- Codespaces prebuilds [direct]
- Personalization [direct]