02 Kubeflow: VS Code v prehliadači02 Kubeflow: VS Code in the browser

Kubeflow is the university cloud (ml.cloud.tuke.sk) where you start your own VS Code (code editor) right in the browser. Nothing gets installed, it works from the lab and from home, files are saved on a disk in the cloud (15 GB) and stay there even after you close the browser. You also get a terminal (command line), Git, PHP and Composer.

1. Open ml.cloud.tuke.sk and sign in with your TUKE login (e.g. jn123ab) and password.

2. At the first sign-in Kubeflow asks you to create a namespace, your personal space. It suggests a name based on yours (e.g. jan-novak). Keep the suggested name and confirm.
3. The dashboard opens with a menu on the left. You will use only Notebooks.

A notebook in Kubeflow is a running environment, in our case VS Code.

1. On the left click Notebooks, top right + New Notebook.
2. Name: vscode (lowercase, no spaces or accents, otherwise the Launch button stays disabled).
3. Choose the VisualStudio Code card (the middle one of three).
4. Leave Custom Notebook as it is. It is set to the image matoh12/kubeflow-codeserver-full:latest, which contains PHP, Composer, Git and SSH. Do not expand or change anything.
5. Leave CPU / RAM, GPUs and the other fields at their defaults.
6. Click LAUNCH.

7. vscode appears in the list with the status "Creating". Wait for the green tick (1 to 3 minutes, longer at the first start). Then click CONNECT.

VS Code opens in a new browser tab.

Trust and the welcome tab

After the start, the Explorer panel is on the left (the two-pages icon in the left bar) with the heading JOVYAN. That is your home folder /home/jovyan (jovyan is the user name in the cloud, the same for everyone). It is almost empty at first; you see a few hidden folders (.cache, .config, .local), leave them alone.

Restricted Mode may be shown at the bottom left of the status bar. Click it and in the Workspace Trust window click Trust. Extensions do not work without it.

Close the Welcome tab with the cross.

Settings

Press Ctrl + , (Ctrl and comma) to open Settings. In the search box type, one after another:

• auto save, set Files: Auto Save to afterDelay. Files save themselves about a second after you stop typing. Ctrl + S never hurts, but you do not have to think about it.
• font size, Editor: Font Size to taste (14 to 16).
• color theme, Workbench: Color Theme to taste.

Settings save themselves; close the tab.

Terminal

The terminal is the command line. You will type Git commands and run PHP in it. Open it through the ☰ menu (three horizontal lines at the top left, above the Explorer icon), Terminal, New Terminal. A panel appears at the bottom with the text jovyan@vscode-0:~$. That is the prompt, waiting for a command. The grey text about Copilot CLI disappears when you start typing.

Terminal rules:

• Type the whole command on one line and press Enter only at the end.
• Always one command, Enter, then the next. Two commands glued on one line end in an error.
• If the terminal seems stuck (prints nothing, the prompt does not come back), press Ctrl + C.
• The up arrow brings back the previous command, Tab completes file names.
• Several terminals at once: the + icon in the terminal panel.

Test: type and press Enter:

php -v

It should print "PHP 8.3…". If so, the environment is fine.

Extensions

Extensions add language and tool support to the editor. Click the four-squares icon in the left bar (or Ctrl + Shift + X), type the name in the box and click Install next to the right item:

After a notebook restart: the extensions again

Kubeflow deletes the extensions when the notebook restarts. You can tell because Go Live is missing from the status bar and Upload Folder is not in the menu. Do not look for them one by one; install all of them at once with one command in the terminal:

code-server --install-extension Natizyskunk.sftp --install-extension yandeu.five-server --install-extension bmewburn.vscode-intelephense-client --install-extension mblode.twig-language-2

It takes about a minute. Then F1, type reload, Developer: Reload Window (or F5). Settings (sftp.json, Git, keys) are on the disk and stay. You will do this step often; it is also the first step of every Kubeflow session in guide 04.

Intelephense shows a message about a paid licence; click Dismiss, the free version is enough. Then in Settings (Ctrl + ,) search for intelephense environment php version and set 8.1.0. Sigma runs PHP 8.1, so the editor will underline things that would not run there.

Then click back on the Explorer icon.

Git is a version control tool. It records every change in the project and lets you go back to an older version. Before you save anything with it for the first time, it needs to know who you are. In the terminal type (replace the name and the noreply address from GitHub you saved in guide 01):

git config --global user.name "Ján Novák"
git config --global user.email "123456789+jan-novak@users.noreply.github.com"

Check:

cat ~/.gitconfig

It prints [user] with your name and address.

Why the noreply address: GitHub is set to keep your real address out of the code ("push declined due to email privacy restrictions"). With the noreply address it goes through and your changes are correctly linked to your account.

An SSH key is a pair of files: a private key (stays in Kubeflow, you never give it to anyone) and a public key (you give it to sigma). Once sigma has your public key, Kubeflow proves itself with the private one and files are copied without a password (guide 03).

1. Generate the key in the terminal (once):

ssh-keygen -t ed25519 -C "kubeflow" -N "" -f ~/.ssh/id_ed25519

Two files appear: ~/.ssh/id_ed25519 (private; never print or copy it) and ~/.ssh/id_ed25519.pub (public).

2. Send the public key to sigma:

ssh-copy-id jn123ab@sigma.tuke.sk

(replace jn123ab with your TUKE login). It asks "continue connecting?", type yes, then it asks for your TUKE password (nothing shows while typing, that is normal). It prints "Number of key(s) added: 1".

Test:

ssh jn123ab@sigma.tuke.sk hostname

It should print sigma without asking for a password.

The same key can also be used for GitHub if you would rather clone over SSH than HTTPS. It is not needed; the steps are in guide 03, part 7.

All assignments go into one folder web, which has the same structure as your public_html on sigma. Thanks to that, copying to sigma is set up only once, in guide 03.

1. In the terminal:

mkdir -p ~/web

2. Open this folder as your workspace: ☰ menu, File, Open Folder, type /home/jovyan/web/ in the field, OK. If it asks about trust, click Yes, I trust the authors.

The Explorer heading is now WEB instead of JOVYAN. From now on you always work here. Next time VS Code opens this folder by itself.

Structure (folder names as your teacher says):

Kubeflow: /home/jovyan/web/      ←→   sigma: ~/public_html/
    ├── ti/cv01/                          ├── ti/cv01/
    ├── ti/cv02/                          ├── ti/cv02/
    └── it/cv01/                          └── it/cv01/

Everything you do with files can be done in two ways: by clicking in Explorer (the left panel) or with a command in the terminal. The result is the same; pick whichever suits you. In the lab we use both.

Explorer (by clicking)

Explorer shows the folder tree under WEB. The arrow in front of a name expands or collapses a folder; clicking a file opens it in the editor.

• New folder: right click the folder it should go into (e.g. ti), New Folder…, the name, Enter. Lowercase, no spaces or accents.
• New file: right click a folder (e.g. cv01), New File…, a name with an extension (index.html, style.css, index.php), Enter. The file opens right away.
• Rename: right click, Rename… (or F2).
• Delete: right click, Delete. It asks for confirmation.
• Move: grab the file with the mouse and drop it on another folder in Explorer.
• A file from your computer (an image, a PDF, anything): open File Explorer (Windows) or Finder, grab the file with the mouse and drop it on a folder in Explorer. Kubeflow uploads it. Several files at once work too.
• A file from Kubeflow to your computer: right click the file, Download….

Terminal (by commands)

The terminal always has a "current folder" the commands work in. You see it in the prompt before $: ~/web/ti$ means you are in /home/jovyan/web/ti. The tilde ~ is short for your home folder /home/jovyan.

Helpers: Tab completes a file or folder name (type the first letters and press Tab), the up arrow brings back the previous command, Ctrl + C interrupts a stuck command. Always check a command with ls: what you do not see in the listing does not exist.

Test; type line by line:

cd ~/web
mkdir -p pieskovisko/projekt
cd pieskovisko
touch poznamky.txt
ls
cd projekt
pwd
cd ..
rm -r projekt
ls

After the first ls you see poznamky.txt and projekt, pwd prints /home/jovyan/web/pieskovisko/projekt, after the second ls projekt is gone. The same happens in Explorer; have a look.

Other useful things

• HTML skeleton: in an empty .html file type ! and press Tab. The page skeleton is generated.
• Markdown preview (e.g. README.md with the assignment): Ctrl + Shift + V.
• HTML preview without sigma: right click in the file, Open with Five Server. A browser tab opens that refreshes after every save. (The main route is sigma, guide 03.)
• Command palette: F1 or Ctrl + Shift + P, a search across all VS Code commands. The field starts with >. Without it you search files, not commands.
• Source Control (the branch icon): Git by clicking, guide 04.