Skip to content

Instantly share code, notes, and snippets.

@wdonet

wdonet/Codesandbox + Github.md

Last active April 21, 2025 11:15
Show Gist options
  • Save wdonet/da524093b00f0400042712ea1a4def57 to your computer and use it in GitHub Desktop.
Save wdonet/da524093b00f0400042712ea1a4def57 to your computer and use it in GitHub Desktop.
Download ZIP
How to link and work with CodeSandbox + Github
Raw
Codesandbox + Github.md

How to use CodeSandbox and GitHub together

Requirements

  • Use or create a GitHub account
  • Use your CodeSandbox account

Link CodeSandbox to your Github Repository

  1. Open the CodeSandbox Link

  2. Click on Github icon from the CodeSandbox sidebar.GitHub Icon -> Fork Sandbox

  3. Click on Fork Sandbox button. You will see the title change to something like: Drafts/immutable-sea-mgz8o. If you want, you can click over that title and customize the name, then hit Enter.Title

  4. If you see a Sign in button, click on it and authorize CodSandbox to use your GitHub account.Sign in on GitHub

  5. You probably need to authorize CodeSandbox to use Github Authorize CodeSandbox

  6. Write a name for your new GitHub repository on the input text then hit Enter. Name your repository

  7. Finally click on Link Sandbox to complete the process.Link Sandbox

If everything worked fine, you would see the Github repository directly on CodeSandboxResult

Work on CodeSandbox

Now you can make the changes directly on your CodeSandbox, create new files, save them and previsualize your changes in the embedded browser.

Nothing of that would be saved or commited to your GitHub repository until you create a Pull Request (next section)

Create a Pull Request (PR) in GitHub

  1. Click on Github icon from the CodeSandbox sidebar.
  2. You would see the list of changed files. Write a summary on the input text right below.Create a PR in GitHub
  3. Be sure to select option: Create branch csb-xxx999 for the commit and start a PR. That, as you probably infered, will create a commit with your changes. It also will automatically create a new branch with name csb-xxx999` and a Pull Request with the intention to merge them into the parent branch.
  4. Click con Commit Changes button.
  5. Once the process is finished you would see an Open PR button. Click on it to open GitHub Pull Request.

Any change you do would be commited to the same PR till you merge into parent branch

Continue working.

We have explored a couple of options for you to continue working with the following mini challenges.

Option 1 (recommended). Work everything on your local and GitHub. Use CodeSandbox to previsualize the result

You could use GitHub and VSCode or any other IDE on your laptop to continue working as you normally do.

  1. Create a branch for your mini-challenge using GIT from main branch.
  2. Push your changes there and create a PR on GitHub when you're done.
  3. To visualize your branch changes in CodeSandbox use the following url format:
https://codesandbox.io/s/github/[your-github-handle]/[your-github-repo]/tree/[branch]

Notes

  • Verify the link is working
  • Remember to share this link in your PR

Option 2. Merge on GitHub, then Create more PRs on CodeSandbox

This option would create so many CodeSandbox links as PR generated

  1. Go to your PR and merge it
  2. Refresh your CodeSandbox page and Click on Github icon from the sidebar.
  3. Click on Open GitHub Sandbox then on Fork. This will create another CodeSandbox draft.
  4. Click on Link Sandbox
  5. Continue making changes, saving them and follow steps in previous section to create another PR
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment