# webside

<div align="center"><img src="/files/gReLK2x5p29t1mCfGUs1" alt="" height="200" width="400"></div>

[**Explore the docs »**](/webside/readme/docs.md)\
\
[View Demo](https://ide.webside.app) · [Report defect](https://github.com/guillermoamaral/Webside/issues/new?labels=Type%3A+Defect) · [Request feature](https://github.com/guillermoamaral/Webside/issues/new?labels=Type%3A+Feature)

Webside is both the specification of an [API](/webside/api.md) to interact with an Smalltalk system (backend), and a web [IDE](/webside/readme/docs.md) (frontend) built on top of such API.

The API definition follows this principle: *assume as less as possible from the underlying Smalltalk system*. This leads to keep a healthy distance from the particularities of a given dialect and its tooling, in favor of enabling the implementation of a common, yet useful set of tools (IDE) for every Smalltalk implementation.\
Of course, some assumptions are made and these impose some degree of *adaptation* in the implementation of the API for a particular Smalltalk.

Provided the API is implemented according to the specification, the IDE is fully operational on the Smalltalk at hand, offering traditional Smalltalk IDE tools such as code browsers, workspaces, inspectors, debugger and more.

![Webside on Bee](/files/168BIkje9VLWuBrNhihr)

![Webside on Pharo](/files/I92m3L23Gi1KQnNUAeSc)

![Webside on Dolphin](/files/MhNuWdmGeWKs2siPkeJN)

Read more [here](/webside/readme/docs.md).

#### Getting Started

**Prerequisites (for development)**

The following steps will demand both time and space, and are only intended to recreate the development environment in your local machine. In case you only want to use Webside to connect to some Smalltalk backend, you can skip these steps and go directly to [Usage](#usage).

* npm

```sh
npm install npm@latest -g
```

* Your Smalltalk image implementing the [API](/webside/api.md)

**Installation**

1. Clone the repo

```sh
git clone https://github.com/guillermoamaral/Webside.git
```

2. Install dependencies

```sh
npm install
```

3. Launch Webside

```sh
npm start
```

#### Usage

The last step will open a web browser on a page like the one shown below, asking for the `URL` of the target Smalltalk system and the `username` to be used inside your Webside session (this is used as the `author` of modifications, and to be identified by peers in the same session)

![Connection](/files/Udgxn4jZl7tfVqalfCze)

The URL (port and base URI) will correspond to the one chosen by the web server running inside the Smalltalk system (for instance, the default configuration of Webside for Pharo at the moment of writing this documentation is http\://{hostname}:9001/pharo)

#### Demo

There is an online version available [here](https://ide.webside.app). As mentioned above, it will prompt the URL where a Smalltalk system is listening. You can setup and launch Webside in Pharo as described in [Pharo-Webside](https://github.com/guillermoamaral/Pharo-Webside).

Also, here are some talks I gave about this project:

* [ESUG 2024](https://youtu.be/OGQYdKu4kvI?si=EGNSW0FINCKA6s7B)
* [ESUG 2022](https://youtu.be/Q4gmWTTFoww)
* [FAST 2021](https://www.youtube.com/live/tM4mcTtajGQ?feature=share)

#### License

Distributed under the MIT License. See `LICENSE` for more information.

#### Contact

Guille Amaral - <guillermoamaral@gmail.com>

Project Link: <https://github.com/guillermoamaral/Webside>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://webside.gitbook.io/webside/readme.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
