DEV Community

Cover image for Connecting Your Sandbox to your GitHub repo? You’ve come to the right place!
Teresia Kirung'o
Teresia Kirung'o

Posted on

Connecting Your Sandbox to your GitHub repo? You’ve come to the right place!

#shell #github #sandbox #repo

Recently I found myself stuck when I needed to test source code for some product release in an integrated virtual environment. Having never used a sandbox before, I found myself in a pretty exciting place, so,

What is a sandbox?

A sandbox is an isolated and controlled environment where software or code can be executed, tested, and experimented with without affecting the production or live environment.

The term “sandbox” is often used metaphorically to describe a play area where children can freely explore and experiment within the confines of a designated space without causing harm. Similarly, in technology, a sandbox provides a safe and controlled environment for developers, testers, or users to perform various activities without damaging the system or data.

Key aspects of a sandbox environment:

  1. Isolation: A sandbox provides a segregated environment that is isolated from the production or live environment ensuring that any activities or changes made within the sandbox do not affect the main system or infrastructure.
  2. Testing and experimentation: Sandboxes are commonly used for testing new software, applications, or code. Developers can deploy and run their code within the sandbox environment to observe its behavior, identify issues, and verify its functionality without risking disruption to the production system.
  3. Security and protection: Sandboxes offer a layer of security by limiting the actions and access permissions within the environment. It helps prevent malicious code or activities from impacting the main system.
  4. Controlled environment: Sandboxes often come with specific configurations and restrictions to create a controlled environment. This control allows developers or users to replicate certain conditions or scenarios to observe and analyze the behavior of software or code.

Sandbox environments can be implemented in various ways, such as virtual machines, containers, cloud-based platforms, or dedicated testing environments. They provide a valuable tool for software development, testing, and security purposes, enabling experimentation and innovation while minimizing risks.

In this instance, I needed to connect my GitHub repo to the provided sandbox, then work on that Repo as I would if I was working on my local computer, so how did I go about connecting the two?

Sandbox Details: 

Credentials
Host: aa4d5567891b.23a45fbf.abc-efg.testing
Username: aa4d5567891b
Password: a4567788901w2bbcc34c
Web access:
HTTP HTTP 3000 4000 5000 5001 8000 8080
Port mapping
SSH -> 35290 |  HTTP -> 35289 | HTTPS -> 35288 
3000-> 35287 | MySQL -> 35286 | 4000 -> 35285
5000 -> 35284 | 5001-> 35283 | 8000-> 35282 | 8080-> 35281
Enter fullscreen mode Exit fullscreen mode

Among the options provided above to access the sandbox here’s how to set it up via:

Connect to the sandbox via SSH(Secure Shell):

Step 1:

  • Once your virtual machine or server is provisioned, you can connect to it using an SSH client.

Step 2:

  • If you're on a Unix-based system (such as Linux or macOS), you can open/navigate to your preferred Command line terminal type the following ssh command: 
ssh username@your_sandbox_ip_address
Enter fullscreen mode Exit fullscreen mode

Step 3:

  • Replace username with the appropriate username for your virtual machine or server, in our case aa4d5567891b and your_sandbox_ip_address with the IP address or domain name of your sandbox in thus case aa4d5567891b.23a45fbf.abc-efg.testing

  • This is how our command looks like:

ssh aa4d5567891b@aa4d5567891b.23a45fbf.abc-efg.testing
Enter fullscreen mode Exit fullscreen mode

Step 4:

  • Your command line might generate a warning about the authenticity of the host. This is okay as the computer is making sure you know what you are about to do. Type yes then press enter.

  • It might look like this:

The authenticity of host 'aa4d5567891b.23a45fbf.abc-efg.testing' can't be established.
AB13407 key fingerprint is UBE457:ER7RfcOTKNlEjyEvxpkH42WDCauHx8sC31KZyD1AW4.
This key is not known by any other names
Are you sure you want to continue connecting (yes/no/[fingerprint])? yes
Warning: Permanently added 'aa4d5567891b.23a45fbf.abc-efg.testing' (AB13407) to the list of known hosts.
aa4d5567891b@aa4d5567891b.23a45fbf.abc-efg.testing's password:
Enter fullscreen mode Exit fullscreen mode

Step 5:

  • At this stage you’ll be prompted to give the password, remember our password provided on the Sandbox Details up there,a4567788901w2bbcc34c that’s the one we’ll use, copy paste in and click enter!
  • This is what it should look like: 
root@username:/#
Enter fullscreen mode Exit fullscreen mode

Step 6:

  • root indicates the username of the currently logged-in user, and / represents the root directory, which is the highest level in the file system hierarchy. The # symbol indicates that the user has administrative privileges or root access, allowing them to execute commands with elevated permissions.
  • This prompt suggests that you are in the root user's home directory ("/") and have administrative privileges, indicating that you can execute commands that affect the entire system in the virtual sandbox.
  • Here's ours: 
root@aa4d5567891b:/#
Enter fullscreen mode Exit fullscreen mode
  • Hooray you have successfully connected to your sandbox via SSH.

Connect to the sandbox via SFTP(Secure File Transfer Protocol):

  • Repeat Step 1 and Step 2 but replace the ssh with sftp in Step 3 
sftp aa4d5567891b@aa4d5567891b.23a45fbf.abc-efg.testing
Enter fullscreen mode Exit fullscreen mode
  • Continue with Step 4 to Step 6

Connect to the sandbox via the >_Webterm:

  • This is the easiest of the three steps, the Webterm enables you to use the sandbox through the web.
  • When you click on the >_Webterm, it takes directly to the user's home directory.
  • This is what you'll see 
root@aa4d5567891b:/#
Enter fullscreen mode Exit fullscreen mode

Now let's link it to our GitHub repo:

Step 0 - Create an account on GitHub [if you do not have one already]

  • You will need a GitHub account for this project. If you do not already have a github.com account, you can create an account for free here.

Step 1 - Create a Personal Access Token on Github.

  • To have access to your repositories and authenticate yourself, you need to create a Personal Access Token on Github.
  • Here's a GitHub documentation on how to Create a personal acess token.

Once it’s created, you should have a token that looks like this(please note this is randomly generated):

github_pat_r1VQ48bux6ZOLaN4p_7hH0ET9MKlJNXB5doDzYqsmRwGjSIcPC2yFfv3eitkUAxW
Enter fullscreen mode Exit fullscreen mode

Please make sure you copy and store your new personal access token immediately you see it! You will not be able to see it again!

Step 2 - Create your first repository.
Inorder to link your sandbox to a repository commonly reffered to as a 'repo' you'll need to create a GitHub Repo.

Here's an official guide on How to create a GitHub Repo.

These are the details you'll need in your repo

  • Name: Sandbox-Git-Access-Token
  • Description: How to connect your sandbox to your repo using GitHub access token.
  • Public repo
  • No README, .gitignore, or license. These are optional but best practice demands to always have them in a GitHub repo.

Sandbox-Git-Access-Token GitHub Repo

Step 3 - Open the Sandbox.
Navigate to where your sandbox details are shared and click on the >_Webterm to open a shell terminal where you can start work from.

Step 4 - Clone your repository.
On the webterm of the sandbox, do the following:

  • Clone your repository 
root@aa4d5567891b:/# git clone https://{YOUR_PERSONAL_TOKEN}@github.com/{YOUR_USERNAME}/{YOUR REPO NAME}
Enter fullscreen mode Exit fullscreen mode

Replace {YOUR_PERSONAL_TOKEN} with your token from step 1

Replace {YOUR_USERNAME} with your GitHub username from step 0 and 1

Here's how ours looks like:

root@aa4d5567891b:/# github_pat_r1VQ48bux6ZOLaN4p_7hH0ET9MKlJNXB5docPC2yFfv3eitkUAxW@@github.com/Technical-Writing-Docs/Sandbox-Git-Access-Token
Enter fullscreen mode Exit fullscreen mode

Step 5 - Update your README.md and push your modifications .

  • On your Sandbox, while on the Shell terminal, navigate to your new directory. 
root@aa4d5567891b:/# cd Sandbox-Git-Access-Token
root@aa4d5567891b:/Sandbox-Git-Access-Token#
Enter fullscreen mode Exit fullscreen mode
  • Update your 'README.md' file with Successfully cloned Sandbox-Git-Access-Token repo. 
root@aa4d5567891b:/Sandbox-Git-Access-Token# echo 'Successfully cloned Sandbox-Git-Access-Token repo.' >> README.md
root@aa4d5567891b:/Sandbox-Git-Access-Token# cat README.md
How to connect your sandbox to your repo using GitHub access token.
Successfully cloned Sandbox-Git-Access-Token repo.
Enter fullscreen mode Exit fullscreen mode
  • Update your git identity 
root@aa4d5567891b:/Sandbox-Git-Access-Token# git config --global user.email {YOUR-EMAIL@EXAMPLE.COM}
root@aa4d5567891b:/Sandbox-Git-Access-Token# git config --global user.name {YOUR GITHUB USERNAME}
Enter fullscreen mode Exit fullscreen mode

Replace {YOUR-EMAIL@EXAMPLE.COM} with the email address you used to create/link your GitHub account

Replace {YOUR GITHUB USERNAME} with your GitHub username

  • Commit your changes to the remote server / origin 
root@aa4d5567891b:/Sandbox-Git-Access-Token# git add .
root@aa4d5567891b:/Sandbox-Git-Access-Token# git commit -m"Updated README.md and GitHub identity"
[master (root-commit) 98ag93] Updated README.md and GitHub identity
 1 file changed, 1 insertion(+)
 create mode 100644 README.md
root@aa4d5567891b:/Sandbox-Git-Access-Token# git push
Enumerating objects: 3, done.                                                                                                         
Counting objects: 100% (3/3), done.                                                                                                   
Writing objects: 100% (3/3), 212 bytes | 212.00 KiB/s, done.                                                                          
Total 3 (delta 0), reused 0 (delta 0)                                                                                                 
To https://github.com/{YOUR_USERNAME}/Sandbox-Git-Access-Token                                                                                       
 * [new branch]      master -> master
Enter fullscreen mode Exit fullscreen mode

Good job!

You have successfully created a GitHub access token, set up your sandbox and connected it to your GitHub repo.

You can now check your repository on GitHub to see if everything is good.

Top comments (0)

Read next

softwaresennin profile image

End to End CI/CD pipeline using GitHub Actions for Android Application

Lionel♾️☁️ -

chamal1120 profile image

# How to write good commit messages

Chamal Randika -

mike_faber_4aaf24b0b056ad profile image

Top Open Source eCommerce Platforms

Mike Faber -

lovelydev829 profile image

Step-by-Step Guide for Deploying a Next.js Project as GitHub Pages

Josue Valdivia -