/*@jsxRuntime automatic @jsxImportSource react*/
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
function _createMdxContent(props) {
  const _components = Object.assign({
    p: "p",
    code: "code",
    h2: "h2",
    a: "a",
    pre: "pre",
    span: "span",
    ul: "ul",
    li: "li"
  }, props.components), {Link} = _components;
  if (!Link) _missingMdxReference("Link", true);
  return _jsxs(_Fragment, {
    children: [_jsxs(_components.p, {
      children: ["In pro­gram­ming lit­er­a­ture it has be­come the stan­dard to cre­ate a hello world pro­gram as the first ex­am­ple. In this\nar­ti­cle, I’ll be demon­strat­ing how ", _jsx(_components.code, {
        children: "NPM"
      }), " users can quickly get started with ", _jsx(_components.code, {
        children: "vert.x"
      }), ". You will see that it is not\nthat dif­fer­ent and in fact it can be done using the tools you’re used to. Note that al­though we are using ", _jsx(_components.code, {
        children: "NPM"
      }), " we are\nnot re­ly­ing on ", _jsx(_components.code, {
        children: "node.js"
      }), ", all ", _jsx(_components.code, {
        children: "javascript"
      }), " code runs on the ", _jsx(_components.code, {
        children: "JVM"
      }), "."]
    }), "\n", _jsxs(_components.h2, {
      id: "hello-world-examples",
      children: [_jsx(_components.a, {
        "aria-hidden": true,
        tabIndex: "-1",
        className: "heading-anchor",
        href: "#hello-world-examples"
      }), "Hello World Examples"]
    }), "\n", _jsx(_components.p, {
      children: "Here are four sim­ple hello world ex­am­ples. The com­ments in the code ex­plain how the code works and the text around it\nex­plain what it does and how to test it."
    }), "\n", _jsxs(_components.h2, {
      id: "hello-console",
      children: [_jsx(_components.a, {
        "aria-hidden": true,
        tabIndex: "-1",
        className: "heading-anchor",
        href: "#hello-console"
      }), "Hello Console"]
    }), "\n", _jsxs(_components.p, {
      children: ["This ex­am­ple is about as plain as it can get. It prints the words ”", _jsx(_components.code, {
        children: "Hello World"
      }), "” to the ter­mi­nal. If you’re a\njavascript de­vel­oper you should be al­ready used to ", _jsx(_components.code, {
        children: "npm"
      }), " and know that you al­ways start a project with the file\n", _jsx(_components.code, {
        children: "package.json"
      }), ":"]
    }), "\n", _jsx(_components.pre, {
      children: _jsxs(_components.code, {
        className: "hljs language-javascript",
        children: ["{\n  ", _jsx(_components.span, {
          className: "hljs-string",
          children: "\"name\""
        }), ": ", _jsx(_components.span, {
          className: "hljs-string",
          children: "\"vertx3-hello-console\""
        }), ",\n  ", _jsx(_components.span, {
          className: "hljs-string",
          children: "\"private\""
        }), ": ", _jsx(_components.span, {
          className: "hljs-literal",
          children: "true"
        }), ",\n  ", _jsx(_components.span, {
          className: "hljs-string",
          children: "\"dependencies\""
        }), ": {\n    ", _jsx(_components.span, {
          className: "hljs-string",
          children: "\"vertx3-min\""
        }), ": ", _jsx(_components.span, {
          className: "hljs-string",
          children: "\"3.0.0-1\""
        }), "\n  },\n  ", _jsx(_components.span, {
          className: "hljs-string",
          children: "\"scripts\""
        }), ": {\n    ", _jsx(_components.span, {
          className: "hljs-string",
          children: "\"start\""
        }), ": ", _jsx(_components.span, {
          className: "hljs-string",
          children: "\"./node_modules/.bin/vertx run server.js\""
        }), "\n  }\n}\n"]
      })
    }), "\n", _jsxs(_components.p, {
      children: ["Note that we have a de­pen­dency wich is ob­vi­ous ", _jsx(_components.code, {
        children: "vert.x"
      }), " now note that there are 3 flavours of this de­pen­dency:"]
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsx(_components.li, {
        children: _jsx(_components.a, {
          href: "https://www.npmjs.com/package/vertx3-min",
          children: "min"
        })
      }), "\n", _jsx(_components.li, {
        children: _jsx(_components.a, {
          href: "https://www.npmjs.com/package/vertx3-base",
          children: "base"
        })
      }), "\n", _jsx(_components.li, {
        children: _jsx(_components.a, {
          href: "https://www.npmjs.com/package/vertx3-full",
          children: "full"
        })
      }), "\n"]
    }), "\n", _jsx(_components.p, {
      children: "Ac­cord­ing to your needs you can pick a dif­fer­ent flavour, since for a sim­ple hello world we only need the min­i­mal that\nis the one we add to the de­pen­dency prop­erty."
    }), "\n", _jsxs(_components.p, {
      children: ["Now we need to do a sim­ple hello app, we will call this file ”", _jsx(_components.code, {
        children: "server.js"
      }), "“:"]
    }), "\n", _jsx(_components.pre, {
      children: _jsxs(_components.code, {
        className: "hljs language-javascript",
        children: [_jsx(_components.span, {
          className: "hljs-comment",
          children: "// Call the console.log function."
        }), "\n", _jsx(_components.span, {
          className: "hljs-variable language_",
          children: "console"
        }), ".", _jsx(_components.span, {
          className: "hljs-title function_",
          children: "log"
        }), "(", _jsx(_components.span, {
          className: "hljs-string",
          children: "\"Hello World\""
        }), ");\n"]
      })
    }), "\n", _jsx(_components.p, {
      children: "You can run this by ex­e­cut­ing:"
    }), "\n", _jsx(_components.pre, {
      children: _jsx(_components.code, {
        className: "hljs language-bash",
        children: "npm install\nnpm start\n"
      })
    }), "\n", _jsx(_components.p, {
      children: "The first com­mand re­trieve the vert.x stack while the sec­onds starts your pro­gram."
    }), "\n", _jsxs(_components.h2, {
      id: "hello-http",
      children: [_jsx(_components.a, {
        "aria-hidden": true,
        tabIndex: "-1",
        className: "heading-anchor",
        href: "#hello-http"
      }), "Hello HTTP"]
    }), "\n", _jsxs(_components.p, {
      children: ["I’d guess that while it’s not the only use case for ", _jsx(_components.code, {
        children: "vert.x"
      }), ", most peo­ple are using it as a web ap­pli­ca­tion plat­form. So\nthe next ex­am­ple will be a sim­ple HTTP server that re­sponds to every re­quest with the plain text mes­sage ”", _jsx(_components.code, {
        children: "Hello World"
      }), "”\n", _jsx(_components.code, {
        children: "server.js"
      }), ":"]
    }), "\n", _jsx(_components.pre, {
      children: _jsxs(_components.code, {
        className: "hljs language-javascript",
        children: ["vertx.", _jsx(_components.span, {
          className: "hljs-title function_",
          children: "createHttpServer"
        }), "()\n  .", _jsx(_components.span, {
          className: "hljs-title function_",
          children: "requestHandler"
        }), "(", _jsx(_components.span, {
          className: "hljs-keyword",
          children: "function"
        }), " (", _jsx(_components.span, {
          className: "hljs-params",
          children: "req"
        }), ") {\n    req.", _jsx(_components.span, {
          className: "hljs-title function_",
          children: "response"
        }), "()\n      .", _jsx(_components.span, {
          className: "hljs-title function_",
          children: "putHeader"
        }), "(", _jsx(_components.span, {
          className: "hljs-string",
          children: "\"content-type\""
        }), ", ", _jsx(_components.span, {
          className: "hljs-string",
          children: "\"text/plain\""
        }), ")\n      .", _jsx(_components.span, {
          className: "hljs-title function_",
          children: "end"
        }), "(", _jsx(_components.span, {
          className: "hljs-string",
          children: "\"Hello World!\""
        }), ");\n}).", _jsx(_components.span, {
          className: "hljs-title function_",
          children: "listen"
        }), "(", _jsx(_components.span, {
          className: "hljs-number",
          children: "8080"
        }), ");\n"]
      })
    }), "\n", _jsxs(_components.p, {
      children: ["Now you can reuse the same ", _jsx(_components.code, {
        children: "package.json"
      }), " we’ve just de­fined in the pre­vi­ous sec­tion and start the server with\n", _jsx(_components.code, {
        children: "npm start"
      }), ". Once the server starts you can open a browser to ", _jsx(_components.code, {
        children: "http://localhost:8080"
      }), " and enjoy the mes­sage."]
    }), "\n", _jsxs(_components.h2, {
      id: "hello-tcp",
      children: [_jsx(_components.a, {
        "aria-hidden": true,
        tabIndex: "-1",
        className: "heading-anchor",
        href: "#hello-tcp"
      }), "Hello TCP"]
    }), "\n", _jsxs(_components.p, {
      children: [_jsx(_components.code, {
        children: "Vert.x"
      }), " also makes an ex­cel­lent TCP server, and here is an ex­am­ple that re­sponds to all TCP con­nec­tions with the\nmes­sage “Hello World” and then closes the con­nec­tion ", _jsx(_components.code, {
        children: "server.js"
      }), ":"]
    }), "\n", _jsx(_components.pre, {
      children: _jsxs(_components.code, {
        className: "hljs language-javascript",
        children: [_jsx(_components.span, {
          className: "hljs-keyword",
          children: "var"
        }), " server = vertx.", _jsx(_components.span, {
          className: "hljs-title function_",
          children: "createNetServer"
        }), "();\nserver.", _jsx(_components.span, {
          className: "hljs-title function_",
          children: "connectHandler"
        }), "(", _jsx(_components.span, {
          className: "hljs-keyword",
          children: "function"
        }), " (", _jsx(_components.span, {
          className: "hljs-params",
          children: "socket"
        }), ") {\n  socket.", _jsx(_components.span, {
          className: "hljs-title function_",
          children: "write"
        }), "(", _jsx(_components.span, {
          className: "hljs-string",
          children: "\"Hello World!\\n\""
        }), ");\n  socket.", _jsx(_components.span, {
          className: "hljs-title function_",
          children: "close"
        }), "();\n});\n\nserver.", _jsx(_components.span, {
          className: "hljs-title function_",
          children: "listen"
        }), "(", _jsx(_components.span, {
          className: "hljs-number",
          children: "7000"
        }), ", ", _jsx(_components.span, {
          className: "hljs-string",
          children: "\"localhost\""
        }), ");\n"]
      })
    }), "\n", _jsxs(_components.p, {
      children: ["Again reuse the pre­vi­ous ", _jsx(_components.code, {
        children: "package.json"
      }), " and test it by doing ", _jsx(_components.code, {
        children: "telnet localhost 7000"
      }), "."]
    }), "\n", _jsxs(_components.h2, {
      id: "hello-web",
      children: [_jsx(_components.a, {
        "aria-hidden": true,
        tabIndex: "-1",
        className: "heading-anchor",
        href: "#hello-web"
      }), "Hello Web"]
    }), "\n", _jsxs(_components.p, {
      children: ["Often you won’t be using ", _jsx(_components.code, {
        children: "vert.x"
      }), " built-​in li­braries be­cause they are de­signed to be very low level. This makes ", _jsx(_components.code, {
        children: "vert.x"
      }), "\nquick, nim­ble, and easy to main­tain, but if you are plan­ning to build a com­plex ap­pli­ca­tion you want some pro­duc­tiv­ity\nand rely on a sim­ple web frame­work. For this spe­cific case there is ", _jsx(_components.code, {
        children: "vert.x web"
      }), ",\n", _jsx(Link, {
        href: "/docs/#web",
        passHref: true,
        children: _jsx(_components.a, {
          href: "",
          children: "a sim­ple, yet pro­duc­tive frame­work"
        })
      }), ", to build fast web ap­pli­ca­tion with rout­ing, tem­plate\nren­der­ing, lots of mid­dle­ware etc…usu­ally not enough to get started on a real world ap­pli­ca­tion. This ex­am­ple shows an\nHTTP server that re­sponds with “Hello World” to all re­quests to ”/” and re­sponds with a 404 error to every­thing else\n", _jsx(_components.code, {
        children: "server.js"
      }), ":"]
    }), "\n", _jsx(_components.pre, {
      children: _jsxs(_components.code, {
        className: "hljs language-javascript",
        children: [_jsx(_components.span, {
          className: "hljs-keyword",
          children: "var"
        }), " ", _jsx(_components.span, {
          className: "hljs-title class_",
          children: "Router"
        }), " = ", _jsx(_components.span, {
          className: "hljs-built_in",
          children: "require"
        }), "(", _jsx(_components.span, {
          className: "hljs-string",
          children: "\"vertx-web-js/router\""
        }), ");\n", _jsx(_components.span, {
          className: "hljs-keyword",
          children: "var"
        }), " server = vertx.", _jsx(_components.span, {
          className: "hljs-title function_",
          children: "createHttpServer"
        }), "();\n\n", _jsx(_components.span, {
          className: "hljs-keyword",
          children: "var"
        }), " router = ", _jsx(_components.span, {
          className: "hljs-title class_",
          children: "Router"
        }), ".", _jsx(_components.span, {
          className: "hljs-title function_",
          children: "router"
        }), "(vertx);\n\nrouter.", _jsx(_components.span, {
          className: "hljs-title function_",
          children: "get"
        }), "(", _jsx(_components.span, {
          className: "hljs-string",
          children: "\"/\""
        }), ").", _jsx(_components.span, {
          className: "hljs-title function_",
          children: "handler"
        }), "(", _jsx(_components.span, {
          className: "hljs-keyword",
          children: "function"
        }), " (", _jsx(_components.span, {
          className: "hljs-params",
          children: "ctx"
        }), ") {\n  ", _jsx(_components.span, {
          className: "hljs-comment",
          children: "// This handler will be called for \"/\" requests"
        }), "\n  ", _jsx(_components.span, {
          className: "hljs-keyword",
          children: "var"
        }), " response = ctx.", _jsx(_components.span, {
          className: "hljs-title function_",
          children: "response"
        }), "();\n  response.", _jsx(_components.span, {
          className: "hljs-title function_",
          children: "putHeader"
        }), "(", _jsx(_components.span, {
          className: "hljs-string",
          children: "\"content-type\""
        }), ", ", _jsx(_components.span, {
          className: "hljs-string",
          children: "\"text/plain\""
        }), ");\n\n  ", _jsx(_components.span, {
          className: "hljs-comment",
          children: "// Write to the response and end it"
        }), "\n  response.", _jsx(_components.span, {
          className: "hljs-title function_",
          children: "end"
        }), "(", _jsx(_components.span, {
          className: "hljs-string",
          children: "\"Hello World!\""
        }), ");\n});\n\nserver.", _jsx(_components.span, {
          className: "hljs-title function_",
          children: "requestHandler"
        }), "(router.", _jsx(_components.span, {
          className: "hljs-property",
          children: "accept"
        }), ").", _jsx(_components.span, {
          className: "hljs-title function_",
          children: "listen"
        }), "(", _jsx(_components.span, {
          className: "hljs-number",
          children: "8080"
        }), ");\n"]
      })
    }), "\n", _jsxs(_components.p, {
      children: ["In order to test this, you will need to in­stall the ", _jsx(_components.code, {
        children: "vertx3-full"
      }), " stack. There are two ways to do this. You can ei­ther\nin­stall it glob­ally ", _jsx(_components.code, {
        children: "npm install -g vertx3-full"
      }), " or add it as a de­pen­dency to our ", _jsx(_components.code, {
        children: "package.json"
      }), " as we have done be­fore,\nfor ex­am­ple ", _jsx(_components.code, {
        children: "package.json"
      }), ":"]
    }), "\n", _jsx(_components.pre, {
      children: _jsxs(_components.code, {
        className: "hljs language-javascript",
        children: ["{\n  ", _jsx(_components.span, {
          className: "hljs-string",
          children: "\"name\""
        }), ": ", _jsx(_components.span, {
          className: "hljs-string",
          children: "\"vertx3-hello-web\""
        }), ",\n  ", _jsx(_components.span, {
          className: "hljs-string",
          children: "\"private\""
        }), ": ", _jsx(_components.span, {
          className: "hljs-literal",
          children: "true"
        }), ",\n  ", _jsx(_components.span, {
          className: "hljs-string",
          children: "\"dependencies\""
        }), ": {\n    ", _jsx(_components.span, {
          className: "hljs-string",
          children: "\"vertx3-full\""
        }), ": ", _jsx(_components.span, {
          className: "hljs-string",
          children: "\"3.0.0-1\""
        }), "\n  },\n  ", _jsx(_components.span, {
          className: "hljs-string",
          children: "\"scripts\""
        }), ": {\n    ", _jsx(_components.span, {
          className: "hljs-string",
          children: "\"start\""
        }), ": ", _jsx(_components.span, {
          className: "hljs-string",
          children: "\"./node_modules/.bin/vertx run server.js\""
        }), "\n  }\n}\n"]
      })
    }), "\n", _jsxs(_components.p, {
      children: ["That’s it for now. Hope­fully this will help you get started work­ing with ", _jsx(_components.code, {
        children: "vert.x"
      }), "!"]
    })]
  });
}
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

Vert.x 3 says “hello” to NPM users

Next post

My first Vert.x 3 Application

Previous post

Checklist for Migrating from Vert.x 2.1.x to Vert.x 3 - Part One

Blog

Vert.x 3 says “hello” to NPM users

Next post

My first Vert.x 3 Application

Previous post

Checklist for Migrating from Vert.x 2.1.x to Vert.x 3 - Part One

Related posts

Unit and Integration Tests

Things to keep in mind concerning CSRF attacks

Checklist for Migrating from Vert.x 2.1.x to Vert.x 3 - Part One