structure.html
1 <!DOCTYPE html> 2 <html lang="en" dir="ltr"> 3 <head prefix="og: http://ogp.me/ns#"> 4 <meta charset="utf-8"> 5 <title>Application Structure | Embark</title> 6 <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> 7 <meta name="viewport" content="width=device-width, initial-scale=1"> 8 <!-- Canonical links --> 9 <link rel="canonical" href="https://framework.embarklabs.io/docs/structure.html"> 10 <!-- Alternative links --> 11 12 13 <!-- Icon --> 14 <meta name="msapplication-TileColor" content="#080E1A"> 15 <link rel="icon" type="image/png" href="/assets/images/favicon-16.png" sizes="16x16" /> 16 <link rel="icon" type="image/png" href="/assets/images/favicon-32.png" sizes="32x32" /> 17 18 <link rel="apple-touch-icon" sizes="76x76" href="/assets/images/apple-touch-icon-60x60-precomposed.png"> 19 <link rel="apple-touch-icon" sizes="76x76" href="/assets/images/apple-touch-icon-76x76-precomposed.png"> 20 <link rel="apple-touch-icon" sizes="120x120" href="/assets/images/apple-touch-icon-120x120-precomposed.png"> 21 <link rel="apple-touch-icon" sizes="152x152" href="/assets/images/apple-touch-icon-152x152-precomposed.png"> 22 <link rel="apple-touch-icon" sizes="180x180" href="/assets/images/apple-touch-icon-precomposed.png"> 23 <link rel="apple-touch-icon" href="/assets/images/apple-touch-icon-precomposed.png"> 24 <!-- CSS --> 25 26 <link rel="stylesheet" href="/css/embark.css"> 27 28 <!-- endbuild --> 29 30 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> 31 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" /> 32 33 <!-- RSS --> 34 <link rel="alternate" href="/atom.xml" title="Embark"> 35 <meta property="og:image" content="/img/share.png?v=0.0.5" /> 36 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.4/styles/dracula.min.css"> 37 38 <script async defer src="https://buttons.github.io/buttons.js"></script> 39 40 41 <script> 42 !function(root, factory) { 43 "function" == typeof define && define.amd ? // AMD. Register as an anonymous module unless amdModuleId is set 44 define([], function() { 45 return root.svg4everybody = factory(); 46 }) : "object" == typeof module && module.exports ? // Node. Does not work with strict CommonJS, but 47 // only CommonJS-like environments that support module.exports, 48 // like Node. 49 module.exports = factory() : root.svg4everybody = factory(); 50 }(this, function() { 51 /*! svg4everybody v2.1.9 | github.com/jonathantneal/svg4everybody */ 52 function embed(parent, svg, target) { 53 // if the target exists 54 if (target) { 55 // create a document fragment to hold the contents of the target 56 var fragment = document.createDocumentFragment(), viewBox = !svg.hasAttribute("viewBox") && target.getAttribute("viewBox"); 57 // conditionally set the viewBox on the svg 58 viewBox && svg.setAttribute("viewBox", viewBox); 59 // copy the contents of the clone into the fragment 60 for (// clone the target 61 var clone = target.cloneNode(!0); clone.childNodes.length; ) { 62 fragment.appendChild(clone.firstChild); 63 } 64 // append the fragment into the svg 65 parent.appendChild(fragment); 66 } 67 } 68 function loadreadystatechange(xhr) { 69 // listen to changes in the request 70 xhr.onreadystatechange = function() { 71 // if the request is ready 72 if (4 === xhr.readyState) { 73 // get the cached html document 74 var cachedDocument = xhr._cachedDocument; 75 // ensure the cached html document based on the xhr response 76 cachedDocument || (cachedDocument = xhr._cachedDocument = document.implementation.createHTMLDocument(""), 77 cachedDocument.body.innerHTML = xhr.responseText, xhr._cachedTarget = {}), // clear the xhr embeds list and embed each item 78 xhr._embeds.splice(0).map(function(item) { 79 // get the cached target 80 var target = xhr._cachedTarget[item.id]; 81 // ensure the cached target 82 target || (target = xhr._cachedTarget[item.id] = cachedDocument.getElementById(item.id)), 83 // embed the target into the svg 84 embed(item.parent, item.svg, target); 85 }); 86 } 87 }, // test the ready state change immediately 88 xhr.onreadystatechange(); 89 } 90 function svg4everybody(rawopts) { 91 function oninterval() { 92 // while the index exists in the live <use> collection 93 for (// get the cached <use> index 94 var index = 0; index < uses.length; ) { 95 // get the current <use> 96 var use = uses[index], parent = use.parentNode, svg = getSVGAncestor(parent), src = use.getAttribute("xlink:href") || use.getAttribute("href"); 97 if (!src && opts.attributeName && (src = use.getAttribute(opts.attributeName)), 98 svg && src) { 99 if (polyfill) { 100 if (!opts.validate || opts.validate(src, svg, use)) { 101 // remove the <use> element 102 parent.removeChild(use); 103 // parse the src and get the url and id 104 var srcSplit = src.split("#"), url = srcSplit.shift(), id = srcSplit.join("#"); 105 // if the link is external 106 if (url.length) { 107 // get the cached xhr request 108 var xhr = requests[url]; 109 // ensure the xhr request exists 110 xhr || (xhr = requests[url] = new XMLHttpRequest(), xhr.open("GET", url), xhr.send(), 111 xhr._embeds = []), // add the svg and id as an item to the xhr embeds list 112 xhr._embeds.push({ 113 parent: parent, 114 svg: svg, 115 id: id 116 }), // prepare the xhr ready state change event 117 loadreadystatechange(xhr); 118 } else { 119 // embed the local id into the svg 120 embed(parent, svg, document.getElementById(id)); 121 } 122 } else { 123 // increase the index when the previous value was not "valid" 124 ++index, ++numberOfSvgUseElementsToBypass; 125 } 126 } 127 } else { 128 // increase the index when the previous value was not "valid" 129 ++index; 130 } 131 } 132 // continue the interval 133 (!uses.length || uses.length - numberOfSvgUseElementsToBypass > 0) && requestAnimationFrame(oninterval, 67); 134 } 135 var polyfill, opts = Object(rawopts), newerIEUA = /\bTrident\/[567]\b|\bMSIE (?:9|10)\.0\b/, webkitUA = /\bAppleWebKit\/(\d+)\b/, olderEdgeUA = /\bEdge\/12\.(\d+)\b/, edgeUA = /\bEdge\/.(\d+)\b/, inIframe = window.top !== window.self; 136 polyfill = "polyfill" in opts ? opts.polyfill : newerIEUA.test(navigator.userAgent) || (navigator.userAgent.match(olderEdgeUA) || [])[1] < 10547 || (navigator.userAgent.match(webkitUA) || [])[1] < 537 || edgeUA.test(navigator.userAgent) && inIframe; 137 // create xhr requests object 138 var requests = {}, requestAnimationFrame = window.requestAnimationFrame || setTimeout, uses = document.getElementsByTagName("use"), numberOfSvgUseElementsToBypass = 0; 139 // conditionally start the interval if the polyfill is active 140 polyfill && oninterval(); 141 } 142 function getSVGAncestor(node) { 143 for (var svg = node; "svg" !== svg.nodeName.toLowerCase() && (svg = svg.parentNode); ) {} 144 return svg; 145 } 146 return svg4everybody; 147 }); 148 149 svg4everybody(); 150 </script> 151 </head> 152 153 <body> 154 <header role="banner" class="c-header c-header--compact"> 155 <span class="c-header__background"></span> 156 <div class="o-container c-header__content"> 157 <div class="c-header__top"> 158 <a href="/" title="Embark" class="c-logo c-logo--negative">Embark</a> 159 <nav role="navigation" class="c-navigation"> 160 <div class="c-navigation__header"> 161 <a href="/" title="Embark" class="c-logo">Embark</a> 162 <button class="c-navigation__close u-text-light" title="Close menu"> 163 <svg class="c-icon c-icon--xs"><use xlink:href="/../assets/icons/symbols.svg#icon-close"></use></svg> 164 </button> 165 </div> 166 <div class="c-navigation__body"> 167 <ul class="c-navigation__list"> 168 <li class="c-navigation__item"> 169 <a href="/docs/quick_start.html" class="c-navigation__anchor " title="Quick Start">Quick Start</a> 170 </li> 171 <li class="c-navigation__item"> 172 <a href="/docs" class="c-navigation__anchor is-active" title="Learn">Learn</a> 173 </li> 174 <li class="c-navigation__item"> 175 <a href="/plugins" class="c-navigation__anchor " title="Plugins">Plugins</a> 176 </li> 177 <li class="c-navigation__item"> 178 <a href="/community" class="c-navigation__anchor " title="Community">Community</a> 179 </li> 180 <li class="c-navigation__item"> 181 <a href="https://blog.embarklabs.io" target="_blank" rel="noopener" class="c-navigation__anchor " title="Blog">Blog</a> 182 </li> 183 </ul> 184 </div> 185 </nav> 186 <div class="o-flex o-flex-center"> 187 <form action="" class="o-flex__item u-hidden-until-large"> 188 <input type="search" placeholder="Search" id="search-input"> 189 </form> 190 <div class="o-flex__item"> 191 <ul class="o-flex o-flex-center"> 192 <li class="o-flex__item"> 193 <a href="https://github.com/embarklabs/embark" title="Github" target="_blank" class="u-link-ghost"> 194 <svg class="c-icon"><use xlink:href="/../assets/icons/symbols.svg#icon-github"></use></svg> 195 </a> 196 </li> 197 <li class="o-flex__item"> 198 <a href="https://twitter.com/EmbarkProject" title="Twitter" target="_blank"> 199 <svg class="c-icon"><use xlink:href="/../assets/icons/symbols.svg#icon-twitter"></use></svg> 200 </a> 201 </li> 202 <li class="o-flex__item u-hidden-large-up"> 203 <button type="button"class="c-navigation__trigger u-link-ghost" title="Open menu"> 204 <svg class="c-icon"><use xlink:href="/../assets/icons/symbols.svg#icon-navigation-menu"></use></svg> 205 </button> 206 </li> 207 </ul> 208 </div> 209 </div> 210 </div> 211 <div class="c-quick-search o-distance-m u-hidden-large-up"> 212 <input type="search" id="inp-search" placeholder="Search"> 213 </div> 214 <div class="c-header__body"> 215 <h1 class="c-title u-text-ghost">Documentation</h1> 216 217 218 219 220 221 </div> 222 </div> 223 </header> 224 225 226 <main role="main"> 227 <section class="o-guided-content o-distance"> 228 <div class="o-guided-content__wrapper"> 229 <button title="Open docs menu" id="guides-trigger" class="c-button c-button--minion u-hidden-large-up"> 230 <svg class="c-icon c-icon--xs"><use xlink:href="/../../assets/icons/symbols.svg#icon-navigation-menu"></use></svg> 231 <span>Guides</span> 232 </button> 233 <div class="c-guide o-guided-content__guide" id="guide-navigation"> 234 <div class="c-guide__header u-hidden-large-up"> 235 <a href="" title="Guides"> 236 Guides 237 </a> 238 <button type="button" title="Close menu" id="guides-close"> 239 <svg class="c-icon c-icon--xs"><use xlink:href="/../../assets/icons/symbols.svg#icon-close"></use></svg> 240 </button> 241 </div> 242 <div class="c-guide__body"> 243 <nav role="navigation"> 244 245 <div class=""> 246 <h3 class="c-category-title">Getting Started</h3> 247 <ul class="o-list-bare"> 248 249 <li class="o-list-bare__item"> 250 <a href="/docs/overview.html" title="Overview" class="u-link-uniform ">Overview</a> 251 <!-- <div class="o-distance-m"> 252 <ul class="o-list-bare c-navigation__subnav"> 253 <li class="o-list-bare__item"> 254 <a href="#" title="What is Embark?" class="u-link-uniform">What is Embark?</a> 255 </li> 256 </ul> 257 </div> --> 258 </li> 259 260 <li class="o-list-bare__item"> 261 <a href="/docs/installation.html" title="Installation" class="u-link-uniform ">Installation</a> 262 <!-- <div class="o-distance-m"> 263 <ul class="o-list-bare c-navigation__subnav"> 264 <li class="o-list-bare__item"> 265 <a href="#" title="What is Embark?" class="u-link-uniform">What is Embark?</a> 266 </li> 267 </ul> 268 </div> --> 269 </li> 270 271 <li class="o-list-bare__item"> 272 <a href="/docs/faq.html" title="FAQ" class="u-link-uniform ">FAQ</a> 273 <!-- <div class="o-distance-m"> 274 <ul class="o-list-bare c-navigation__subnav"> 275 <li class="o-list-bare__item"> 276 <a href="#" title="What is Embark?" class="u-link-uniform">What is Embark?</a> 277 </li> 278 </ul> 279 </div> --> 280 </li> 281 282 </ul> 283 284 285 <div class="o-distance-xl"> 286 <h3 class="c-category-title">General Usage</h3> 287 <ul class="o-list-bare"> 288 289 <li class="o-list-bare__item"> 290 <a href="/docs/create_project.html" title="Creating apps" class="u-link-uniform ">Creating apps</a> 291 <!-- <div class="o-distance-m"> 292 <ul class="o-list-bare c-navigation__subnav"> 293 <li class="o-list-bare__item"> 294 <a href="#" title="What is Embark?" class="u-link-uniform">What is Embark?</a> 295 </li> 296 </ul> 297 </div> --> 298 </li> 299 300 <li class="o-list-bare__item"> 301 <a href="/docs/structure.html" title="App structure" class="u-link-uniform is-active">App structure</a> 302 <!-- <div class="o-distance-m"> 303 <ul class="o-list-bare c-navigation__subnav"> 304 <li class="o-list-bare__item"> 305 <a href="#" title="What is Embark?" class="u-link-uniform">What is Embark?</a> 306 </li> 307 </ul> 308 </div> --> 309 </li> 310 311 <li class="o-list-bare__item"> 312 <a href="/docs/running_apps.html" title="Running apps" class="u-link-uniform ">Running apps</a> 313 <!-- <div class="o-distance-m"> 314 <ul class="o-list-bare c-navigation__subnav"> 315 <li class="o-list-bare__item"> 316 <a href="#" title="What is Embark?" class="u-link-uniform">What is Embark?</a> 317 </li> 318 </ul> 319 </div> --> 320 </li> 321 322 <li class="o-list-bare__item"> 323 <a href="/docs/dashboard.html" title="Using the dashboard" class="u-link-uniform ">Using the dashboard</a> 324 <!-- <div class="o-distance-m"> 325 <ul class="o-list-bare c-navigation__subnav"> 326 <li class="o-list-bare__item"> 327 <a href="#" title="What is Embark?" class="u-link-uniform">What is Embark?</a> 328 </li> 329 </ul> 330 </div> --> 331 </li> 332 333 <li class="o-list-bare__item"> 334 <a href="/docs/using_the_console.html" title="Using the console" class="u-link-uniform ">Using the console</a> 335 <!-- <div class="o-distance-m"> 336 <ul class="o-list-bare c-navigation__subnav"> 337 <li class="o-list-bare__item"> 338 <a href="#" title="What is Embark?" class="u-link-uniform">What is Embark?</a> 339 </li> 340 </ul> 341 </div> --> 342 </li> 343 344 <li class="o-list-bare__item"> 345 <a href="/docs/environments.html" title="Environments" class="u-link-uniform ">Environments</a> 346 <!-- <div class="o-distance-m"> 347 <ul class="o-list-bare c-navigation__subnav"> 348 <li class="o-list-bare__item"> 349 <a href="#" title="What is Embark?" class="u-link-uniform">What is Embark?</a> 350 </li> 351 </ul> 352 </div> --> 353 </li> 354 355 <li class="o-list-bare__item"> 356 <a href="/docs/configuration.html" title="Configuration" class="u-link-uniform ">Configuration</a> 357 <!-- <div class="o-distance-m"> 358 <ul class="o-list-bare c-navigation__subnav"> 359 <li class="o-list-bare__item"> 360 <a href="#" title="What is Embark?" class="u-link-uniform">What is Embark?</a> 361 </li> 362 </ul> 363 </div> --> 364 </li> 365 366 <li class="o-list-bare__item"> 367 <a href="/docs/pipeline_and_webpack.html" title="Building & Compiling" class="u-link-uniform ">Building & Compiling</a> 368 <!-- <div class="o-distance-m"> 369 <ul class="o-list-bare c-navigation__subnav"> 370 <li class="o-list-bare__item"> 371 <a href="#" title="What is Embark?" class="u-link-uniform">What is Embark?</a> 372 </li> 373 </ul> 374 </div> --> 375 </li> 376 377 <li class="o-list-bare__item"> 378 <a href="/docs/executing_scripts.html" title="Executing Scripts" class="u-link-uniform ">Executing Scripts</a> 379 <!-- <div class="o-distance-m"> 380 <ul class="o-list-bare c-navigation__subnav"> 381 <li class="o-list-bare__item"> 382 <a href="#" title="What is Embark?" class="u-link-uniform">What is Embark?</a> 383 </li> 384 </ul> 385 </div> --> 386 </li> 387 388 <li class="o-list-bare__item"> 389 <a href="/docs/javascript_usage.html" title="Using EmbarkJS" class="u-link-uniform ">Using EmbarkJS</a> 390 <!-- <div class="o-distance-m"> 391 <ul class="o-list-bare c-navigation__subnav"> 392 <li class="o-list-bare__item"> 393 <a href="#" title="What is Embark?" class="u-link-uniform">What is Embark?</a> 394 </li> 395 </ul> 396 </div> --> 397 </li> 398 399 </ul> 400 </div> 401 402 <div class="o-distance-xl"> 403 <h3 class="c-category-title">Smart Contract Development</h3> 404 <ul class="o-list-bare"> 405 406 <li class="o-list-bare__item"> 407 <a href="/docs/contracts_configuration.html" title="Configuration" class="u-link-uniform ">Configuration</a> 408 <!-- <div class="o-distance-m"> 409 <ul class="o-list-bare c-navigation__subnav"> 410 <li class="o-list-bare__item"> 411 <a href="#" title="What is Embark?" class="u-link-uniform">What is Embark?</a> 412 </li> 413 </ul> 414 </div> --> 415 </li> 416 417 <li class="o-list-bare__item"> 418 <a href="/docs/contracts_deployment.html" title="Accounts & Deployment" class="u-link-uniform ">Accounts & Deployment</a> 419 <!-- <div class="o-distance-m"> 420 <ul class="o-list-bare c-navigation__subnav"> 421 <li class="o-list-bare__item"> 422 <a href="#" title="What is Embark?" class="u-link-uniform">What is Embark?</a> 423 </li> 424 </ul> 425 </div> --> 426 </li> 427 428 <li class="o-list-bare__item"> 429 <a href="/docs/contracts_imports.html" title="Special Imports" class="u-link-uniform ">Special Imports</a> 430 <!-- <div class="o-distance-m"> 431 <ul class="o-list-bare c-navigation__subnav"> 432 <li class="o-list-bare__item"> 433 <a href="#" title="What is Embark?" class="u-link-uniform">What is Embark?</a> 434 </li> 435 </ul> 436 </div> --> 437 </li> 438 439 <li class="o-list-bare__item"> 440 <a href="/docs/contracts_testing.html" title="Testing" class="u-link-uniform ">Testing</a> 441 <!-- <div class="o-distance-m"> 442 <ul class="o-list-bare c-navigation__subnav"> 443 <li class="o-list-bare__item"> 444 <a href="#" title="What is Embark?" class="u-link-uniform">What is Embark?</a> 445 </li> 446 </ul> 447 </div> --> 448 </li> 449 450 <li class="o-list-bare__item"> 451 <a href="/docs/contracts_javascript.html" title="Smart Contracts in JavaScript" class="u-link-uniform ">Smart Contracts in JavaScript</a> 452 <!-- <div class="o-distance-m"> 453 <ul class="o-list-bare c-navigation__subnav"> 454 <li class="o-list-bare__item"> 455 <a href="#" title="What is Embark?" class="u-link-uniform">What is Embark?</a> 456 </li> 457 </ul> 458 </div> --> 459 </li> 460 461 </ul> 462 </div> 463 464 <div class="o-distance-xl"> 465 <h3 class="c-category-title">Blockchain Client</h3> 466 <ul class="o-list-bare"> 467 468 <li class="o-list-bare__item"> 469 <a href="/docs/blockchain_configuration.html" title="Configuration" class="u-link-uniform ">Configuration</a> 470 <!-- <div class="o-distance-m"> 471 <ul class="o-list-bare c-navigation__subnav"> 472 <li class="o-list-bare__item"> 473 <a href="#" title="What is Embark?" class="u-link-uniform">What is Embark?</a> 474 </li> 475 </ul> 476 </div> --> 477 </li> 478 479 <li class="o-list-bare__item"> 480 <a href="/docs/blockchain_accounts_configuration.html" title="Managing Accounts" class="u-link-uniform ">Managing Accounts</a> 481 <!-- <div class="o-distance-m"> 482 <ul class="o-list-bare c-navigation__subnav"> 483 <li class="o-list-bare__item"> 484 <a href="#" title="What is Embark?" class="u-link-uniform">What is Embark?</a> 485 </li> 486 </ul> 487 </div> --> 488 </li> 489 490 </ul> 491 </div> 492 493 <div class="o-distance-xl"> 494 <h3 class="c-category-title">Storage (IPFS/Swarm)</h3> 495 <ul class="o-list-bare"> 496 497 <li class="o-list-bare__item"> 498 <a href="/docs/storage_configuration.html" title="Configuration" class="u-link-uniform ">Configuration</a> 499 <!-- <div class="o-distance-m"> 500 <ul class="o-list-bare c-navigation__subnav"> 501 <li class="o-list-bare__item"> 502 <a href="#" title="What is Embark?" class="u-link-uniform">What is Embark?</a> 503 </li> 504 </ul> 505 </div> --> 506 </li> 507 508 <li class="o-list-bare__item"> 509 <a href="/docs/storage_deployment.html" title="Deploying apps" class="u-link-uniform ">Deploying apps</a> 510 <!-- <div class="o-distance-m"> 511 <ul class="o-list-bare c-navigation__subnav"> 512 <li class="o-list-bare__item"> 513 <a href="#" title="What is Embark?" class="u-link-uniform">What is Embark?</a> 514 </li> 515 </ul> 516 </div> --> 517 </li> 518 519 <li class="o-list-bare__item"> 520 <a href="/docs/storage_javascript.html" title="Storage APIs in JavaScript" class="u-link-uniform ">Storage APIs in JavaScript</a> 521 <!-- <div class="o-distance-m"> 522 <ul class="o-list-bare c-navigation__subnav"> 523 <li class="o-list-bare__item"> 524 <a href="#" title="What is Embark?" class="u-link-uniform">What is Embark?</a> 525 </li> 526 </ul> 527 </div> --> 528 </li> 529 530 </ul> 531 </div> 532 533 <div class="o-distance-xl"> 534 <h3 class="c-category-title">Messages (Whisper)</h3> 535 <ul class="o-list-bare"> 536 537 <li class="o-list-bare__item"> 538 <a href="/docs/messages_configuration.html" title="Configuration" class="u-link-uniform ">Configuration</a> 539 <!-- <div class="o-distance-m"> 540 <ul class="o-list-bare c-navigation__subnav"> 541 <li class="o-list-bare__item"> 542 <a href="#" title="What is Embark?" class="u-link-uniform">What is Embark?</a> 543 </li> 544 </ul> 545 </div> --> 546 </li> 547 548 <li class="o-list-bare__item"> 549 <a href="/docs/messages_javascript.html" title="Messages in JavaScript" class="u-link-uniform ">Messages in JavaScript</a> 550 <!-- <div class="o-distance-m"> 551 <ul class="o-list-bare c-navigation__subnav"> 552 <li class="o-list-bare__item"> 553 <a href="#" title="What is Embark?" class="u-link-uniform">What is Embark?</a> 554 </li> 555 </ul> 556 </div> --> 557 </li> 558 559 </ul> 560 </div> 561 562 <div class="o-distance-xl"> 563 <h3 class="c-category-title">Naming Systems (ENS)</h3> 564 <ul class="o-list-bare"> 565 566 <li class="o-list-bare__item"> 567 <a href="/docs/naming_configuration.html" title="Configuration" class="u-link-uniform ">Configuration</a> 568 <!-- <div class="o-distance-m"> 569 <ul class="o-list-bare c-navigation__subnav"> 570 <li class="o-list-bare__item"> 571 <a href="#" title="What is Embark?" class="u-link-uniform">What is Embark?</a> 572 </li> 573 </ul> 574 </div> --> 575 </li> 576 577 <li class="o-list-bare__item"> 578 <a href="/docs/naming_javascript.html" title="Naming Systems in JavaScript" class="u-link-uniform ">Naming Systems in JavaScript</a> 579 <!-- <div class="o-distance-m"> 580 <ul class="o-list-bare c-navigation__subnav"> 581 <li class="o-list-bare__item"> 582 <a href="#" title="What is Embark?" class="u-link-uniform">What is Embark?</a> 583 </li> 584 </ul> 585 </div> --> 586 </li> 587 588 </ul> 589 </div> 590 591 <div class="o-distance-xl"> 592 <h3 class="c-category-title">Plugins</h3> 593 <ul class="o-list-bare"> 594 595 <li class="o-list-bare__item"> 596 <a href="/docs/installing_plugins.html" title="Installing plugins" class="u-link-uniform ">Installing plugins</a> 597 <!-- <div class="o-distance-m"> 598 <ul class="o-list-bare c-navigation__subnav"> 599 <li class="o-list-bare__item"> 600 <a href="#" title="What is Embark?" class="u-link-uniform">What is Embark?</a> 601 </li> 602 </ul> 603 </div> --> 604 </li> 605 606 <li class="o-list-bare__item"> 607 <a href="/docs/creating_plugins.html" title="Creating plugins" class="u-link-uniform ">Creating plugins</a> 608 <!-- <div class="o-distance-m"> 609 <ul class="o-list-bare c-navigation__subnav"> 610 <li class="o-list-bare__item"> 611 <a href="#" title="What is Embark?" class="u-link-uniform">What is Embark?</a> 612 </li> 613 </ul> 614 </div> --> 615 </li> 616 617 <li class="o-list-bare__item"> 618 <a href="/docs/plugin_reference.html" title="Plugin APIs" class="u-link-uniform ">Plugin APIs</a> 619 <!-- <div class="o-distance-m"> 620 <ul class="o-list-bare c-navigation__subnav"> 621 <li class="o-list-bare__item"> 622 <a href="#" title="What is Embark?" class="u-link-uniform">What is Embark?</a> 623 </li> 624 </ul> 625 </div> --> 626 </li> 627 628 </ul> 629 </div> 630 631 <div class="o-distance-xl"> 632 <h3 class="c-category-title">Cockpit Guides</h3> 633 <ul class="o-list-bare"> 634 635 <li class="o-list-bare__item"> 636 <a href="/docs/cockpit_introduction.html" title="Introduction" class="u-link-uniform ">Introduction</a> 637 <!-- <div class="o-distance-m"> 638 <ul class="o-list-bare c-navigation__subnav"> 639 <li class="o-list-bare__item"> 640 <a href="#" title="What is Embark?" class="u-link-uniform">What is Embark?</a> 641 </li> 642 </ul> 643 </div> --> 644 </li> 645 646 <li class="o-list-bare__item"> 647 <a href="/docs/cockpit_dashboard.html" title="Using the Dashboard" class="u-link-uniform ">Using the Dashboard</a> 648 <!-- <div class="o-distance-m"> 649 <ul class="o-list-bare c-navigation__subnav"> 650 <li class="o-list-bare__item"> 651 <a href="#" title="What is Embark?" class="u-link-uniform">What is Embark?</a> 652 </li> 653 </ul> 654 </div> --> 655 </li> 656 657 <li class="o-list-bare__item"> 658 <a href="/docs/cockpit_deployment.html" title="Deployment" class="u-link-uniform ">Deployment</a> 659 <!-- <div class="o-distance-m"> 660 <ul class="o-list-bare c-navigation__subnav"> 661 <li class="o-list-bare__item"> 662 <a href="#" title="What is Embark?" class="u-link-uniform">What is Embark?</a> 663 </li> 664 </ul> 665 </div> --> 666 </li> 667 668 <li class="o-list-bare__item"> 669 <a href="/docs/cockpit_explorer.html" title="Explorer View" class="u-link-uniform ">Explorer View</a> 670 <!-- <div class="o-distance-m"> 671 <ul class="o-list-bare c-navigation__subnav"> 672 <li class="o-list-bare__item"> 673 <a href="#" title="What is Embark?" class="u-link-uniform">What is Embark?</a> 674 </li> 675 </ul> 676 </div> --> 677 </li> 678 679 <li class="o-list-bare__item"> 680 <a href="/docs/cockpit_editor.html" title="Code Editor" class="u-link-uniform ">Code Editor</a> 681 <!-- <div class="o-distance-m"> 682 <ul class="o-list-bare c-navigation__subnav"> 683 <li class="o-list-bare__item"> 684 <a href="#" title="What is Embark?" class="u-link-uniform">What is Embark?</a> 685 </li> 686 </ul> 687 </div> --> 688 </li> 689 690 <li class="o-list-bare__item"> 691 <a href="/docs/cockpit_debugger.html" title="Using the Debugger" class="u-link-uniform ">Using the Debugger</a> 692 <!-- <div class="o-distance-m"> 693 <ul class="o-list-bare c-navigation__subnav"> 694 <li class="o-list-bare__item"> 695 <a href="#" title="What is Embark?" class="u-link-uniform">What is Embark?</a> 696 </li> 697 </ul> 698 </div> --> 699 </li> 700 701 </ul> 702 </div> 703 704 <div class="o-distance-xl"> 705 <h3 class="c-category-title">Reference</h3> 706 <ul class="o-list-bare"> 707 708 <li class="o-list-bare__item"> 709 <a href="/docs/embark_commands.html" title="CLI Commands" class="u-link-uniform ">CLI Commands</a> 710 <!-- <div class="o-distance-m"> 711 <ul class="o-list-bare c-navigation__subnav"> 712 <li class="o-list-bare__item"> 713 <a href="#" title="What is Embark?" class="u-link-uniform">What is Embark?</a> 714 </li> 715 </ul> 716 </div> --> 717 </li> 718 719 </ul> 720 </div> 721 722 <div class="o-distance-xl"> 723 <h3 class="c-category-title">Miscellaneous</h3> 724 <ul class="o-list-bare"> 725 726 <li class="o-list-bare__item"> 727 <a href="/docs/migrating_from_3.x.html" title="Migrating from Embark 3.x" class="u-link-uniform ">Migrating from Embark 3.x</a> 728 <!-- <div class="o-distance-m"> 729 <ul class="o-list-bare c-navigation__subnav"> 730 <li class="o-list-bare__item"> 731 <a href="#" title="What is Embark?" class="u-link-uniform">What is Embark?</a> 732 </li> 733 </ul> 734 </div> --> 735 </li> 736 737 <li class="o-list-bare__item"> 738 <a href="/docs/troubleshooting.html" title="Troubleshooting" class="u-link-uniform ">Troubleshooting</a> 739 <!-- <div class="o-distance-m"> 740 <ul class="o-list-bare c-navigation__subnav"> 741 <li class="o-list-bare__item"> 742 <a href="#" title="What is Embark?" class="u-link-uniform">What is Embark?</a> 743 </li> 744 </ul> 745 </div> --> 746 </li> 747 748 <li class="o-list-bare__item"> 749 <a href="/docs/contributing.html" title="Contributing" class="u-link-uniform ">Contributing</a> 750 <!-- <div class="o-distance-m"> 751 <ul class="o-list-bare c-navigation__subnav"> 752 <li class="o-list-bare__item"> 753 <a href="#" title="What is Embark?" class="u-link-uniform">What is Embark?</a> 754 </li> 755 </ul> 756 </div> --> 757 </li> 758 759 </ul> 760 </div> 761 762 </nav> 763 </div> 764 </div> 765 <div class="o-guided-content__content"> 766 <p class="c-meta">Last updated: January 19th 2020 767 (<a href="https://github.com/embarklabs/embark/edit/master/site/source/docs/structure.md" target="_blank"> 768 Improve this guide <svg class="c-icon c-icon--xs"><use xlink:href="/../../assets/icons/symbols.svg#icon-pen-write-paper"></use></svg> 769 </a>) 770 </p> 771 <div class="o-standard-page"> 772 <h1>Application Structure</h1> 773 <p>Once a <a href="/docs/create_project.html">project is initialized</a>, it’s a good time to take a look at the resulting project structure, to get a better idea of what’s going on. In this guide we’ll explore an Embark project’s structure and learn where to find different file types and configurations.</p> 774 <p><strong>For Smart Contract developers</strong>: This <a href="#Smart-Contracts-only-template-structure">guide covers</a> projects that have been created with the <a href="create_project.html#Creating-“contracts-only”-apps"><code>--contracts-only</code> option</a> as well.</p> 775 <div class="c-notification c-notification--info"> 776 <p><strong>Project structure with other tools</strong></p> 777 <p><p>Since Embark version 4.0.0, it’s possible (and recommended) to use Embark along with existing front-end tooling. This could be tools such as <a href="https://cli.angular.io" target="_blank" rel="noopener">Angular CLI</a>, <a href="https://cli.vuejs.org" target="_blank" rel="noopener">Vue CLI</a> or <a href="https://github.com/facebook/create-react-app" target="_blank" rel="noopener">Create React App</a>.</p> 778 <p>When using Embark in combination with any of these or similar tools, the application structure will likely look different as each of these tools comes with an opinion and preference on how an application should be structured.</p> 779 </p> 780 </div> 781 782 783 784 <h2 id="Overview"><a href="#Overview" class="headerlink" title="Overview"></a>Overview</h2><p>An Embark project’s structure is pretty straight forward. It contains a <code>config</code>, a <code>test</code>, an <code>app</code>, a <code>contracts</code> and a <code>dist</code> folder for their dedicated purposes. Most of them are self explanatory, but let’s take a look at the overall file tree.</p> 785 <figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">├── app/</span><br><span class="line">├── contracts/</span><br><span class="line">├── config</span><br><span class="line">| ├── blockchain.js</span><br><span class="line">| └── contracts.js</span><br><span class="line">| └── storage.js</span><br><span class="line">| └── communication.js</span><br><span class="line">| └── webserver.js</span><br><span class="line">└── test/</span><br><span class="line">└── dist/</span><br><span class="line">└── chains.json</span><br><span class="line">└── embark.json</span><br></pre></td></tr></table></figure> 786 787 <h3 id="app"><a href="#app" class="headerlink" title="app/"></a>app/</h3><p>This is where the frontend of our decentralized application lives. It doesn’t matter whether we prefer using one of the amazing frameworks out there, like Angular or Vue, or if we like writing vanilla JavaScript. Embark will build our application with all the source files it can find inside <code>app</code>.</p> 788 <h3 id="contracts"><a href="#contracts" class="headerlink" title="contracts/"></a>contracts/</h3><p>Smart Contracts go here. Embark will automatically compile, deploy & track our Smart Contracts from this directory. While Embark is running, it’ll detect changes made to any Smart Contract and re-deploy it and its dependencies if necessary.</p> 789 <h3 id="config"><a href="#config" class="headerlink" title="config/"></a>config/</h3><p>There are many different components inside a decentralized application that can be configured. Embark offers different configuration files for each of those components and gives us full control over how the different parts are behaving. The configuration files for the different components of the stack can be found here.</p> 790 <ul> 791 <li><p><strong>blockchain.js</strong><br>This file contains the configuration used for Embark to run a blockchain node with an Ethereum client such as go-ethereum, Parity, or a simulator like Ganache.</p> 792 </li> 793 <li><p><strong>contracts.js</strong><br>This file contains the configuration for Smart Contracts, including their arguments and relationships between them, such as dependencies. Here we can also specify where to deploy our Smart Contracts and how the application should attempt to connect to a node. Please see <a href="contracts_configuration.html">Configuring Contracts</a> for more details.</p> 794 </li> 795 <li><p><strong>storage.js</strong><br>This file lets us configure what storage component to use (e.g IPFS), including what node to connect to, to upload and retrieve data through the application. Head over to our guide on <a href="storage_configuration.html">configuring decentralized storage</a> for details configuring a decentralized storage system for our application.</p> 796 </li> 797 <li><p><strong>communication.js</strong><br>Similar to the other configuration files, this file can be used to configure what communication component should be used (e.g Whisper) and what node it should connect to. Check out our guide <a href="messages_configuration.html">message configuration</a> to learn more about the available configuration options.</p> 798 </li> 799 <li><p><strong>webserver.js</strong><br>This file contains the configuration for the webserver that Embark starts when developing our application. Configuration options are the host, port and other useful options, such as whether a browser window should be opened on start up or not.</p> 800 </li> 801 </ul> 802 <h3 id="test"><a href="#test" class="headerlink" title="test/"></a>test/</h3><p>Embark lets us write tests for our Smart Contracts in JavaScript as well as <a href="https://github.com/ethereum/remix/tree/master/remix-tests" target="_blank" rel="noopener">Solidity</a>. All of our tests are located here. To learn more about testing with Embark head over to our <a href="contracts_testing.html">guide on testing</a>.</p> 803 <h3 id="dist"><a href="#dist" class="headerlink" title="dist/"></a>dist/</h3><p>The build output of our application will be put here. Everything inside this folder can be considered a production ready build artifact. This folder also gets uploaded to a decentralized storage using <code>embark upload</code>.</p> 804 <h3 id="chains-json"><a href="#chains-json" class="headerlink" title="chains.json"></a>chains.json</h3><p>This file is used to keep track of the deployed contracts in each chain. This is a super useful feature as it lets Embark figure out all by itself if and when a Smart Contract needs to be (re)deployed. See chains file documentation for more information</p> 805 <h3 id="embark-json"><a href="#embark-json" class="headerlink" title="embark.json"></a>embark.json</h3><p>In order to provide as much flexibility for our users as possible, Embark comes with an <code>embark.json</code> file that lets us configure our own directory structure. This file is also used to specify Embark plugins and other configurations. More information on how to use this configuration file, can be found in <a href="configuration.html">configuring embark.json</a>.</p> 806 <h2 id="Smart-Contracts-only-template-structure"><a href="#Smart-Contracts-only-template-structure" class="headerlink" title="Smart Contracts only template structure"></a>Smart Contracts only template structure</h2><p>When creating a project using the <code>--contracts-only</code> option, the resulting structure is a little bit simpler. Let’s take quick look:</p> 807 <figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">├── contracts/</span><br><span class="line">└── test/</span><br><span class="line">└── dist/</span><br><span class="line">├── contracts.js</span><br><span class="line">└── chains.json</span><br><span class="line">└── embark.json</span><br></pre></td></tr></table></figure> 808 809 <p>Most components or services that our application could take advantage of are disabled with the exception of Smart Contracts support, but we can still re-enable them in the <code>embark.json</code> configuration file if needed. Notice that this time, the <code>contracts.js</code> config file is in the root of the project’s directory. This is because in the <code>embark.json</code> config file,<code>contracts</code> points to a path in the same folder.</p> 810 <figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">...</span><br><span class="line">"config": {</span><br><span class="line"> "contracts": "contracts.js",</span><br><span class="line"> "blockchain": false,</span><br><span class="line"> "storage": false,</span><br><span class="line"> "communication": false,</span><br><span class="line"> "webserver": false</span><br><span class="line">},</span><br><span class="line">...</span><br></pre></td></tr></table></figure> 811 <p>As mentioned earlier, other services like storage and blockchain support can be easily re-enabled by changing them to path values as well.</p> 812 <p>Awesome, now that we have a better understanding of what a project in Embark looks like, let’s head over to the next guide and explore the different ways of running an application with Embark!</p> 813 814 </div> 815 <div class="o-container-medium o-distance-l"> 816 <div class="o-flex o-flex-space-between"> 817 818 <div class="o-flex__item"> 819 <a href="/docs/create_project.html" class="c-button c-button--quite" title="Previous article">Previous</a> 820 </div> 821 822 823 <div class="o-flex__item"> 824 <a href="/docs/running_apps.html" class="c-button c-button--quite" title="Next article">Next</a> 825 </div> 826 827 </div> 828 829 830 </div> 831 </div> 832 <div class="o-guided-content__addition"> 833 <h3 class="c-category-title">Contents</h3> 834 <ol class="o-list-bare"><li class="o-list-bare__item o-list-bare-level-2 o-ellipsis"><a href="#Overview" class="u-link-uniform">Overview</a><ol class="o-list-bare__child"><li class="o-list-bare__item o-list-bare-level-3 o-ellipsis"><a href="#app" class="u-link-uniform">app/</a></li><li class="o-list-bare__item o-list-bare-level-3 o-ellipsis"><a href="#contracts" class="u-link-uniform">contracts/</a></li><li class="o-list-bare__item o-list-bare-level-3 o-ellipsis"><a href="#config" class="u-link-uniform">config/</a></li><li class="o-list-bare__item o-list-bare-level-3 o-ellipsis"><a href="#test" class="u-link-uniform">test/</a></li><li class="o-list-bare__item o-list-bare-level-3 o-ellipsis"><a href="#dist" class="u-link-uniform">dist/</a></li><li class="o-list-bare__item o-list-bare-level-3 o-ellipsis"><a href="#chains-json" class="u-link-uniform">chains.json</a></li><li class="o-list-bare__item o-list-bare-level-3 o-ellipsis"><a href="#embark-json" class="u-link-uniform">embark.json</a></li></ol></li><li class="o-list-bare__item o-list-bare-level-2 o-ellipsis"><a href="#Smart-Contracts-only-template-structure" class="u-link-uniform">Smart Contracts only template structure</a></li></ol> 835 </div> 836 </div> 837 </section> 838 </main> 839 840 <script src="/js/linkjuice/dist/linkjuice.min.js"></script> 841 842 <footer role="contentinfo" class="c-footer o-distance-xxl"> 843 <div class="o-container"> 844 <div class="c-footer__top"> 845 <p class="c-category-title c-footer__top__title u-text-light"> 846 <a href="/" class="c-logo c-logo--negative" title="Embark">Embark</a> 847 </p> 848 </div> 849 <div class="c-footer__body"> 850 <div class="o-grid"> 851 <div class="o-grid__column--1-1 o-grid__column--medium-1-2 o-grid__column--large-1-5"> 852 <p class="c-category-title u-text-light">Resources</p> 853 <ul class="o-list-bare"> 854 <li class="o-list-bare__item"> 855 <a href="/docs/quick_start.html" class="u-link-ghost" title="Quick Start">Quick Start</a> 856 </li> 857 <li class="o-list-bare__item"> 858 <a href="/docs" class="u-link-ghost" title="Documentation">Documentation</a> 859 </li> 860 <li class="o-list-bare__item"> 861 <a href="https://blog.embarklabs.io" target="_blank" rel="noopener" class="u-link-ghost" title="Blog">Blog</a> 862 </li> 863 <li class="o-list-bare__item"> 864 <a href="/docs/faq.html" class="u-link-ghost" title="FAQ">FAQ</a> 865 </li> 866 <li class="o-list-bare__item"> 867 <a href="/docs/troubleshooting.html" class="u-link-ghost" title="Troubleshooting">Troubleshooting</a> 868 </li> 869 </ul> 870 </div> 871 <div class="o-grid__column--1-1 o-grid__column--medium-1-2 o-grid__column--large-1-5"> 872 <p class="c-category-title u-text-light">Help</p> 873 <ul class="o-list-bare"> 874 <li class="o-list-bare__item"> 875 <a href="https://stackoverflow.com/questions/tagged/embark" target="_blank" rel="noopener" class="u-link-ghost" title="Embark Questions">Stack Overflow</a> 876 </li> 877 <li class="o-list-bare__item"> 878 <a href="https://gitter.im/embark-framework/Lobby" target="_blank" rel="noopener" class="u-link-ghost" title="Gitter">Gitter</a> 879 </li> 880 <li class="o-list-bare__item"> 881 <a href="https://github.com/embarklabs/embark/issues" target="_blank" rel="noopener" class="u-link-ghost" title="Report issues">Report issues</a> 882 </li> 883 <li class="o-list-bare__item"> 884 <a href="https://github.com/embarklabs/embark/blob/master/CODE_OF_CONDUCT.md" target="_blank" rel="noopener" class="u-link-ghost" title="Code of Conduct">Code of Conduct</a> 885 </li> 886 </ul> 887 </div> 888 <div class="o-grid__column--1-1 o-grid__column--medium-1-2 o-grid__column--large-1-5"> 889 <p class="c-category-title u-text-light">Community</p> 890 <ul class="o-list-bare"> 891 <li class="o-list-bare__item"> 892 <a href="https://github.com/embarklabs" target="_blank" rel="noopener" class="u-link-ghost" title="Github">Github</a> 893 </li> 894 <li class="o-list-bare__item"> 895 <a href="https://twitter.com/EmbarkProject" target="_blank" rel="noopener" class="u-link-ghost" title="Twitter">Twitter</a> 896 </li> 897 <li class="o-list-bare__item"> 898 <a href="/docs/contributing.html" class="u-link-ghost" title="Contribute">Contribute</a> 899 </li> 900 <li class="o-list-bare__item"> 901 <a href="/community/#team" class="u-link-ghost" title="Team">Team</a> 902 </li> 903 </ul> 904 </div> 905 906 <div class="o-grid__column--1-1 o-grid__column--medium-1-2 o-grid__column--large-1-4"> 907 <p class="c-category-title u-text-light">The Status Network</p> 908 <ul class="o-list-bare two-columns"> 909 <li class="o-list-bare__item"><a class="u-link-ghost" href="https://status.im/" target="_blank">Status</a></li> 910 <li class="o-list-bare__item"><a class="u-link-ghost" href="https://keycard.tech/" target="_blank">Keycard</a></li> 911 <li class="o-list-bare__item"><a class="u-link-ghost" href="https://dap.ps/" target="_blank">dap.ps</a></li> 912 <li class="o-list-bare__item"><a class="u-link-ghost" href="https://teller.exchange/" target="_blank">Teller</a></li> 913 <li class="o-list-bare__item"><a class="u-link-ghost" href="https://assemble.fund/" target="_blank">Assemble</a></li> 914 <li class="o-list-bare__item"><a class="u-link-ghost" href="https://subspace.embarklabs.io/" target="_blank">Subspace</a></li> 915 <li class="o-list-bare__item"><a class="u-link-ghost" href="https://vac.dev/" target="_blank">Vac</a></li> 916 <li class="o-list-bare__item"><a class="u-link-ghost" href="https://nimbus.team/" target="_blank">Nimbus</a></li> 917 </ul> 918 </div> 919 </div> 920 </div> 921 <div class="c-footer__bottom"> 922 <p class="u-text-light"> 923 <a href="https://status.im/privacy-policy.html" title="Privacy Policy" target="_blank" class="u-text-light">Privacy Policy</a> 924 / © 2019-2020 Embark 925 </p> 926 </div> 927 </div> 928 </footer> 929 930 931 932 933 <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.4/highlight.min.js"></script> 934 <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script> 935 <script> 936 const EMBARK_DOC_VERSIONS = { 937 'latest': 'https://framework.embarklabs.io/docs','3.2': 'https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/' 938 }; 939 </script> 940 941 942 <!-- Fathom - simple website analytics - https://github.com/usefathom/fathom --> 943 <script> 944 (function(f, a, t, h, o, m){ 945 a[h]=a[h]||function(){(a[h].q=a[h].q||[]).push(arguments)}; 946 o=f.createElement('script'), 947 m=f.getElementsByTagName('script')[0]; 948 o.async=1; o.src=t; o.id='fathom-script'; 949 m.parentNode.insertBefore(o,m) 950 })(document, window, '//fathom.status.im/tracker.js', 'fathom'); 951 fathom('set', 'siteId', 'YDUQQ'); 952 fathom('trackPageview'); 953 </script> 954 <!-- / Fathom --> 955 956 957 <script src="/js/index.js"></script> 958 959 960 <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script> 961 <script type="text/javascript"> 962 docsearch({ 963 apiKey: '439d8dc2add18007a2f31be4a9c0ed70', 964 indexName: 'embark', 965 inputSelector: '#search-input' 966 }); 967 </script> 968 969 </body> 970 </html> 971