eliott/Olares

Fork 0

Files

Eliott van Nuffel d4e933688d rebrand docs content for beOS Pro

2026-03-09 10:19:35 +01:00

9.2 KiB

Raw Blame History

outline, description

outline

description

Learn how to use Studio to set up a dev container, access it via VS Code, and configure port forwarding.

Develop in a dev container

beOS Pro Studio allows you to spin up a pre-configured dev container to write and debug code (such as Node.js scripts or CUDA programs) without managing local infrastructure. This provides an isolated environment identical to the production runtime.

The following guide shows the development and setup workflow using a Node.js project as an example.

Prerequisite

beOS Pro version 1.12.2 or later.

1. Initialize the container

To start coding, you must provision the container resources and select your runtime environment.

Open Studio and select Create a new application.
Enter an App name, for example: My Web, and click Confirm.
Select Coding on beOS Pro as the creation method.
Configure the Dev Env:

a. From the drop-down list, select beclab/node20-ts-dev:1.0.0.

b. Allocate the resources for the container. For example:
- CPU: 2 core
- Memory: 4 Gi
- Volume Size: 500 Mi
In the Expose Ports field, enter the ports you intend to use for debugging (e.g., 8080). :::tip Expose multiple ports Port 80 is exposed by default. Separate multiple additional ports with commas. :::
Click Create. Wait for the status in the bottom-left corner to change to Running.

2. Access the workspace

You can access your dev container via the browser or your local IDE.

Option A: Browser-based VS Code

Click code-server in Studio. This launches a fully functional VS Code instance inside your browser.

Option B: Local VS Code (Remote Tunnel)

If you prefer your local settings and extensions, you can tunnel into the container.

Click code-server in Studio to open the browser-based VS code.
Click menu in the top left, and select Terminal > New Terminal to open the terminal.

Install the VS Code Tunnel CLI:

curl -SsfL https://vscode.download.prss.microsoft.com/dbazure/download/stable/17baf841131aa23349f217ca7c570c76ee87b957/vscode_cli_alpine_x64_cli.tar.gz | tar zxv -C /usr/local/bin

Create a secure tunnel:
```
code tunnel
```
Follow the terminal prompts to authenticate using a Microsoft or GitHub account via the provided URL.
Assign a name to the tunnel when prompted (e.g., myapp-demo). This will output a vscode.dev URL tied to this remote workspace.
Open VS Code on your local machine, click the >< icon in the bottom-left, and select Tunnel. {width=30%}
Log in with the same account used in the previous step.
Select the tunnel name you defined (e.g., myapp-demo). It may take a few minutes for VS Code to establish the connection. Once successful, the remote indicator in the bottom-left will display your tunnel name. {width=30%}

Once connected, you have full remote access to the container's file system and terminal, mirroring a local development experience.

3. Write and run code

Once inside the workspace, either via browser or local tunnel, the workflow mirrors standard local development. You can populate your workspace by:

Uploading files
Cloning a Git repository, or
Creating files manually

This example demonstrates creating a basic web page manually.

Open the Explorer sidebar and navigate to /root/. :::info Studio persists project data at Data/studio/<app_name>/. :::
Click menu in the top left, and select Terminal > New Terminal to open the terminal.
Run the following command to initialize the project:
```
npm init -y
```
Install the Express framework:
```
npm install express --save
```

Create a file named index.js in /root/ with the following content:

// Ensure the port matches what you defined
const express = require('express');
const app = express();
app.use(express.static('public/'));
app.listen(8080, function() {
    console.log('Server is running on port 8080');
});

Create a public directory in /root/ and add an index.html file:

<!DOCTYPE html>
 <html>  
     <head>
         <meta charset="UTF-8">
         <title>My Web Page</title>
     </head>
     <body>
         <h1>Hello World</h1>
         <h1>Hello beOS Pro</h1>
     </body>
 </html>

Start the server:
```
node index.js
```
Open the Ports tab in VS Code and click the forwarded address to view the result.

4. Configure port forwarding

If you need to expose additional ports after the container is created (e.g., adding port 8081), you must manually edit the container configuration manifests. :::tip You can follow the same steps to modify beOS ProManifest.yaml and deployment.yaml to change the port number. :::

Modify configuration manifests

In Studio, click box_editEdit in the top-right to open the editor.

Edit beOS ProManifest.yaml.

a. Append the new port to the entrances list:

entrances:
- authLevel: private
  host: myweb
  icon: https://app.cdn.beos.local/appstore/default/defaulticon.webp
  invisible: true
  name: myweb-dev-8080
  openMethod: ""
  port: 8080
  skip: true
  title: myweb-dev-8080
# Add the following
- authLevel: private
  host: myweb # Must match Service metadata name
  icon: https://app.cdn.beos.local/appstore/default/defaulticon.webp
  invisible: true
  name: myweb-dev-8081 # Unique identifier
  openMethod: ""
  port: 8081 # The new port number
  skip: true
  title: myweb-dev-8081

b. Click save in the top-right to save changes.

Edit deployment.yaml.

a. Add the port mapping to default-thirdlevel-domains under Deployment > metadata:

  annotations:
    applications.app.bytetrade.io/default-thirdlevel-domains:
     '[{"appName":"myweb","entranceName":"myweb-dev-8080"},{"appName":"myweb","entranceName":"myweb-dev-8081"}]'
     # entranceName must match the name used in beOS ProManifest.yaml

b. Update the studio-expose-ports annotation under spec > template > metadata:

 template:
   metadata:
     annotations:
       applications.app.bytetrade.io/studio-expose-ports: "8080,8081"

c. Add the port definition under Service > spec > ports:

kind: Service
spec:
  ports:
  - name: "80"
    port: 80
    targetPort: 80
  - name: myweb-dev-8080
    port: 8080
    targetPort: 8080
    # Add the following
  - name: myweb-dev-8081 # Must match entrance name
    port: 8081
    targetPort: 8081
  selector:
    io.kompose.service: myweb

d. Click save in the top-right to save changes.

Click Apply to redeploy the container.

Once deployed, go to Services > Ports. You can see your new port listed here.

Test the connection

Update index.js to listen on the new port:

const express = require('express');
const app = express();
app.use(express.static('public/'));
app.listen(8080, function() {
    console.log('Server is running on port 8080');
});
// Add the following
const app_new = express();
app_new.use(express.static('new/'));
app_new.listen(8081, function() {
    console.log('Server is running on port 8081');
});

Create a new directory in /root/ and add an index.html file:

<!DOCTYPE html>
 <html>  
     <head>
         <meta charset="UTF-8">
         <title>My Web Page</title>
     </head>
     <body>
         <h1>This is a new page</h1>
     </body>
 </html>

Restart the server:
```
node index.js
```
Check the Ports tab to confirm port 8081 is active and accessible.
Click the forwarded address to view the result.

9.2 KiB Raw Blame History