Gitpod

Gitpod is an open-source application that provides a prebuilt development environment in your browser - powered by VS Code. It also automates the provisioning of a ready-to-code developer environment, so you will have all the dependencies you need (for example MongoDB). With Gitpod, there’s no need to download any code to your machine. It can create a server-side-dev-environment for you in seconds from any repository on GitHub.

How to use Gitpod

You can use Gitpod in the cloud. Please note, that Gitpod requires additional configuration to work on the authenticated pages in BioDrop. See instructions for how to set up your OAuth app for more information.

There are 2 ways you can open a repository with Gitpod.

1st Method: Prefix the url with gitpod.io/#

1. Go to the GitHub page of your forked BioDrop repository
2. Copy the url from the address bar and paste the code gitpod.io/# in front of it

3. After starting the search, a warning screen will open; you can click the Continue button

4. The VS Code environment will appear

2nd Method: Use a browser extension

The Gitpod extensions is available for Firefox and Chrome. It also works for Edge, Brave, and other Chromium-based browsers. For further details, read the Browser Extension documentation on Gitpod official website.

Permissions

If you encounter permission issues, follow the next steps:

1. Click on the menu button (the three horizontal lines icon) in the upper left corner and open the Dashboard

2. In the Workspaces page, click on your profile icon and choose User settings

3. From the left menu, click on the Git Providers tab; on the right side, click on the three dots icon of the repository that interests you

4. Choose Edit Permissions
5. Make sure that you have checked public_repo and workflow, then click on Update permissions

6. A first new window will open requesting additional permissions; you can click on the Authorize gitpod-io button

7. A second new window will open, asking you to confirm to apply the changes made by entering your GitHub account password; you can apply and save the changes by clicking on the Confirm button

Development

Once you have opened a repository, you can develop as you usually do! Make sure that the NEXT_PUBLIC_BASE_URL in your .env file is using your Gitpod URL (you can find this in your preview window, the ports tab, or by running gp url 3000). In the next example, we will update our profile from BioDrop.

Open your fork and follow along.

First, Let's make sure that we have the latest version of the code. To achieve this, run the following commands:

git checkout main
git pull upstream main

Now we can update our profile. To do this, create a new branch with the following command

# Replace YOUR_PROFILE_NAME with your actual profile name.
git checkout -b update-YOUR_PROFILE_NAME

Now that we have our profile, we are ready to make some modification to our profile. Find the file with your account name in the data folder, and modify it as you want.

For example, you can copy and past the following code:

"milestones": [
    {
      "title": "Used Gitpod to Update my Profile",
      "date": "July 2023", // date updated
      "icon": "FaCode",
      "description": "Started my profile by using Gitpod",
      "url": "https://gitpod.com/"
    }
  ]

Lastly, commit the changes and create a PR in the BioDrop repository.