[go: up one dir, main page]
Scribd
Upload
109 views5 pages

QuickStart For Codespaces

Codespaces allow you to code in the cloud using GitHub repositories. This quickstart guide shows how to create a codespace from a template, run and view an application by forwarding ports, edit code and view changes in the browser, commit and push changes to the remote repository, and personalize the codespace by installing an extension.

Uploaded by

animated opacity
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
109 views5 pages

QuickStart For Codespaces

Codespaces allow you to code in the cloud using GitHub repositories. This quickstart guide shows how to create a codespace from a template, run and view an application by forwarding ports, edit code and view changes in the browser, commit and push changes to the remote repository, and personalize the codespace by installing an extension.

Uploaded by

animated opacity
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

QuickStart for Codespaces

Codespaces is available for organizations using GitHub Team or GitHub Enterprise Cloud. For
more information, see "GitHub's products."

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.

From this quickstart, you will learn how to create a codespace, connect to a
forwarded port to view your running application, use version control in a codespace,
and personalize your setup with extensions.

Creating your codespace


1. Navigate to the template repository and select Use this template.
2. Name your repository, select your preferred privacy setting, and click Create
repository from this template.
3. Navigate to the main page of the newly created repository. Under the
repository name, use the Code drop-down menu, and in the Codespaces tab,
click New codespace.
Running the application
Once your codespace is created, your repository will be automatically cloned into it.
Now you can run the application and launch it in a browser.

1. Since this example uses a Node.js project, start the application by entering
npm run dev in the terminal. This command executes the dev script in the
package.json file and 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 forward that port so you
can connect to it.

3. Click Open in Browser to view your running application in a new tab.

Edit the application and view changes


1. Switch back to your codespace and open the haikus.json file by double-
clicking it in the File Explorer.
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.
If you've closed the tab, open the Ports panel and click the Open in
browser icon for the running port.

Committing and pushing your changes


Now that you've made a few changes, you can use the integrated terminal or the
source view to commit and push the changes back to the remote.

1. In the Activity Bar, click the Source Control view.


2. To stage your changes, click + next to the file you've changed, or next
to Changes if you've changed multiple files and you want to stage them all.

3. Type a commit message describing the change you've made.

4. To commit your staged changes, click the check mark at the top the source
control side bar.
You can push the changes you've made. This applies those changes to the
upstream branch on the remote repository. You might want to do this if you're
not yet ready to create a pull request, or if you prefer to create a pull request
on GitHub.
5. At the top of the side bar, click the ellipsis (...).

6. In the drop-down menu, click Push.

Personalizing with an extension


Within a codespace, you have access to the Visual Studio Code Marketplace. For this
example, you'll install an extension that alters the theme, but you can install any
extension that is useful for your workflow.

1. In the left sidebar, click the Extensions icon.


2. In the search bar, enter fairyfloss and install the fairyfloss extension.

3. Select the fairyfloss theme by selecting it from the list.

4. Changes you make to your editor setup in the current codespace, such as
theme and keyboard bindings, are synced automatically via Settings Sync to
any other codespaces you open and any instances of Visual Studio Code that
are signed into your GitHub account.

You might also like