Creating Workspaces

You can create a Workspace using different ways:

  • Devfile: You can create a workspace by providing a devfile, which is a YAML configuration that defines the workspace environment.

  • Dashboard Template: Red Hat OpenShift Dev Spaces offers pre-configured workspace templates for common development stacks. You can launch these from the Dev Spaces dashboard page.

  • Git repository: You can create a workspace directly from an existing Git repository.

Devfiles are covered in detail in a separate chapter. This is the most common and flexible approach, allowing you to customize the Workspace environment to suit your needs.

This chapter will cover launching Workspaces using Git repositories and the Dashboard Templates.

Creating a Workspace using a Git Repository

You can use a Git repository URL in your browser to launch a new workspace that contains a clone of a Git repository. This way, you can clone a Git repository that is hosted on GitHub, GitLab, Bitbucket, or Microsoft Azure DevOps server instances.

A number of useful starter examples for various programming language runtimes and frameworks are available at https://github.com/orgs/devspaces-samples/repositories.

Launching Workspaces using Dev Spaces URL

The Dev Spaces dashboard is an intuitive, easy-to-use web-based user interface to launch and manage workspaces. You can also create a workspace by using the Dev Spaces root URL and then appending the Git repository URL and various other settings as URL parameters to the root URL.

If your Dev Spaces fully qualified domain name (FQDN) is https://openshift_dev_spaces_fqdn, then you can launch a workspace by navigating to:

https://<openshift_dev_spaces_fqdn>#git_repository_url

For example, to open the source code of a GitHub repository in a Dev Spaces workspace:

https://<openshift_dev_spaces_fqdn>#https://github.com/che-samples/cpp-hello-world

The above URL creates a new workspace with a clone of the default branch in the Git repository (usually main, but it depends on what branch you have configured as the default).

To start a new workspace with a clone of the staging branch:

https://<openshift_dev_spaces_fqdn>#https://github.com/che-samples/cpp-hello-world/tree/staging

Replace staging with any other branch in your repository to open the source code tree of that branch.

If you have a pull request in your GitHub repository with an ID of 100, then to open the code in the PR:

https://<openshift_dev_spaces_fqdn>#https://github.com/che-samples/cpp-hello-world/pull/100

Consult the product documentation for more information on starting a workspace from a Git repository URL, including examples for other source control systems such as Gitlab, BitBucket, and Azure DevOps. at for more examples, and for URL examples for other source control systems like GitLab, BitBucket, Azure DevOps, etc.

Lab: Create a Workspace using a Git Repository

Pre-requisites

You must have installed and configured a Dev Spaces instance in the second course in the learning path (Red Hat OpenShift Dev Spaces Administration). Both the admin and user1…​user5 users must be allowed to log in using the password openshift23.

Steps

  1. Log in to Dev Spaces as the user1 user.

  2. Inspect the GitHub repository at https://github.com/che-samples/web-nodejs-sample. This repository contains the source code for a simple Node.js web application. You will create a workspace and clone this repository in the next steps. Inspect and review the devfile.yaml, which is the Devfile for this application, and it is always stored at the root of the Git repository

    You can also import a Git repository without a devfile.yaml. In such a case, Dev Spaces will use Red Hat’s Universal Developer Image (UDI) as the base image, if a base container image is not provided in the devfile.yaml. UDI is a large container image containing the development tools and runtimes for a number of popular programming languages. You will learn about UDI in a separate section in the Devfiles chapter.

  3. Fork this repository to your GitHub account.

  4. In the Dev Spaces Dashboard page, enter https://github.com/<your_github_userid>/web-nodejs-sample in the Git Repo URL field in the Import from Git section, and click Create & Open

    launch git repo
    Figure 1. Launch a Workspace from Git

  5. You will be prompted to trust the authors of this Git repository. Click Continue.

  6. Wait for a few minutes while the large UDI image is downloaded and the workspace is created

    ws creation
    Figure 2. Workspace creation in progress

  7. After a while, the workspace should load with the VSCode web IDE, with the source code from the Git repository cloned in the workspace.

    ws open
    Figure 3. Workspace with source code

  8. You can now work with this project just like you would use VSCode installed on your local workstation. You can open a terminal and run commands like npm install, npm test, npm start etc. However, the devfile.yaml has provided some convenient commands listed under the commands section.

  9. Inspect the devfile.yaml in the Workspace. Note the commands under the commands attribute. These commands are available as VSCode Tasks in the editor menus. Expand the menu to the left of the EXPLORER (three vertical bars), and click Terminal > Run Task

    task menu
    Figure 4. VSCode Task Menu

  10. You will be shown a list of tasks supplied by the devfile. Click Show all Tasks to see the full task list

    all tasks
    Figure 5. All Tasks

  11. Run the devfile:Install dependencies task, which runs npm install and fetches all the dependencies for the project.

  12. Next, run the devfile: Run the web application task. A pop in the bottom right corner informs you that the application is running and listening on port 3000 and that the web application is available for preview. Click Open in New Tab, and then click Open in the following prompt. You should see Hello World printed as output.

  13. Press Ctrl-C to terminate the application in the terminal window at the bottom.

Optional Lab Steps

  1. Make some changes to the application source code at app/app.js. Change the welcome message. Re-run the application and verify that your changes are reflected.

  2. If you have configured GitHub authentication as per setup in the second course, your GitHub ID will be used in your workspace to track source changes. Run git status to see the changes you made and then run git add and git commit, followed by git push to push your changes back to your forked repository. Your Git workflow must work similarly to your local workstation. You can also view changes and work with Git using the Git menu in VSCode in the left sidebar:

    git menu
    Figure 6. Git menu in VSCode

  3. Since the workspace uses the UDI base image, OpenShift client tools should be available. Run oc whoami and verify that user1 is displayed. The OpenShift authentication tokens are automatically injected into the workspace. You can directly deploy the application to OpenShift and manage it from within the workspace.

    oc tools
    Figure 7. OpenShift client tool

References