Get your first web-enabled DSL running in 60 seconds

Xtext is the most popular framework for delivering high quality domain-specific languages for the Eclipse community. Since version 2.9 it is web-ready and provides an interface for the integration of text editors in web applications, which we already use for various customers in production.

With its recent release 2.11 both TypeFox and itemis made major efforts to further stabilize the framework and add future-proof support for the language server protocol.

However, the scaffolding of new Xtext projects is still done using the Eclipse wizard provided by the framework. Since the goal is to depend less on Eclipse and be able to develop languages in the web, a new mechanism for setting up Xtext projects is required and introduced in this post.

Let's get started!

Prerequisites

  • Node.js in version 6 or higher
  • JDK 8

The Yeoman generator

Yeoman is "the web's scaffolding tool for modern webapps" and provides a generator ecosystem for various project types. The new Xtext generator is just one of the many available generators. Right now it is not as powerful as the Eclipse wizard but more versatile and can be easily extended.

We can install both using:

npm install -g yo generator-xtext 

Bootstrapping your new project

Simply navigate to your new project directory and call:

yo xtext

You will be prompted for details similar to the Eclipse wizard. Currently it defaults to a Gradle build with the Gradle/Maven source code structure. Make sure you select the 'web' facet as it is not selected by default.

Welcome to the Xtext Yeoman generator.
? Project name: org.xtext.example.mydsl
? Language name: org.xtext.example.mydsl.MyDsl
? File extension: mydsl
? Select the facets you would like to use: (Press <space> to select, <a> to toggle all, <i> to inverse selection)
◉ testing
◉ ide
❯◉ web

Upon completion the generator will generate your project and run a Gradle build on it.

Afterwards, you can run the web server by typing:

gradlew jettyRun

and open your browser at http://localhost:8080 in order to see the generated web editor.

That’s it! We just bootstrapped a whole Xtext project in about 60 seconds without having to use Eclipse. Note that on the first run you may encounter some additional download times. The source code for the generator can be found here.

Is this useful for you? Please leave a comment below and join the discussion!

tl;dr

So, this is the short version ;)

npm install -g yo generator-xtext
yo xtext

undefined

About The Author

Franz is an Xtext expert and full stack software engineer. He deeply cares about automatization, continuous delivery and code quality.