/*@jsxRuntime automatic @jsxImportSource react*/
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
function _createMdxContent(props) {
  const _components = Object.assign({
    p: "p",
    a: "a",
    h2: "h2",
    h3: "h3",
    pre: "pre",
    code: "code",
    span: "span",
    em: "em",
    img: "img",
    ul: "ul",
    li: "li"
  }, props.components), {Link, Gist} = _components;
  if (!Gist) _missingMdxReference("Gist", true);
  if (!Link) _missingMdxReference("Link", true);
  return _jsxs(_Fragment, {
    children: [_jsxs(_components.p, {
      children: ["In this ar­ti­cle, I would like to share why Vert.x is not only a ro­bust foun­da­tion for the ", _jsx(_components.a, {
        href: "http://getmesh.io/",
        children: "head­less Con­tent Man­age­ment Sys­tem Gen­tics Mesh"
      }), " but also how the re­cent re­lease 3.4.0 can be used to build a template-​based web server with Gen­tics Mesh and han­dle­bars."]
    }), "\n", _jsx(_components.p, {
      children: "A head­less CMS fo­cuses on de­liv­er­ing your con­tent through an API and al­lows ed­i­tors cre­at­ing and man­ag­ing that data through a web-​based in­ter­face. Un­like a tra­di­tional CMS, it does not pro­vide a specif­i­cally ren­dered out­put. The fron­tend part (the head) is lit­er­ally cut off, al­low­ing de­vel­op­ers cre­ate web­sites, apps, or any other data-​driven projects with their favourite tech­nolo­gies."
    }), "\n", _jsxs(_components.p, {
      children: [_jsx(Link, {
        href: "/blog/vert-x-3-4-0-is-released/",
        passHref: true,
        children: _jsx(_components.a, {
          href: "",
          children: "Vert.x 3.4.0"
        })
      }), " has just been re­leased and it comes with a bunch of new fea­tures and bug fixes. I am es­pe­cially ex­cited about a small en­hance­ment that changes the way in which the han­dle­bars tem­plate en­gine han­dle their con­text data. Pre­vi­ously it was not pos­si­ble to re­solve Vert.x ‘s JsonOb­jects within the ren­der con­text. With my en­hance­ment ", _jsx(_components.a, {
        href: "https://github.com/vert-x3/vertx-web/pull/509",
        children: "#509"
      }), " - re­leased in Vert.x 3.4.0 - it is now pos­si­ble to ac­cess nested data from these ob­jects within your tem­plates. Pre­vi­ously this would have re­quired flat­ten­ing out each ob­ject and re­solv­ing it in­di­vid­u­ally, which would have been very cum­ber­some."]
    }), "\n", _jsx(_components.p, {
      children: "I’m going to demon­strate this en­hance­ment by show­ing how to build a prod­uct cat­a­logue using Vert.x to­gether with han­dle­bars tem­plates to ren­der and serve the web pages. The prod­uct data is man­aged, stored and de­liv­ered by the CMS server as source for JSON data."
    }), "\n", _jsxs(_components.h2, {
      id: "clone-import-download-start---set-up-your-product-catalogue-website-quickly",
      children: [_jsx(_components.a, {
        "aria-hidden": true,
        tabIndex: "-1",
        className: "heading-anchor",
        href: "#clone-import-download-start---set-up-your-product-catalogue-website-quickly"
      }), "Clone, Import, Download, Start - Set up your product catalogue website quickly"]
    }), "\n", _jsx(_components.p, {
      children: "Let’s quickly set up every­thing you need to run the web­site be­fore I walk you through the code."
    }), "\n", _jsxs(_components.h3, {
      id: "1--clone---get-the-full-vertx-with-gentics-mesh-example-from-github",
      children: [_jsx(_components.a, {
        "aria-hidden": true,
        tabIndex: "-1",
        className: "heading-anchor",
        href: "#1--clone---get-the-full-vertx-with-gentics-mesh-example-from-github"
      }), "1.  Clone - ", _jsx(_components.a, {
        href: "https://github.com/gentics/mesh-vertx-example",
        children: "Get the full Vert.x with Gentics Mesh example from Github"
      })]
    }), "\n", _jsx(_components.p, {
      children: "Fire up your ter­mi­nal and clone the ex­am­ple ap­pli­ca­tion to the di­rec­tory of your choice."
    }), "\n", _jsx(_components.pre, {
      children: _jsxs(_components.code, {
        className: "hljs language-bash",
        children: ["git ", _jsx(_components.span, {
          className: "hljs-built_in",
          children: "clone"
        }), " git@github.com:gentics/mesh-vertx-example.git\n"]
      })
    }), "\n", _jsxs(_components.h3, {
      id: "2-import---the-maven-project-in-your-favourite-ide",
      children: [_jsx(_components.a, {
        "aria-hidden": true,
        tabIndex: "-1",
        className: "heading-anchor",
        href: "#2-import---the-maven-project-in-your-favourite-ide"
      }), "2. Import - The maven project in your favourite IDE"]
    }), "\n", _jsx(_components.p, {
      children: "The ap­pli­ca­tion is set up as a maven project and can be im­ported in Eclipse IDE via File → Im­port → Ex­ist­ing Maven Project"
    }), "\n", _jsxs(_components.h3, {
      id: "3-download---get-the-headless-cms-gentics-mesh",
      children: [_jsx(_components.a, {
        "aria-hidden": true,
        tabIndex: "-1",
        className: "heading-anchor",
        href: "#3-download---get-the-headless-cms-gentics-mesh"
      }), "3. Download  -  Get the headless CMS Gentics Mesh"]
    }), "\n", _jsxs(_components.p, {
      children: [_jsx(_components.a, {
        href: "http://getmesh.io/Download",
        children: "Down­load the lat­est ver­sion of Gen­tics Mesh"
      }), " and start the CMS with this one-​liner"]
    }), "\n", _jsx(_components.pre, {
      children: _jsx(_components.code, {
        className: "hljs language-bash",
        children: "java -jar mesh-demo-0.6.xx.jar\n"
      })
    }), "\n", _jsxs(_components.p, {
      children: ["For the cur­rent ex­am­ple we are going to use the read-​only user cre­den­tials (", _jsx(_components.em, {
        children: "we­b­client:we­b­client"
      }), ").\nIf you want to play around with the demo data you can point your browser to ", _jsx(_components.a, {
        href: "http://localhost:8080/mesh-ui/",
        children: "http://lo­cal­host:8080/mesh-​ui/"
      }), " to reach the Gen­tics Mesh user in­ter­face and use one of the ", _jsx(_components.a, {
        href: "http://getmesh.io/docs/beta/getting-started.html#_startup",
        children: "avail­able demo cre­den­tials"
      }), " to login."]
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.img, {
        src: "/images/blog/vertx-mesh/mesh-ui.jpg",
        alt: "Gentics Mesh User Interface"
      })
    }), "\n", _jsxs(_components.h3, {
      id: "4-start---the-application-and-browse-the-product-catalogue",
      children: [_jsx(_components.a, {
        "aria-hidden": true,
        tabIndex: "-1",
        className: "heading-anchor",
        href: "#4-start---the-application-and-browse-the-product-catalogue"
      }), "4. Start - The application and browse the product catalogue"]
    }), "\n", _jsx(_components.p, {
      children: "You can start the Vert.x web server by run­ning Server.java."
    }), "\n", _jsxs(_components.p, {
      children: ["That’s it - now you can ac­cess the prod­uct cat­a­logue web­site in your browser: ", _jsx(_components.a, {
        href: "http://localhost:3000",
        children: "http://lo­cal­host:3000"
      })]
    }), "\n", _jsxs(_components.h2, {
      id: "why-vertx-is-a-good-fit-for-gentics-mesh",
      children: [_jsx(_components.a, {
        "aria-hidden": true,
        tabIndex: "-1",
        className: "heading-anchor",
        href: "#why-vertx-is-a-good-fit-for-gentics-mesh"
      }), "Why Vert.x is a good fit for Gentics Mesh"]
    }), "\n", _jsxs(_components.p, {
      children: ["Be­fore dig­ging into the ex­am­ple, let me share a few thoughts on Vert.x and Gen­tics Mesh in com­bi­na­tion. In this ex­am­ple Vert.x is part of the fron­tend stack in de­liv­er­ing the prod­uct cat­a­logue web­site. But it might also be of in­ter­est to you that Vert.x is also used at the very heart of Gen­tics Mesh it­self. The Gen­tics Mesh ", _jsx(_components.a, {
        href: "http://getmesh.io/docs/beta/raml/",
        children: "REST API end­points"
      }), " are built on top of Vert.x as a core com­po­nent."]
    }), "\n", _jsx(_components.p, {
      children: "The great thing about Vert.x is that there are a lot of de­fault im­ple­men­ta­tions for var­i­ous tasks such as au­then­ti­ca­tion, data­base in­te­gra­tion, mon­i­tor­ing and clus­ter­ing. It is pos­si­ble to use one or more fea­tures and omit the rest and thus your ap­pli­ca­tion re­mains light­weight."
    }), "\n", _jsxs(_components.h2, {
      id: "curious-about-the-code",
      children: [_jsx(_components.a, {
        "aria-hidden": true,
        tabIndex: "-1",
        className: "heading-anchor",
        href: "#curious-about-the-code"
      }), "Curious about the code?"]
    }), "\n", _jsxs(_components.p, {
      children: ["Source: ", _jsx(_components.a, {
        href: "https://github.com/gentics/mesh-vertx-example",
        children: "https://github.com/gen­tics/mesh-​vertx-example"
      })]
    }), "\n", _jsx(_components.p, {
      children: "Now that every­thing is up and run­ning let’s have a de­tailed look at the code."
    }), "\n", _jsxs(_components.p, {
      children: ["A typ­i­cal de­ploy­ment unit for Vert.x is a ", _jsx(Link, {
        href: "/docs/vertx-core/java/#_verticles",
        passHref: true,
        children: _jsx(_components.a, {
          href: "",
          children: "ver­ti­cle"
        })
      }), ". In our case we use the ver­ti­cle to bun­dle our code and run the web server within it. Once de­ployed, Vert.x will run the ver­ti­cle and start the HTTP server code."]
    }), "\n", _jsx(Gist, {
      url: "https://gist.github.com/Jotschi/39fc0d3fcd45122eafe68d61bea4c120",
      file: "main.java"
    }), "\n", _jsxs(_components.p, {
      children: ["The ", _jsx(_components.a, {
        href: "http://getmesh.io/docs/beta/#_java_rest_client",
        children: "Gen­tics Mesh REST client"
      }), " is used to com­mu­ni­cate with the Gen­tics Mesh server. The ", _jsx(Link, {
        href: "/docs/vertx-web/java/",
        passHref: true,
        children: _jsx(_components.a, {
          href: "",
          children: "Vert.x web li­brary"
        })
      }), " is used to set up our ", _jsx(Link, {
        href: "/docs/vertx-web/java/#_basic_vert_x_web_concepts",
        passHref: true,
        children: _jsx(_components.a, {
          href: "",
          children: "HTTP Router"
        })
      }), ". As with other rout­ing frame­works like ", _jsx(_components.em, {
        children: "Silex"
      }), " and ", _jsx(_components.em, {
        children: "Ex­press"
      }), ", the router can be used to cre­ate routes for in­bound HTTP re­quests. In our case we only need two routes. The main route which ac­cepts the re­quest will uti­lize the ", _jsx(_components.a, {
        href: "http://getmesh.io/docs/beta/#_webroot",
        children: "Gen­tics Mesh We­b­root API End­point"
      }), " which is able to re­solve con­tent by a pro­vided path. It will ex­am­ine the re­sponse and add fields to the rout­ing con­text."]
    }), "\n", _jsxs(_components.p, {
      children: ["The other route is chained and will take the pre­vi­ously pre­pared rout­ing con­text and ren­der the de­sired tem­plate using the ", _jsx(Link, {
        href: "/docs/vertx-web/java/#_templates",
        passHref: true,
        children: _jsx(_components.a, {
          href: "",
          children: "han­dle­bars tem­plate han­dler"
        })
      }), "."]
    }), "\n", _jsx(Gist, {
      url: "https://gist.github.com/Jotschi/39fc0d3fcd45122eafe68d61bea4c120",
      file: "start.java"
    }), "\n", _jsx(_components.p, {
      children: "First we can han­dle var­i­ous spe­cial re­quests path such as ”/” for the wel­come page. Or the typ­i­cal fav­i­con.ico re­quest. Other re­quests are passed to the We­b­root API han­dler method."
    }), "\n", _jsx(Gist, {
      url: "https://gist.github.com/Jotschi/39fc0d3fcd45122eafe68d61bea4c120",
      file: "pathHandler.java"
    }), "\n", _jsxs(_components.p, {
      children: ["Once the path has been re­solved to a ", _jsx(_components.em, {
        children: "We­b­RootRe­sponse"
      }), " we can ex­am­ine that data and de­ter­mine whether it is a bi­nary re­sponse or a JSON re­sponse. Bi­nary re­sponses may occur if the re­quested re­source rep­re­sents an image or any other bi­nary data. Re­solved bi­nary con­tents are di­rectly passed through to the client and the han­dle­bars route is not in­voked."]
    }), "\n", _jsx(_components.p, {
      children: "Ex­am­ples"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsxs(_components.li, {
        children: [_jsx(_components.a, {
          href: "http://localhost:3000/",
          children: "http://lo­cal­host:3000/"
        }), " → wel­come.hbs"]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.a, {
          href: "http://localhost:3000/Automobiles",
          children: "http://lo­cal­host:3000/Au­to­mo­biles"
        }), " → cat­e­gory → pro­ductList.hbs"]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.a, {
          href: "http://localhost:3000/Automobiles/Tesla%20Roadster",
          children: "http://lo­cal­host:3000/Au­to­mo­biles/Tesla Road­ster"
        }), " → ve­hi­cle → pro­duct­De­tail.hbs"]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.a, {
          href: "http://localhost:3000/Vehicle%20Images/tesla-roadster.jpg",
          children: "http://lo­cal­host:3000/Ve­hi­cle Im­ages/tesla-​roadster.jpg"
        }), " → bi­nary passthru"]
      }), "\n"]
    }), "\n", _jsx(_components.p, {
      children: "JSON re­sponses on the other hand are ex­am­ined to de­ter­mine the type of node which was lo­cated. A typ­i­cal node re­sponse con­tains in­for­ma­tion about the schema used by the node. This will ef­fec­tively de­ter­mine the type of the lo­cated con­tent (e.g.: cat­e­gory, ve­hi­cle)."
    }), "\n", _jsx(Gist, {
      url: "https://gist.github.com/Jotschi/39fc0d3fcd45122eafe68d61bea4c120",
      file: "routeHandler.java"
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.img, {
        src: "/images/blog/vertx-mesh/mesh-schemas.jpg",
        alt: "Mesh Schemas"
      })
    }), "\n", _jsxs(_components.p, {
      children: ["The demo ap­pli­ca­tion serves dif­fer­ent pages which cor­re­spond to the iden­ti­fied type.\nTake a look at the tem­plate sources within ", _jsx(_components.em, {
        children: "src/main/re­sources/tem­plates/"
      }), " if you are in­ter­ested in the ", _jsx(_components.a, {
        href: "http://handlebarsjs.com/",
        children: "han­dle­bars syn­tax"
      }), ".\nThe tem­plates in the ex­am­ple should cover most com­mon cases."]
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.img, {
        src: "/images/blog/vertx-mesh/mesh-vertx-templates.jpg",
        alt: "Handlebars Template Overview"
      })
    }), "\n", _jsxs(_components.p, {
      children: ["The Mesh REST Client li­brary in­ter­nally makes use of the ", _jsx(Link, {
        href: "/docs/vertx-core/java/#_creating_an_http_client",
        passHref: true,
        children: _jsx(_components.a, {
          href: "",
          children: "Vert.x core HTTP client"
        })
      }), "."]
    }), "\n", _jsxs(_components.p, {
      children: [_jsx(_components.a, {
        href: "https://github.com/ReactiveX/RxJava",
        children: "Rx­Java"
      }), " is being used to han­dle these async re­quests. This way we can com­bine all asyn­chro­nously re­quested Gen­tics Mesh re­sources (bread­crumb, list of prod­ucts) and add the loaded data into the rout­ing con­text."]
    }), "\n", _jsxs(_components.p, {
      children: ["The Vert.x ex­am­ple server loads JSON con­tent from the Gen­tics Mesh server. The ", _jsx(_components.em, {
        children: "JsonOb­ject"
      }), " is placed in the ", _jsx(_components.a, {
        href: "https://github.com/jknack/handlebars.java",
        children: "han­dle­bars"
      }), " ren­der con­text and the tem­plate can ac­cess all nested fields within."]
    }), "\n", _jsx(_components.p, {
      children: "This way it is pos­si­ble to re­solve any field within the han­dle­bars tem­plate."
    }), "\n", _jsx(Gist, {
      url: "https://gist.github.com/Jotschi/39fc0d3fcd45122eafe68d61bea4c120",
      file: "template.example"
    }), "\n", _jsxs(_components.p, {
      children: ["That’s it! Fi­nally, we can in­voke mvn clean pack­age in order to pack­age our web­server. The ", _jsx(_components.a, {
        href: "https://maven.apache.org/plugins/maven-shade-plugin/",
        children: "maven-​shade-plugin"
      }), " will bun­dle every­thing and cre­ate an ex­e­cutable jar."]
    }), "\n", _jsxs(_components.h2, {
      id: "whats-next",
      children: [_jsx(_components.a, {
        "aria-hidden": true,
        tabIndex: "-1",
        className: "heading-anchor",
        href: "#whats-next"
      }), "What’s next?"]
    }), "\n", _jsxs(_components.p, {
      children: ["Fu­ture re­leases of Gen­tics Mesh will re­fine the Mesh REST Client API and pro­vide a ", _jsx(_components.a, {
        href: "http://graphql.org/",
        children: "GraphQL"
      }), " which will re­duce the JSON over­head. Using GraphQL will also re­duce the amount of re­quests which need to be is­sued."]
    }), "\n", _jsxs(_components.p, {
      children: ["Thanks for read­ing. If you have any futher ques­tions or feed­back don’t hes­i­tate to send me a tweet to ", _jsx(_components.a, {
        href: "https://twitter.com/Jotschi/",
        children: "@Jotschi"
      }), " or ", _jsx(_components.a, {
        href: "https://twitter.com/genticsmesh/",
        children: "@gen­tic­smesh"
      }), "."]
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
    children: _jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}
return {
  default: MDXContent
};
function _missingMdxReference(id, component) {
  throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it.");
}


Blog

Data-driven Apps made easy with Vert.x 3.4.0 and headless CMS Gentics Mesh

Next post

Scala is here

Previous post

Vert.x 3.4.0 is released!

Blog

Data-driven Apps made easy with Vert.x 3.4.0 and headless CMS Gentics Mesh

Next post

Scala is here

Previous post

Vert.x 3.4.0 is released!

Related posts

Things to keep in mind concerning CSRF attacks

Real-time bidding with Websockets and Vert.x

An Introduction to the Vert.x Context Object