index.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>Building with Embark | 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/index.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 "> 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">Building with Embark</h1> 216 217 218 <p class="c-subtitle o-distance-s">Learn how <strong class="u-text-ghost">you</strong> can use Embark to build your apps.</p> 219 220 221 222 <div class="o-buttonbar"> 223 224 <a href="/docs/quick_start.html" class="c-button o-buttonbar__item" title="Quickstart →">Quickstart →</a> 225 226 227 228 </div> 229 230 231 </div> 232 </div> 233 </header> 234 235 236 <main role="main"> 237 <section class="o-container o-distance"> 238 <div class="o-heading o-center"> 239 240 <h2 class="o-heading__title c-section-title"> 241 <span class="u-text-light">Start</span> here. 242 </h2> 243 244 245 <p class="o-heading__subtitle c-subtitle u-text-death"> 246 There are many ways to work with Embark. Here are a few good places to start. 247 </p> 248 249 250 </div> 251 252 253 <div class="o-distance-l"> 254 <div class="o-grid"> 255 <div class="c-box c-box--spot o-grid__column--1-1 o-grid__column--large-2-3 "> 256 257 <svg class="c-icon c-icon--l u-text-ghost"><use xlink:href="/../../assets/icons/symbols.svg#icon-list-to-do"></use></svg> 258 259 <h3 class="c-title-level-2 u-text-ghost">Documentation</h3> 260 <p class="c-box__subtitle u-text-ghost">Go straight to the docs and explore what Embark has to offer!</p> 261 262 <p class="c-box__footer"> 263 <a href="/docs/overview.html" title="Learn more" class="c-link c-link--ghost">Learn more</a> 264 </p> 265 266 </div> 267 268 <div class="c-box c-box--spot o-grid__column--1-1 o-grid__column--large-1-3 "> 269 270 <svg class="c-icon c-icon--l u-text-ghost"><use xlink:href="/../../assets/icons/symbols.svg#icon-browser-gauge"></use></svg> 271 272 <h3 class="c-title-level-3 u-text-ghost">Using the CLI</h3> 273 <p class="c-box__subtitle u-text-ghost">Learn how to use Embark's command line interface to develop your apps.</p> 274 275 <p class="c-box__footer"> 276 <a href="/docs/create_project.html" title="Learn more" class="c-link c-link--ghost">Learn more</a> 277 </p> 278 279 </div> 280 281 </div> 282 </div> 283 <div class="o-distance-l"> 284 <div class="o-grid"> 285 <div class="c-box c-box--whisper o-grid__column--1-1 o-grid__column--large-1-2 "> 286 287 <svg class="c-icon c-icon--l"><use xlink:href="/../../assets/icons/symbols.svg#icon-pen-write-paper"></use></svg> 288 289 <h3 class="c-body-title"> 290 291 Smart Contract Development 292 293 </h3> 294 295 <p class="c-box__subtitle u-text-light">Embark provides a lot of flexibility when it comes to configuring, compiling, and deploying your Smart Contracts.</p> 296 297 <p class="c-box__footer"> 298 <a href="/docs/contracts_configuration.html" title="Learn more" class="c-link">Learn more</a> 299 </p> 300 301 </div> 302 303 304 <!-- <div class="c-box c-box--whisper o-grid__column--1-1 o-grid__column--large-1-3 "> 305 306 <svg class="c-icon c-icon--l"><use xlink:href="/../../assets/icons/symbols.svg#icon-space-rocket"></use></svg> 307 308 <h3 class="c-body-title"> 309 310 Use Cockpit 311 312 </h3> 313 314 <p class="c-box__subtitle u-text-light">Learn how to develop, deploy and debug applications using Embark's companion interface Cockpit.</p> 315 316 <p class="c-box__footer"> 317 <a href="/docs/creating_plugins.html" title="Learn more" class="c-link">Learn more</a> 318 </p> 319 320 </div> 321 322 --> 323 <div class="c-box c-box--whisper o-grid__column--1-1 o-grid__column--large-1-2 "> 324 325 <svg class="c-icon c-icon--l"><use xlink:href="/../../assets/icons/symbols.svg#icon-module"></use></svg> 326 327 <h3 class="c-body-title"> 328 329 Create a plugin 330 331 </h3> 332 333 <p class="c-box__subtitle u-text-light">Extend Embark to your needs! Learn how to build a plugin that integrates your favourite tools with Embark.</p> 334 335 <p class="c-box__footer"> 336 <a href="/docs/creating_plugins.html" title="Learn more" class="c-link">Learn more</a> 337 </p> 338 339 </div> 340 341 342 </div> 343 </div> 344 <div class="o-distance o-center"> 345 <a href="/docs/overview.html" title="Docs Overview" class="c-button">Take me to the docs →</a> 346 </div> 347 </section> 348 </main> 349 350 <footer role="contentinfo" class="c-footer o-distance-xxl"> 351 <div class="o-container"> 352 <div class="c-footer__top"> 353 <p class="c-category-title c-footer__top__title u-text-light"> 354 <a href="/" class="c-logo c-logo--negative" title="Embark">Embark</a> 355 </p> 356 </div> 357 <div class="c-footer__body"> 358 <div class="o-grid"> 359 <div class="o-grid__column--1-1 o-grid__column--medium-1-2 o-grid__column--large-1-5"> 360 <p class="c-category-title u-text-light">Resources</p> 361 <ul class="o-list-bare"> 362 <li class="o-list-bare__item"> 363 <a href="/docs/quick_start.html" class="u-link-ghost" title="Quick Start">Quick Start</a> 364 </li> 365 <li class="o-list-bare__item"> 366 <a href="/docs" class="u-link-ghost" title="Documentation">Documentation</a> 367 </li> 368 <li class="o-list-bare__item"> 369 <a href="https://blog.embarklabs.io" target="_blank" rel="noopener" class="u-link-ghost" title="Blog">Blog</a> 370 </li> 371 <li class="o-list-bare__item"> 372 <a href="/docs/faq.html" class="u-link-ghost" title="FAQ">FAQ</a> 373 </li> 374 <li class="o-list-bare__item"> 375 <a href="/docs/troubleshooting.html" class="u-link-ghost" title="Troubleshooting">Troubleshooting</a> 376 </li> 377 </ul> 378 </div> 379 <div class="o-grid__column--1-1 o-grid__column--medium-1-2 o-grid__column--large-1-5"> 380 <p class="c-category-title u-text-light">Help</p> 381 <ul class="o-list-bare"> 382 <li class="o-list-bare__item"> 383 <a href="https://stackoverflow.com/questions/tagged/embark" target="_blank" rel="noopener" class="u-link-ghost" title="Embark Questions">Stack Overflow</a> 384 </li> 385 <li class="o-list-bare__item"> 386 <a href="https://gitter.im/embark-framework/Lobby" target="_blank" rel="noopener" class="u-link-ghost" title="Gitter">Gitter</a> 387 </li> 388 <li class="o-list-bare__item"> 389 <a href="https://github.com/embarklabs/embark/issues" target="_blank" rel="noopener" class="u-link-ghost" title="Report issues">Report issues</a> 390 </li> 391 <li class="o-list-bare__item"> 392 <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> 393 </li> 394 </ul> 395 </div> 396 <div class="o-grid__column--1-1 o-grid__column--medium-1-2 o-grid__column--large-1-5"> 397 <p class="c-category-title u-text-light">Community</p> 398 <ul class="o-list-bare"> 399 <li class="o-list-bare__item"> 400 <a href="https://github.com/embarklabs" target="_blank" rel="noopener" class="u-link-ghost" title="Github">Github</a> 401 </li> 402 <li class="o-list-bare__item"> 403 <a href="https://twitter.com/EmbarkProject" target="_blank" rel="noopener" class="u-link-ghost" title="Twitter">Twitter</a> 404 </li> 405 <li class="o-list-bare__item"> 406 <a href="/docs/contributing.html" class="u-link-ghost" title="Contribute">Contribute</a> 407 </li> 408 <li class="o-list-bare__item"> 409 <a href="/community/#team" class="u-link-ghost" title="Team">Team</a> 410 </li> 411 </ul> 412 </div> 413 414 <div class="o-grid__column--1-1 o-grid__column--medium-1-2 o-grid__column--large-1-4"> 415 <p class="c-category-title u-text-light">The Status Network</p> 416 <ul class="o-list-bare two-columns"> 417 <li class="o-list-bare__item"><a class="u-link-ghost" href="https://status.im/" target="_blank">Status</a></li> 418 <li class="o-list-bare__item"><a class="u-link-ghost" href="https://keycard.tech/" target="_blank">Keycard</a></li> 419 <li class="o-list-bare__item"><a class="u-link-ghost" href="https://dap.ps/" target="_blank">dap.ps</a></li> 420 <li class="o-list-bare__item"><a class="u-link-ghost" href="https://teller.exchange/" target="_blank">Teller</a></li> 421 <li class="o-list-bare__item"><a class="u-link-ghost" href="https://assemble.fund/" target="_blank">Assemble</a></li> 422 <li class="o-list-bare__item"><a class="u-link-ghost" href="https://subspace.embarklabs.io/" target="_blank">Subspace</a></li> 423 <li class="o-list-bare__item"><a class="u-link-ghost" href="https://vac.dev/" target="_blank">Vac</a></li> 424 <li class="o-list-bare__item"><a class="u-link-ghost" href="https://nimbus.team/" target="_blank">Nimbus</a></li> 425 </ul> 426 </div> 427 </div> 428 </div> 429 <div class="c-footer__bottom"> 430 <p class="u-text-light"> 431 <a href="https://status.im/privacy-policy.html" title="Privacy Policy" target="_blank" class="u-text-light">Privacy Policy</a> 432 / © 2019-2020 Embark 433 </p> 434 </div> 435 </div> 436 </footer> 437 438 439 440 441 <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.4/highlight.min.js"></script> 442 <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script> 443 <script> 444 const EMBARK_DOC_VERSIONS = { 445 'latest': 'https://framework.embarklabs.io/docs','3.2': 'https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/' 446 }; 447 </script> 448 449 450 <!-- Fathom - simple website analytics - https://github.com/usefathom/fathom --> 451 <script> 452 (function(f, a, t, h, o, m){ 453 a[h]=a[h]||function(){(a[h].q=a[h].q||[]).push(arguments)}; 454 o=f.createElement('script'), 455 m=f.getElementsByTagName('script')[0]; 456 o.async=1; o.src=t; o.id='fathom-script'; 457 m.parentNode.insertBefore(o,m) 458 })(document, window, '//fathom.status.im/tracker.js', 'fathom'); 459 fathom('set', 'siteId', 'YDUQQ'); 460 fathom('trackPageview'); 461 </script> 462 <!-- / Fathom --> 463 464 465 <script src="/js/index.js"></script> 466 467 468 <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script> 469 <script type="text/javascript"> 470 docsearch({ 471 apiKey: '439d8dc2add18007a2f31be4a9c0ed70', 472 indexName: 'embark', 473 inputSelector: '#search-input' 474 }); 475 </script> 476 477 </body> 478 </html> 479