DEV Community

Cover image for Import Project to via GitHub Action

Import Project to via GitHub Action

Kherin Bundhoo
I'm a passionate sorcerer of the dark JavaScript arts
・2 min read

Hello Everyone!

In this post I am going to show you how I was able to generate a link to automatically import your current project to CodeSandbox.

📠 Import

According to its documentation, CodeSandbox has a way to automatically import a project (templates) from a GitHub repository to its online IDE by simply modifying the GitHub URL of the repository.

An easy way to import a repo to CodeSandbox via URL is with Append 'box' to your URL in between 'hub' and '.com' and it will redirect to CodeSandbox.

Here's an example:

Change the GitHub URL:


The result is we take the last part of the url (everything after and use it in our importer at, adding the repo to CodeSandbox.

Github Action

Hence, I created a Github Action that will concatenate the url to the path of the branch for each newly-created pull request.

📚 Reason

Generating a url to an online playground for each pull request created can enhance the review process by:

  • instantaneously generating a sandbox for each branch, therefore shortening the visual feedback loop

  • providing the ability to play around with the code and provide better code suggestions


    Here's the code of the workflow file you need to add to your project.

  - pull_request
    runs-on: ubuntu-latest
    name: perform annotation
      - name: annotation action step
        id: annotation
        uses: kherin/pr-comment-action@v1.0.1
          annotation-url: ""
          token: ${{ secrets.GITHUB_TOKEN }}

Enter fullscreen mode Exit fullscreen mode

💼 Usage

PR Comment

Pull Request Comment

Online Playground

Online Playground

✨ GitHub Action

The source code can be found here:

GitHub logo kherin / pr-comment-action

This action annotates the description section of a newly-created pull request with a comment

Review App Action

This action adds a new comment to a newly-created pull request when it is created for the firs time.


JavaScript Action


The URL of the review app which is linked to the code branch of the newly-created pull request


Integration with CodeSanbox

You can easily import a new pull request for an Angular/React/Vue project to CodeSanbox

An easy way to import a repo to CodeSandbox via URL is with Append 'box' to your URL in between 'hub' and '.com' and it will redirect to CodeSandbox. CodeSanbox Documentation

Example usage

uses: actions/pr-comment-action@v1 with: annotation-url: ''

👋 Goodbye World


Discussion (0)

Forem Open with the Forem app