Using Gitpod to create a PR

user: anonymous

{
  "path": "/blog/using-gitpod-to-create-a-pr",
  "attrs": {
    "title": "Using Gitpod to create a PR",
    "splash": {
      "image": "/images/fields-of-clouds.jpg"
    },
    "date": "2021-10-24",
    "layout": "BlogPostLayout",
    "excerpt": "Gitpod hosts workspaces for developers. Each workspace is a Linux container running in the cloud, with a fully functional development environment, and an instance of VS Code which you can open in your browser.\n"
  },
  "md": "# Using Gitpod to create a PR\n\n[Gitpod](https://www.gitpod.io/) hosts **workspaces** for developers.\n\nThink of each [workspace](https://www.gitpod.io/docs#your-computer-in-the-cloud) as your own Linux container in the cloud, with a fully functional development environment, including:\n\n- A clone of your git repo and your git working tree - the files you're working on.\n- The tools you need while coding - compilers, SDKs, runtimes.\n- Your editor - the default is [VS Code](https://www.gitpod.io/blog/openvscode-server-launch) + extensions - reachable through a browser.\n- Shell access to run commands in the container.\n\nInstead of laboriously maintaining your local development environment with everything you need, you simply open a new workspace every time you start working on a new project or branch.\n\n## PR for the Gitpod website \n\nHere's how I created a PR for the [Gitpod website](https://www.gitpod.io/) in just a few minutes.\n\nStarting from the [issue](https://github.com/gitpod-io/website/issues/1139), I opened a new workspace in Gitpod by prefixing the GitHub url like so: `https://gitpod.io/#https://github.com/gitpod-io/website/issues/1139`. \n\nThat [url](https://gitpod.io/#https://github.com/gitpod-io/website/issues/1139) opened the workspace in my browser.\n\n![Screenshot of full VS Code window in Gitpod workspace](/images/gitpod-workspace.png)\n\nRunning `git branch -vv` in a workspace terminal showed that git was already set to a new branch, conveniently named with my username and the description and id of the GitHub issue.\n\n![Screenshot of VS Code terminal in Gitpod workspace showing new git branch](/images/gitpod-issue-branch.png)\n\nThe workspace started up with npm modules already installed by a [prebuild](https://www.gitpod.io/docs/prebuilds).\n\nThe repo was also [configured](https://www.gitpod.io/docs/config-gitpod-file) to start a dev server listening on port 3000 in the workspace container. The open ports can be seen in the Remote Explorer sidebar on the left.\n\n![Screenshot of VS Code Remote Explorer sidebar in Gitpod workspace showing open ports](/images/gitpod-ports.png)\n\nI used the `Open Browser` icon to open the website in another browser window, and watched my changes taking effect each time I modified the code. \n\nFinally, I pushed a commit with my changes on the new branch to GitHub, and proceeded to create my PR as usual. No localhost interaction other than running my browser was required.\n\n> This blogpost was written from a Gitpod workspace.  \n> 🚀 \n\n_To leave a comment  \nplease visit [dev.to/jldec](https://dev.to/jldec/using-gitpod-to-create-a-pr-3cba)_\n",
  "html": "<h1>Using Gitpod to create a PR</h1>\n<p><a href=\"https://www.gitpod.io/\">Gitpod</a> hosts <strong>workspaces</strong> for developers.</p>\n<p>Think of each <a href=\"https://www.gitpod.io/docs#your-computer-in-the-cloud\">workspace</a> as your own Linux container in the cloud, with a fully functional development environment, including:</p>\n<ul>\n<li>A clone of your git repo and your git working tree - the files you're working on.</li>\n<li>The tools you need while coding - compilers, SDKs, runtimes.</li>\n<li>Your editor - the default is <a href=\"https://www.gitpod.io/blog/openvscode-server-launch\">VS Code</a> + extensions - reachable through a browser.</li>\n<li>Shell access to run commands in the container.</li>\n</ul>\n<p>Instead of laboriously maintaining your local development environment with everything you need, you simply open a new workspace every time you start working on a new project or branch.</p>\n<h2>PR for the Gitpod website</h2>\n<p>Here's how I created a PR for the <a href=\"https://www.gitpod.io/\">Gitpod website</a> in just a few minutes.</p>\n<p>Starting from the <a href=\"https://github.com/gitpod-io/website/issues/1139\">issue</a>, I opened a new workspace in Gitpod by prefixing the GitHub url like so: <code>https://gitpod.io/#https://github.com/gitpod-io/website/issues/1139</code>.</p>\n<p>That <a href=\"https://gitpod.io/#https://github.com/gitpod-io/website/issues/1139\">url</a> opened the workspace in my browser.</p>\n<p><img src=\"/images/gitpod-workspace.png\" alt=\"Screenshot of full VS Code window in Gitpod workspace\"></p>\n<p>Running <code>git branch -vv</code> in a workspace terminal showed that git was already set to a new branch, conveniently named with my username and the description and id of the GitHub issue.</p>\n<p><img src=\"/images/gitpod-issue-branch.png\" alt=\"Screenshot of VS Code terminal in Gitpod workspace showing new git branch\"></p>\n<p>The workspace started up with npm modules already installed by a <a href=\"https://www.gitpod.io/docs/prebuilds\">prebuild</a>.</p>\n<p>The repo was also <a href=\"https://www.gitpod.io/docs/config-gitpod-file\">configured</a> to start a dev server listening on port 3000 in the workspace container. The open ports can be seen in the Remote Explorer sidebar on the left.</p>\n<p><img src=\"/images/gitpod-ports.png\" alt=\"Screenshot of VS Code Remote Explorer sidebar in Gitpod workspace showing open ports\"></p>\n<p>I used the <code>Open Browser</code> icon to open the website in another browser window, and watched my changes taking effect each time I modified the code.</p>\n<p>Finally, I pushed a commit with my changes on the new branch to GitHub, and proceeded to create my PR as usual. No localhost interaction other than running my browser was required.</p>\n<blockquote>\n<p>This blogpost was written from a Gitpod workspace.<br>\n🚀</p>\n</blockquote>\n<p><em>To leave a comment<br>\nplease visit <a href=\"https://dev.to/jldec/using-gitpod-to-create-a-pr-3cba\">dev.to/jldec</a></em></p>\n"
}