{"id":2677,"date":"2018-10-30T15:29:39","date_gmt":"2018-10-30T13:29:39","guid":{"rendered":"http:\/\/hasselba.ch\/blog\/?p=2677"},"modified":"2018-11-02T09:00:06","modified_gmt":"2018-11-02T07:00:06","slug":"node-js-domino-db-docker-2-dev-environment","status":"publish","type":"post","link":"https:\/\/hasselba.ch\/blog\/?p=2677","title":{"rendered":"node.js, domino-db &#038; Docker (2): Dev Environment"},"content":{"rendered":"<p>Before we can start to create a new app we first have to setup a development environment. While there are multiple IDE&#8217;s around, I have made most of my node.js development with <a href=\"https:\/\/atom.io\/\" target=\"_blank\" rel=\"noopener\">Atom<\/a> instead of an IDE like Eclipse or Visual Studio. Maybe this will change in the future, but for a better understanding, let&#8217;s start with Atom and do the required steps manually.<\/p>\n<p>By default, there is no support for ES6, so we need to make an additional installation after installing the editor:<\/p>\n<p>1. Download Atom from <a href=\"https:\/\/atom.io\/\" target=\"_blank\" rel=\"noopener\">https:\/\/atom.io\/<\/a><\/p>\n<p>2. Go to <em>Atom &gt; Preferences<\/em><\/p>\n<p>3. Install <em>linter-eslint<\/em> package<\/p>\n<p><a href=\"https:\/\/hasselba.ch\/blog\/wp-content\/uploads\/2018\/10\/atom-linter-eslint.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2678\" src=\"https:\/\/hasselba.ch\/blog\/wp-content\/uploads\/2018\/10\/atom-linter-eslint.png\" alt=\"\" width=\"1064\" height=\"505\" srcset=\"https:\/\/hasselba.ch\/blog\/wp-content\/uploads\/2018\/10\/atom-linter-eslint.png 1064w, https:\/\/hasselba.ch\/blog\/wp-content\/uploads\/2018\/10\/atom-linter-eslint-300x142.png 300w, https:\/\/hasselba.ch\/blog\/wp-content\/uploads\/2018\/10\/atom-linter-eslint-768x365.png 768w, https:\/\/hasselba.ch\/blog\/wp-content\/uploads\/2018\/10\/atom-linter-eslint-1024x486.png 1024w\" sizes=\"auto, (max-width: 1064px) 100vw, 1064px\" \/><\/a><\/p>\n<p>4. Additional packages must be installed (This happens multiple times):<\/p>\n<p><a href=\"https:\/\/hasselba.ch\/blog\/wp-content\/uploads\/2018\/10\/atom-linter-dependencies.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2679\" src=\"https:\/\/hasselba.ch\/blog\/wp-content\/uploads\/2018\/10\/atom-linter-dependencies.png\" alt=\"\" width=\"469\" height=\"177\" srcset=\"https:\/\/hasselba.ch\/blog\/wp-content\/uploads\/2018\/10\/atom-linter-dependencies.png 469w, https:\/\/hasselba.ch\/blog\/wp-content\/uploads\/2018\/10\/atom-linter-dependencies-300x113.png 300w\" sizes=\"auto, (max-width: 469px) 100vw, 469px\" \/><\/a><\/p>\n<p>5. In a console, go to the domino-express which we have <a href=\"https:\/\/hasselba.ch\/blog\/?p=2670\" target=\"_blank\" rel=\"noopener\">created before<\/a>:<\/p>\n<pre><code>cd domino-express\/<\/code><\/pre>\n<p>6. Install <em>eslint-config-rallycoding<\/em> module<\/p>\n<pre><code>npm install --save-dev eslint-config-rallycoding<\/code><\/pre>\n<p>This step has to be done for every new project. The module is required to enable the ES6 support for every project, but only during development.<\/p>\n<p>7. Create a file named\u00a0<em>.eslintrc<\/em> in the project folder and add the following content:<\/p>\n<pre><code>{\r\n   \"extends\": \"rallycoding\"\r\n}<\/code><\/pre>\n<p>8. Change the dependency for the <em>domino-db<\/em> package:<\/p>\n<pre><code>\"@domino\/domino-db\": \"file:.\/domino-domino-db-1.0.0-package\"<\/code><\/pre>\n<p>The path has to be changed because for the Docker setup it is in the <em>\/src<\/em> folder, now it is in the project root.<\/p>\n<p>9. Install the required npm modules<\/p>\n<pre><code>npm install<\/code><\/pre>\n<p>10. Restart Atom and open the project folder<\/p>\n<p>11. If everything worked correctly, you should now see an error in the <em>index.js<\/em> file (maybe you have to open the file first):<\/p>\n<p><a href=\"https:\/\/hasselba.ch\/blog\/wp-content\/uploads\/2018\/10\/atom-error.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2680\" src=\"https:\/\/hasselba.ch\/blog\/wp-content\/uploads\/2018\/10\/atom-error.png\" alt=\"\" width=\"576\" height=\"1100\" srcset=\"https:\/\/hasselba.ch\/blog\/wp-content\/uploads\/2018\/10\/atom-error.png 576w, https:\/\/hasselba.ch\/blog\/wp-content\/uploads\/2018\/10\/atom-error-157x300.png 157w, https:\/\/hasselba.ch\/blog\/wp-content\/uploads\/2018\/10\/atom-error-536x1024.png 536w\" sizes=\"auto, (max-width: 576px) 100vw, 576px\" \/><\/a><\/p>\n<p>12. When opening the file, you should see an error in the first line and an explanation about the problem:<\/p>\n<p><a href=\"https:\/\/hasselba.ch\/blog\/wp-content\/uploads\/2018\/10\/atom-error-var.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2681\" src=\"https:\/\/hasselba.ch\/blog\/wp-content\/uploads\/2018\/10\/atom-error-var.png\" alt=\"\" width=\"1928\" height=\"268\" srcset=\"https:\/\/hasselba.ch\/blog\/wp-content\/uploads\/2018\/10\/atom-error-var.png 1928w, https:\/\/hasselba.ch\/blog\/wp-content\/uploads\/2018\/10\/atom-error-var-300x42.png 300w, https:\/\/hasselba.ch\/blog\/wp-content\/uploads\/2018\/10\/atom-error-var-768x107.png 768w, https:\/\/hasselba.ch\/blog\/wp-content\/uploads\/2018\/10\/atom-error-var-1024x142.png 1024w\" sizes=\"auto, (max-width: 1928px) 100vw, 1928px\" \/><\/a><\/p>\n<p>13. Click on &#8222;Fix&#8220;, then <em>var<\/em> should change to <em>let<\/em><\/p>\n<p>14. An new problem occurs, because the variable is never changed. So the advice is to change it to <em>const<\/em>.<\/p>\n<p>15. Done. Now we are ready for developing.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Before we can start to create a new app we first have to setup a development environment. While there are multiple IDE&#8217;s around, I have made most of my node.js development with Atom instead of an IDE like Eclipse or &hellip; <a href=\"https:\/\/hasselba.ch\/blog\/?p=2677\">Weiterlesen <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[139,9,131],"tags":[136,7,140,132],"class_list":["post-2677","post","type-post","status-publish","format-standard","hentry","category-es6","category-javascript","category-node-js","tag-atom","tag-domino","tag-es6","tag-node-js"],"_links":{"self":[{"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=\/wp\/v2\/posts\/2677","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2677"}],"version-history":[{"count":5,"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=\/wp\/v2\/posts\/2677\/revisions"}],"predecessor-version":[{"id":2702,"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=\/wp\/v2\/posts\/2677\/revisions\/2702"}],"wp:attachment":[{"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2677"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2677"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2677"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}