Skip to content

Update GitHub workflows to use new showcase-code-server folder path #67

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
aminalali8 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Update GitHub workflows to use new showcase-code-server folder path #67

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
331 changes: 184 additions & 147 deletions .bunnyshell/templates/showcase-code-server/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,152 +1,189 @@
# Integrating VS Code as a Sidecar Container using Bunnyshell
This documentation provides a step-by-step guide to integrate VS Code as a sidecar container for remote development using Bunnyshell. The provided `bunnyshell.yaml` template showcases how to achieve this setup effectively.

## Pre-Requisites

If your application uses a specified UID/GID please adjust the PUID and GUID template variables to reflect the id of the user being created to avoid permission issues.

### Understanding the Need for PUID and GUID

When mounting volumes across containers, permission issues can arise between the main and sidecar containers. Specifying the user PUID and group PGID ensures consistency and avoids these issues. Use the command `id your_user` to find your user and group IDs.

## Template Variables Explained

### Crucial Lines in the `bunnyshell.yaml`

1. **Exposing the Port for the Sidecar Container:**

```yaml
dockerCompose:
ports:
- '8080:8080' # main app port
- '8443:8443' # code-server port
```

2. **Defining the Sidecar Container:**

```yaml
dockerCompose:
pod:
sidecar_containers:
-
from: code-server
name: sidecar-code-server
shared_paths:
-
path: /config/workspace
target:
path: /path/to/src/in/main/container
container: '@parent'
initial_contents: '@target'
```

- `shared_paths[0].path`: The default workspace opened in the IDE.
- `shared_paths[0].target.path`: The path where the source code is in the main pod.

3. **Generating the Hostname for the Code Server Sidecar:**

```yaml
hosts:
... # host for main application
-
hostname: '{{template.vars.CODE_SERVER_HOST}}'
path: /
servicePort: '8443'
```

4. **Code-Server Environment Variables:**

Refer to [Code-Server Environment Variables Documentation](https://docs.linuxserver.io/images/docker-code-server/#environment-variables-from-files-docker-secrets).

```yaml
dockerCompose:
environment:
DEFAULT_WORKSPACE: '/config/workspace'
HASHED_PASSWORD: {{template.vars.HASHED_PASSWORD}}
PASSWORD: {{template.vars.PASSWORD}}
PGID: '{{template.vars.PGID}}'
PROXY_DOMAIN: {{template.vars.PROXY_DOMAIN}}
PUID: '{{template.vars.PUID}}'
SUDO_PASSWORD: {{template.vars.SUDO_PASSWORD}}
SUDO_PASSWORD_HASH: {{template.vars.SUDO_PASSWORD_HASH}}
TZ: {{ template.vars.TZ }}
```

- `PUID=1000`: UserID.
- `PGID=1000`: GroupID.
- `TZ=Etc/UTC`: Specify a timezone.
- `PASSWORD=password`: Optional web GUI password.
- `HASHED_PASSWORD=`: Optional hashed web GUI password.
- `SUDO_PASSWORD=password`: Optional sudo password.
- `SUDO_PASSWORD_HASH=`: Optionally set sudo password via hash.
- `PROXY_DOMAIN=code-server.my.domain`: Optional proxy domain.
- `DEFAULT_WORKSPACE=/config/workspace`: Default workspace directory.

## Example `bunnyshell.yaml` File

Below is the full `bunnyshell.yaml` configuration template:
# VS Code Sidecar Integration with Bunnyshell

This template demonstrates how to integrate VS Code as a sidecar container for remote development using Bunnyshell. It provides a complete development environment with a full-stack application (frontend, backend, database) and VS Code accessible through a web browser.
It provides:
- **Frontend Application**: React-based web application
- **Backend API**: Node.js backend service
- **Database**: PostgreSQL database
- **VS Code**: Web-based IDE accessible from anywhere
- **Shared Workspace**: Code accessible from both the main app and VS Code

# 🚀 TL;DR

1. **Deploy the template** using Bunnyshell
2. **Access your application** at `frontend-{your-domain}` and `backend-{your-domain}`
3. **Open VS Code** at `code-server-{your-domain}` with the password: `password`

## 🚀 Usage Workflow

```
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ 1. Deploy │───►│ 2. Access │───►│ 3. Login to │
│ Environment │ │ VS Code │ │ VS Code │
│ via Bunnyshell│ │ code-server- │ │ with Password │
│ │ │ {domain} │ │ │
└─────────────────┘ └─────────────────┘ └─────────────────┘
│
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ 6. Changes │◄───│ 5. Start │◄───│ 4. Open │
│ Auto-Sync │ │ Coding in │ │ Shared │
│ Between │ │ Workspace │ │ Workspace │
│ Containers │ │ │ │ │
└─────────────────┘ └─────────────────┘ └─────────────────┘
```

## 🏗️ Architecture Overview

```
┌─────────────────────────────────────────────────────────────┐
│ Bunnyshell Environment │
└─────────────────────────────────────────────────────────────┘
│
┌────────────────┼────────────────┼────────────────┐
│ │ │ │
┌─────────────────┐ ┌──────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ Frontend │ │ VS Code │ │ Backend │ │ Database │
│ Container │ │ Sidecar │ │ Container │ │ Container │
│ │ │ │ │ │ │ │
│ • React App │ │ • Web IDE │ │ • Node.js API │ │ • PostgreSQL │
│ • Port: 8080 │ │ • Port: 8443 │ │ • Port: 3080 │ │ • Port: 5432 │
│ • Host: frontend│ │ • Host: code- │ │ • Host: backend │ │ • Internal │
│ -{domain} │ │ server-{domain}│ │ -{domain} │ │ access only │
└─────────────────┘ └──────────────────┘ └─────────────────┘ └─────────────────┘
│ │
│ │
│ │
│ ┌─────────────────────────────────┐
│ │ Shared Workspace │
└───│ /cs_workspace │
│ (Auto-sync) │
└─────────────────────────────────┘
```
## 📁 File Structure

```
cs_workspace/ # Shared workspace (accessible from both containers)
├── frontend/ # React application source
│ ├── src/ # Source code directory
│ ├── public/ # Public assets
│ ├── package.json # Dependencies and scripts
│ └── Dockerfile # Frontend container build
├── backend/ # Node.js API source
│ ├── src/ # API source code
│ ├── routes/ # API endpoints
│ ├── models/ # Database models
│ ├── package.json # Backend dependencies
│ └── Dockerfile # Backend container build
└── README.md # Project documentation
```

# ⚙️ Configuration

## Template Variables

| Variable | Description | Default | Required |
|----------|-------------|---------|----------|
| `PASSWORD` | VS Code web interface password | `password` | Yes |
| `SUDO_PASSWORD` | Sudo password for container | `password` | Yes |

## Environment Variables

| Variable | Description | Default |
|----------|-------------|---------|
| `HASHED_PASSWORD` | Hashed version of password | `` |
| `PUID` | User ID for container permissions | `0` |
| `PGID` | Group ID for container permissions | `0` |
| `SUDO_PASSWORD_HASH` | Hashed sudo password | `` |
| `PROXY_DOMAIN` | Custom proxy domain | `` |
| `TZ` | Timezone setting | `Etc/UTC` |

## Port Configuration

- **Frontend**: `8080` (main application)
- **Backend**: `3080` (API service)
- **Database**: `5432` (PostgreSQL)
- **VS Code**: `8443` (web IDE)

## 🔧 Key Configuration Sections

### 1. Sidecar Container Definition

```yaml
pod:
sidecar_containers:
- from: code-server
name: sidecar-code-server
shared_paths:
- path: /cs_workspace
target:
path: /usr/src/app
container: '@parent'
initial_contents: '@target'
```

**What this does:**
- Creates a VS Code sidecar container
- Shares the `/cs_workspace` directory between containers
- Maps to `/usr/src/app` in the main application container
- Initializes with the target container's contents

### 2. Port Exposure

```yaml
ports:
- '8080:8080' # Frontend app
- '8443:8443' # VS Code sidecar
```

**Important:** Both ports must be exposed on the main application to make the sidecar accessible.

### 3. VS Code Container Configuration

```yaml
kind: Environment
kind: SidecarContainer
name: code-server
type: primary
templateVariables:
CODE_SERVER_HOST: code-server-{{env.base_domain}}
HASHED_PASSWORD: ''
PASSWORD: password
PGID: '1000'
PROXY_DOMAIN: ''
PUID: '1000'
SUDO_PASSWORD: password
SUDO_PASSWORD_HASH: ''
TZ: Etc/UTC
components:
-
kind: Application
name: sample-app
gitRepo: 'https://github.com/githubuser/example.git'
gitBranch: master
gitApplicationPath: /
dockerCompose:
...
ports:
- ... # App Port
- '8443:8443'
pod:
sidecar_containers:
-
from: code-server
name: sidecar-code-server
shared_paths:
-
path: /config/workspace
target:
path: /usr/share/nginx/html
container: '@parent'
initial_contents: '@target'
hosts:
- ... # main app host
-
hostname: '{{template.vars.CODE_SERVER_HOST}}'
path: /
servicePort: '8443'
-
kind: SidecarContainer
name: code-server
dockerCompose:
image: 'lscr.io/linuxserver/code-server:latest'
environment:
DEFAULT_WORKSPACE: '/config/workspace'
HASHED_PASSWORD: {{template.vars.HASHED_PASSWORD}}
PASSWORD: {{template.vars.PASSWORD}}
PGID: '{{template.vars.PGID}}'
PROXY_DOMAIN: {{template.vars.PROXY_DOMAIN}}
PUID: '{{template.vars.PUID}}'
SUDO_PASSWORD: '{{template.vars.SUDO_PASSWORD}}'
SUDO_PASSWORD_HASH: '{{template.vars.SUDO_PASSWORD_HASH}}'
TZ: '{{template.vars.TZ}}'
ports:
- '8443:8443'
dockerCompose:
image: 'lscr.io/linuxserver/code-server:latest'
environment:
DEFAULT_WORKSPACE: /cs_workspace
PASSWORD: '{{template.vars.PASSWORD}}'
# ... other environment variables
ports:
- '8443:8443'
```

This template facilitates the integration of VS Code as a sidecar container for remote development, ensuring a seamless and efficient development workflow. Adjust the provided `bunnyshell.yaml` and Dockerfile snippets to suit your application's needs. For further customization, refer to the [Code-Server Environment Variables Documentation](https://docs.linuxserver.io/images/docker-code-server/#environment-variables-from-files-docker-secrets).
# 🔐 Security Considerations

## Default Credentials
- **VS Code Password**: `password` (change this in production!)
- **Database Password**: `need-to-replace` (must be changed!)

## Permission Management
When using custom UID/GID:
1. Set appropriate `PUID` and `PGID` values
2. Ensure consistency across containers
3. Use `id your_user` command to find your user/group IDs

# 🔍 Troubleshooting

## Common Issues

**Permission Errors:**
- Ensure `PUID` and `PGID` match your user/group IDs
- Check that shared paths have correct permissions

# 📚 Additional Resources

- [Code-Server Environment Variables](https://docs.linuxserver.io/images/docker-code-server/#environment-variables-from-files-docker-secrets)
- [Bunnyshell Documentation](https://docs.bunnyshell.com/)

# 🤝 Contributing

This template is part of the Bunnyshell template collection. Feel free to:
- Report issues
- Suggest improvements
- Submit pull requests

# 📄 License

This template is provided as-is for educational and development purposes.
17 changes: 6 additions & 11 deletions .bunnyshell/templates/showcase-code-server/bunnyshell.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,13 @@ kind: Environment
name: code-server
type: primary
templateVariables:
CODE_SERVER_HOST: 'code-server-{{env.base_domain}}'
HASHED_PASSWORD: ''
PASSWORD: password
SUDO_PASSWORD: password
environmentVariables:
HASHED_PASSWORD: ''
PGID: '0'
PROXY_DOMAIN: ''
PUID: '0'
SUDO_PASSWORD: password
SUDO_PASSWORD_HASH: ''
TZ: Etc/UTC
components:
Expand Down Expand Up @@ -46,24 +46,19 @@ components:
path: /
servicePort: 8080
-
hostname: '{{template.vars.CODE_SERVER_HOST}}'
hostname: 'code-server-{{env.base_domain}}'
path: /
servicePort: 8443
-
kind: SidecarContainer
name: code-server
dockerCompose:
image: 'lscr.io/linuxserver/code-server:4.90.3'
image: 'lscr.io/linuxserver/code-server:latest'
environment:
DEFAULT_WORKSPACE: /cs_workspace
HASHED_PASSWORD: '{{template.vars.HASHED_PASSWORD}}'
CODE_SERVER_HOST: '0.0.0.0'
PASSWORD: '{{template.vars.PASSWORD}}'
PGID: '{{template.vars.PGID}}'
PROXY_DOMAIN: '{{template.vars.PROXY_DOMAIN}}'
PUID: '{{template.vars.PUID}}'
SUDO_PASSWORD: '{{template.vars.SUDO_PASSWORD}}'
SUDO_PASSWORD_HASH: '{{template.vars.SUDO_PASSWORD_HASH}}'
TZ: '{{ template.vars.TZ }}'
ports:
- '8443:8443'
volumes:
Expand Down
Loading