Import a project from your laptop to an Eclipse Che workspace.

Florent Benoit
Apr 2, 2020 · 7 min read

Eclipse Che is a Kubernetes-Native IDE. It might be interesting to work on your project using remote resources instead of consuming your laptop resources. Another interesting way is to use containers that might be used in production as well.

Also let say you’re running out of battery, you may spare CPU and get extra time !

In this article we’ll cover how to set this up, by:

  1. Defining an Eclipse Che workspace for a project (create a devfile).
  2. Starting an Eclipse Che workspace ready to receive the project.
  3. Pushing / importing the local files into the remote Eclipse Che workspace.
  4. Coding using Eclipse Che.
  5. Synchronizing all code changes with rsync.
  6. Stopping the Che workspace and even deleting it without impacting the local copy.

Prerequisites

1. On my laptop: check all tools are available

  • Check installation of kubectl to execute rsync command.
  • Check installation of oc if Eclipse Che is running on top of OpenShift.

If these tools are not installed, please install them.

2. In Eclipse Che Workspace

Note: with OpenShift we could useoc rsync command. But there is no exclude filter taken into account for example. So in this blog post I will use only kubectland rsynctools

Eclipse Che workspaces may include several running containers. (Workspace pod). Let’s add a new container that will manage only rsync operations.

For the demo, I will create a custom OCI image based on alpine. In this custom image, I will install rsync tool.

I’ve published this image under quay.io/fbenoit/rsync-simple so no need to build it.

The image includes the following:

FROM alpine:latest
...
RUN apk add --no-cache rsync
...

As you can see this just adds thersync tool inside the smallest container possible (based on alpine linux).

I’ve also added an entry-point to keep the container always-on. I added extra permissions to make it compliant with random user-id for OpenShift.

3. A local project

The project I’m using is a clone of https://github.com/che-samples/react-web-app

I’ve cloned it into $HOME/react-web-app folder.

The application is a Nodejs example.

Workflow

1. Define an Eclipse Che workspace for my project (create a devfile)

I set persistVolumes to false as the storage will be our laptop. I don’t want to use remote storage to save my project files.

As seen in prerequisites, rsynctool needs to be part of the workspace. Let’s add a new rsync component and let it have access to /projects folder using mountSources: true

The workspace now includes the rsync tool.

Let’s add new components to work on the project with Eclipse Che.

The project that I want to import is a Nodejs project.

Now I add :

  • Intellisense with a typescript plugin
  • nodejs component to have node tools.

2. Start an Eclipse Che workspace ready to receive my project

There are a few ways we can start the Che workspace:

  • Importing this devfile into the Eclipse Che dashboard
  • Using chectl with the devfile
  • Opening this direct link that creates and starts the workspace
Creating workspace from a custom devfile from dashboard

After the startup of the workspace, we can see the IDE. We can see that there are no files in project tree. This is normal because we want to import our local project folder.

3. Push/Import into the remote Eclipse Che workspace the local files

  1. kubectl ready-to-use (authentication performed)
  2. The name of the workspace pod
  3. A rsync bash script

3.1. kubectl

I can use the OpenShift web console to do that. To get the web console link, open a terminal inside the IDE by using the Workspace panel within the IDE

Open a terminal inside Theia IDE container for example
$ echo ${CHE_OSO_CLUSTER//api/console}

It will display the URL of the console

Use command+click on https://console.starter-us-east-2.openshift.com/
It will open link in default browser.
Note: your cluster might be different so the URL might be different as well.

When logged in in the OpenShift console:

  • Open the top right corner link
  • Click on copy Login command and execute that command on your laptop.
copy oc login command

You should be now connected from your laptop to the OpenShift cluster.

list pods using the kubectl command

3.2. Name of the workspace pod

We need the name of the workspace. It is available from a terminal with the following command:

$ echo $HOSTNAME
Grab workspace pod name

Another way is to usekubectl or octool to find the workspace pod name ($ kubectl get podsor $ oc get pods).

Name of the container that includes rsync is rsync as it’s the alias name we defined in the devfile.

3.3. The rsync script

We will need a shell script to perform the copy and this script will use kubectl exec command.

Create a new file kubectl-rsync.sh with the following content:

kubectl-rsync.sh

And make it executable: chmod u+x kubectl-rsync.sh and now let’s assume you copy it to ${HOME}/bin folder.

Now, let’s create another script named workspace-sync.sh

Apply permissions by using chmod u+x workspace-sync.sh

Copy it for example to ${HOME}/bin folder. We’re using the -e option in rsync parameters to specify another shell.

Now that our scripts have been setup, it’s time to use them.

First, we store the workspace pod into an env variable:

$ export WORKSPACE_POD=workspacelmog4zkmikhxpc87.workspace-74d787cf95-xbd26

Let’s proceed to the first import.

Assuming our local Nodejs app is in ${HOME}/react-web-app, execute the following command:

$ RSYNC_OPTIONS="--progress --stats --exclude 'node_modules'" RSYNC_FROM="${HOME}/react-web-app" RSYNC_TO="${WORKSPACE_POD}:/projects/" ${HOME}/bin/workspace-sync.sh

Files are being transferred into the remote workspace.

We see progress due to --progress option.

In the UI now we see react-web-app folder:

After initial sync

4. Code using Eclipse Che

yarn

And now start the webapp using yarn start command inside /projects/react-web-app

And edit src/App.tsx file and see the result.

5. Synchronize back all the changes

We’ll use the same workspace-sync.sh script but we’ll reverse the source and destination. Because now we want to copy remote changes to the laptop and not the previous way. Also, we’ll set this time RSYNC_INFINITE=true to do rsync every 15s (to never miss remote changes).

$ RSYNC_OPTIONS="--exclude node_modules" RSYNC_FROM="${WORKSPACE_POD}:/projects/react-web-app/" RSYNC_TO="${HOME}/react-web-app/" RSYNC_INFINITE="true" ${HOME}/bin/workspace-sync.sh

I dropped --progress --stats from RSYNC_OPTIONS to not generate too much output.

One issue is that when syncing back the changes, we don’t want to download the whole node_modules folder. Adding the --exclude node_modules parameter takes care of that.

The script now checks all the changes every 15 seconds.

All changes from Eclipse Che workspace are now inside my filesystem.

Let’s check:

6. Finishing

Note: With persistVolumes=false , restarting the workspace will result in an empty project tree again until you re-run the laptop-to-remote-Che sync script.

Eclipse Che Blog

News and articles for Eclipse Che - next-generation Eclipse…

Thanks to Fabrice Flore-Thébault and Sun S. D. Tan

Florent Benoit

Written by

Working on Eclipse Che and Red Hat Code Ready Workspaces Twitter: @florentbenoit

Eclipse Che Blog

News and articles for Eclipse Che - next-generation Eclipse IDE, developer workspace server, and cloud IDE.

Florent Benoit

Written by

Working on Eclipse Che and Red Hat Code Ready Workspaces Twitter: @florentbenoit

Eclipse Che Blog

News and articles for Eclipse Che - next-generation Eclipse IDE, developer workspace server, and cloud IDE.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store