Skip to main content

GitHub Repository Integration with Cloud IDEs

GitHub Repository Setup​

References

Repository Layout​

The repository can be set up in various stages of progress using branches. The main branch can either represent the completed end-product or it can simply contain a README.md file explaining how to use and/or preview the content at its various stages, with each logical stage being represented as a branch.

The branches may follow this pattern:

  • main: README.md only (or final 'completed' example)
  • branch 'stage-01-initialization': includes index.html file with basis HTML template (html, head, title, body)
  • branch 'stage-02-html-elements': index.html will be populated with basic HTML elements (e.g. h1, p, img, div, span, header, footer, ul, ol)
  • branch 'stage-03-css': Add css/main.css dir/file and include reference to main.css in index.html. Include some basic selectors in main.css that can be built upon.
  • branch 'stage-04-bio': Start building out the basic structure for the bio page.
  • branch 'stage-05-javascript': Examples of incorporating JavaScript.
  • branch 'stage-06-completed-example': Project in a completed state.

Cloning a Template Repository​

When logged into your GitHub account and viewing a repository that is set up as a template, you will see a 'Use this template' button displayed to the right of the 'Code' button that is used to clone the repository. Clicking the 'Use this template' button is similar to forking the repository except that you don't get the previous commit history from the source repository like you would when forking the repository.

A workshop attendee could be instructed to click the 'Use this template' button on the workshop's source repository to get a copy and then they would work off their own instance from their GitHub account. After retrieving their own copy, they could then view and fork a particular branch of that repository from within CodeSandbox.

Cloud IDE Setup​

There are several cloud IDEs that provide GitHub repository integration such as StackBlitz, CodeSandbox, Codepen, and Repl.it. Using a cloud IDE provides a quick development environment setup and, with the GitHub integration, provides the ability to preview or edit a project without much of the related configuration that is needed when working in a local development environment.

References

CodeSandbox​

Using CodeSandbox (https://codesandbox.io), you can open your GitHub repository in CodeSandbox to immediately see the results of updates you make to the code. Although changes made in CodeSandbox are not automatically committed back to the GitHub repository, the CodeSandbox project can be configured to link back to the GitHub repository as a branch pull request.

Preview a GitHub Repository​

CodeSandbox has an import wizard that lets you preview a public GitHub repository. Once the preview loads, you will then have the option to fork the repository into your CodeSandbox environment.

1) Open the 'Import from GitHub' wizard - https://codesandbox.io/s/github 2) Paste the source repository's path (the URL to clone the repo) or the URL for a specific branch (e.g. https://github.com/jcornwell-kpmg/html-css-workshop/tree/step-03-css) into the 'Insert GitHub URL...' input box within the wizard. 3) Click the 'Open Sandbox' button 4) You can preview the sandbox view of the repository in CodeSandbox but you won't be able to make updates unless you fork the repository. 5) Click the 'Fork' button in the left-hand panel to fork the repository into your CodeSandbox account. From that point, updates will be reflected in CodeSandbox but not in the GitHub repository. 6) Link the sandbox to the GitHub repo using the GitHub panel in the left-most side panel to create a pull request and merge updates made from CodeSandbox back to the GitHub repository.

Fork a GitHub Repository​

You can also fork a GitHub repository from the Repositories screen on the CodeSandbox Dashboard.

1) From the CodeSandbox Dashboard, click the 'Repositories' menu item (https://codesandbox.io/dashboard/repositories). 2) Click the 'Import Repositories' button. 3) In the 'Import from GitHub' section of the 'Import Project' panel, paste the source repository's path (the URL to clone the repo) or the URL for a specific branch (e.g. https://github.com/jcornwell-kpmg/html-css-workshop/tree/step-03-css) into the 'GitHub Repository URL...' input box. 4) Click 'Import and Fork'. From that point, updates will be reflected in CodeSandbox but not in the GitHub repository. 6) Link the sandbox to the GitHub repo using the GitHub panel in the left-most side panel to create a pull request and merge updates made from CodeSandbox back to the GitHub repository.