Skip to content

Latest commit

 

History

History
156 lines (113 loc) · 12.3 KB

README.md

File metadata and controls

156 lines (113 loc) · 12.3 KB
Raw

Eclipse EMF.cloud - Project Template:
💾 Model Server ● 🖥️ Java GLSP-Server ● 🗂️ EMF ● 🖼️ Theia

This folder contains a simple project template to get you started quickly for your model editor implementation based on the EMF.cloud Model Server and GLSP. It provides the initial setup of the package architecture and environment for a model editor that uses ...

To explore alternative project templates or learn more about developing pure GLSP-based diagram editors, please refer to the Getting Started guide of the Eclipse GLSP project.

Project structure

This project is structured as follows:

The most important entry points are:

NOTE:  Due to bug GLSP-666 the launch configurations for the Theia Backend might not work as expected when using Windows. Unfortunately there is currently no work-around and if you encounter this bug you won't be able to debug the Theia backed.

Prerequisites

The following libraries/frameworks need to be installed on your system:

The examples are heavily interweaved with Eclipse Theia, so please also check the prerequisites of Theia.

Remark: This project-template relies on the latest published versions of Model Server, GLSP and the Model Server GLSP integration. This means, it is built separately from the integration framework.

VS Code workspace

For both the client and the server part of this example we use Visual Studio Code. It is of course possible to use the Eclipse IDE for the server or any other IDE or text editor.

To work with and debug the source code in VS Code a dedicated VS Code Workspace is provided. This workspace includes the client, glsp-server and model-server sources and offers dedicated launch configurations to run and debug the example application.

To open the workspace start a VS Code instance and use the Open Workspace from File.. entry from the File menu. Then navigate to the directory containing the workspace file and open the modelserver-glspjava-emf-theia-example.code-workspace file.

For a smooth development experience we recommend a set of useful VS Code extensions. When the workspace is first opened VS Code will ask you whether you want to install those recommended extensions. Alternatively, you can also open the Extension View (Ctrl + Shift + X) and type @recommended into the search field to see the list of Workspace Recommendations.

Building the example

The server component is built with maven and the client component is built with yarn. A convenience script to build both is provided. To build all components execute the following in the directory containing this README:

yarn build

In addition, it is also possible to build the components individually:

# Build only the client
yarn build:client

# Build only servers
yarn build:servers

Or you can use the available VS Code Tasks configured in the VS Code workspace (via Menu Terminal > Run Task...)

  • Build TaskList Servers
  • Build TaskList GLSP Client example

Running the example

To start the Theia browser application with the integrated TaskList example, execute the following command in the root directory

yarn start

This will launch the example in the browser with an embedded Model Server and GLSP server on localhost:3000.

To debug the involved components, the VS Code workspace offers launch configs, available in the Run and Debug view (Ctrl + Shift + D). Here you can choose between different launch configurations:

  • Launch TaskList Model Server [DEBUG]
    This config can be used to manually launch the TaskList Model Server java process. Breakpoints in the source files of the model-server directory will be picked up. In order to use this config, the Theia application backend has to be launched after startup of the Model Server, as it pings the Model Server and if it is already running it won't startup an embedded instance. If the Model Server is started via this launch config, it is possible to consume code changes immediately in the running instance via Hot Code Replace in the Debug toolbar.
  • Launch TaskList GLSP Server [DEBUG]
    This config can be used to manually launch the TaskList GLSP Server java process. Breakpoints in the source files of the glsp-server directory will be picked up. In order to use this config, the Theia application backend has to be launched in External server mode (see Launch TaskList Theia Backend (External GLSP Server)). If the GLSP server is started via this launch config, it is possible to consume code changes immediately in the running instance via Hot Code Replace in the Debug toolbar.
  • Launch TaskList Theia Backend [DEBUG] (External GLSP Server)
    This config launches the Theia browser backend application but does not start the GLSP server as embedded process. Breakpoints in the source files of the client/**/node directories will be picked up. It expects that the GLSP Server process is already running and has been started externally with the Launch TaskList GLSP Server config. The Model Server instance can be started prior to this launch config (as described above), otherwise an embedded instance is started.
  • Launch TaskList Theia Backend [DEBUG] (Embedded GLSP Server)
    This config launches the Theia browser backend application and will start the GLSP server as embedded process which means you won't be able to debug the GLSP Server source code. Breakpoints in the source files of the client/**/node directories will be picked up. The Model Server instance can be started prior to this launch config (as described above), otherwise an embedded instance is started.
  • Launch Theia Frontend [DEBUG]
    Launches a Google Chrome instance, opens the Theia browser application at http://localhost:3000 and will automatically open an example workspace that contains a example.tasklist file. Double-click the file in the Explorer to open it with the TaskList Diagram Editor. Breakpoints in the source files of the client/**/browser directories will be picked up.

Hint:  If the Java servers cannot be started via launch configuration or VSCode task, please try to execute the command Java: Clean Java Language Server Workspace via the VSCode command palette.

Watch the TypeScript packages

To run TypeScript in watch-mode so that TypeScript files are compiled as you modify them via CLI:

yarn watch

or the VSCode task Watch TaskList GLSP Client example.

Next steps

Once you are up and running with this project template, we recommend to refer to the Getting Started to learn how to

More information

For more information, please visit the EMF.cloud Umbrella repository, EMF.cloud Website, Eclipse GLSP Umbrella repository and the Eclipse GLSP Website. If you have questions, please raise them in the EMF.cloud discussions page or the Eclipse GLSP discussions page and have a look at our communication and support options.