Visual Studio Code Run in Web Browser

Let's start how to do that.........

Now we can use GitHub Codespaces Fast follow the

In this articles

GitHub Docs

Quickstart for GitHub Codespaces

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

Try out GitHub Codespaces in 5 minutes.

GitHub Codespaces is available for organizations using GitHub Team or GitHub Enterprise Cloud. GitHub Codespaces is also available as a limited beta release for individual users on GitHub Free and GitHub Pro plans. 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'll 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.

For more information on exactly how GitHub Codespaces works, see the companion guide Deep dive into GitHub Codespaces

Creating your codespace

1. Navigate to the Deep dive into GitHub Codespaces and select Use this template.
2. Select an owner for the new repository, enter a repository name, select your preferred privacy setting, and click Create repository from template.
3. On the main page of the newly created repository, click the Code button and select the Codespaces tab.

If you don’t see this tab, GitHub Codespaces isn't available for you. For more information about access to GitHub Codespaces, see "Creating a codespace."

4. On the Codespaces tab, click Create codespace on main.

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. 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.

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 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.

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

        7. Go back to your new repository on GitHub and view the haikus.json file. Check that the change you made in your codespace has been successfully pushed to the repository.

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.

Note: If you have Settings Sync turned on, any changes you make to your editor setup in the current codespace, such as changing your theme or keyboard bindings, are automatically synced to any other codespaces you open and any instances of Visual Studio Code that are signed into your GitHub account.

In the left sidebar, click the Extensions icon.

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

Click Install in Codespaces.

Select the fairyfloss theme by selecting it from the list.