quick_start.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>Quick Start | 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/quick_start.html"> 10 <!-- Alternative links --> 11 12 13 <link rel="alternative" hreflang="en" href="https://framework.embarklabs.io/docs/quick_start.html"> 14 15 16 17 <!-- Icon --> 18 <meta name="msapplication-TileColor" content="#080E1A"> 19 <link rel="icon" type="image/png" href="/assets/images/favicon-16.png" sizes="16x16" /> 20 <link rel="icon" type="image/png" href="/assets/images/favicon-32.png" sizes="32x32" /> 21 22 <link rel="apple-touch-icon" sizes="76x76" href="/assets/images/apple-touch-icon-60x60-precomposed.png"> 23 <link rel="apple-touch-icon" sizes="76x76" href="/assets/images/apple-touch-icon-76x76-precomposed.png"> 24 <link rel="apple-touch-icon" sizes="120x120" href="/assets/images/apple-touch-icon-120x120-precomposed.png"> 25 <link rel="apple-touch-icon" sizes="152x152" href="/assets/images/apple-touch-icon-152x152-precomposed.png"> 26 <link rel="apple-touch-icon" sizes="180x180" href="/assets/images/apple-touch-icon-precomposed.png"> 27 <link rel="apple-touch-icon" href="/assets/images/apple-touch-icon-precomposed.png"> 28 <!-- CSS --> 29 30 <link rel="stylesheet" href="/css/embark.css"> 31 32 <!-- endbuild --> 33 34 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> 35 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" /> 36 37 <!-- RSS --> 38 <link rel="alternate" href="/atom.xml" title="Embark"> 39 <meta property="og:image" content="/img/share.png?v=0.0.5" /> 40 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.4/styles/dracula.min.css"> 41 42 <script async defer src="https://buttons.github.io/buttons.js"></script> 43 44 45 <script> 46 !function(root, factory) { 47 "function" == typeof define && define.amd ? // AMD. Register as an anonymous module unless amdModuleId is set 48 define([], function() { 49 return root.svg4everybody = factory(); 50 }) : "object" == typeof module && module.exports ? // Node. Does not work with strict CommonJS, but 51 // only CommonJS-like environments that support module.exports, 52 // like Node. 53 module.exports = factory() : root.svg4everybody = factory(); 54 }(this, function() { 55 /*! svg4everybody v2.1.9 | github.com/jonathantneal/svg4everybody */ 56 function embed(parent, svg, target) { 57 // if the target exists 58 if (target) { 59 // create a document fragment to hold the contents of the target 60 var fragment = document.createDocumentFragment(), viewBox = !svg.hasAttribute("viewBox") && target.getAttribute("viewBox"); 61 // conditionally set the viewBox on the svg 62 viewBox && svg.setAttribute("viewBox", viewBox); 63 // copy the contents of the clone into the fragment 64 for (// clone the target 65 var clone = target.cloneNode(!0); clone.childNodes.length; ) { 66 fragment.appendChild(clone.firstChild); 67 } 68 // append the fragment into the svg 69 parent.appendChild(fragment); 70 } 71 } 72 function loadreadystatechange(xhr) { 73 // listen to changes in the request 74 xhr.onreadystatechange = function() { 75 // if the request is ready 76 if (4 === xhr.readyState) { 77 // get the cached html document 78 var cachedDocument = xhr._cachedDocument; 79 // ensure the cached html document based on the xhr response 80 cachedDocument || (cachedDocument = xhr._cachedDocument = document.implementation.createHTMLDocument(""), 81 cachedDocument.body.innerHTML = xhr.responseText, xhr._cachedTarget = {}), // clear the xhr embeds list and embed each item 82 xhr._embeds.splice(0).map(function(item) { 83 // get the cached target 84 var target = xhr._cachedTarget[item.id]; 85 // ensure the cached target 86 target || (target = xhr._cachedTarget[item.id] = cachedDocument.getElementById(item.id)), 87 // embed the target into the svg 88 embed(item.parent, item.svg, target); 89 }); 90 } 91 }, // test the ready state change immediately 92 xhr.onreadystatechange(); 93 } 94 function svg4everybody(rawopts) { 95 function oninterval() { 96 // while the index exists in the live <use> collection 97 for (// get the cached <use> index 98 var index = 0; index < uses.length; ) { 99 // get the current <use> 100 var use = uses[index], parent = use.parentNode, svg = getSVGAncestor(parent), src = use.getAttribute("xlink:href") || use.getAttribute("href"); 101 if (!src && opts.attributeName && (src = use.getAttribute(opts.attributeName)), 102 svg && src) { 103 if (polyfill) { 104 if (!opts.validate || opts.validate(src, svg, use)) { 105 // remove the <use> element 106 parent.removeChild(use); 107 // parse the src and get the url and id 108 var srcSplit = src.split("#"), url = srcSplit.shift(), id = srcSplit.join("#"); 109 // if the link is external 110 if (url.length) { 111 // get the cached xhr request 112 var xhr = requests[url]; 113 // ensure the xhr request exists 114 xhr || (xhr = requests[url] = new XMLHttpRequest(), xhr.open("GET", url), xhr.send(), 115 xhr._embeds = []), // add the svg and id as an item to the xhr embeds list 116 xhr._embeds.push({ 117 parent: parent, 118 svg: svg, 119 id: id 120 }), // prepare the xhr ready state change event 121 loadreadystatechange(xhr); 122 } else { 123 // embed the local id into the svg 124 embed(parent, svg, document.getElementById(id)); 125 } 126 } else { 127 // increase the index when the previous value was not "valid" 128 ++index, ++numberOfSvgUseElementsToBypass; 129 } 130 } 131 } else { 132 // increase the index when the previous value was not "valid" 133 ++index; 134 } 135 } 136 // continue the interval 137 (!uses.length || uses.length - numberOfSvgUseElementsToBypass > 0) && requestAnimationFrame(oninterval, 67); 138 } 139 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; 140 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; 141 // create xhr requests object 142 var requests = {}, requestAnimationFrame = window.requestAnimationFrame || setTimeout, uses = document.getElementsByTagName("use"), numberOfSvgUseElementsToBypass = 0; 143 // conditionally start the interval if the polyfill is active 144 polyfill && oninterval(); 145 } 146 function getSVGAncestor(node) { 147 for (var svg = node; "svg" !== svg.nodeName.toLowerCase() && (svg = svg.parentNode); ) {} 148 return svg; 149 } 150 return svg4everybody; 151 }); 152 153 svg4everybody(); 154 </script> 155 </head> 156 157 <body> 158 <header role="banner" class="c-header c-header--compact"> 159 <span class="c-header__background"></span> 160 <div class="o-container c-header__content"> 161 <div class="c-header__top"> 162 <a href="/" title="Embark" class="c-logo c-logo--negative">Embark</a> 163 <nav role="navigation" class="c-navigation"> 164 <div class="c-navigation__header"> 165 <a href="/" title="Embark" class="c-logo">Embark</a> 166 <button class="c-navigation__close u-text-light" title="Close menu"> 167 <svg class="c-icon c-icon--xs"><use xlink:href="/../assets/icons/symbols.svg#icon-close"></use></svg> 168 </button> 169 </div> 170 <div class="c-navigation__body"> 171 <ul class="c-navigation__list"> 172 <li class="c-navigation__item"> 173 <a href="/docs/quick_start.html" class="c-navigation__anchor is-active" title="Quick Start">Quick Start</a> 174 </li> 175 <li class="c-navigation__item"> 176 <a href="/docs" class="c-navigation__anchor " title="Learn">Learn</a> 177 </li> 178 <li class="c-navigation__item"> 179 <a href="/plugins" class="c-navigation__anchor " title="Plugins">Plugins</a> 180 </li> 181 <li class="c-navigation__item"> 182 <a href="/community" class="c-navigation__anchor " title="Community">Community</a> 183 </li> 184 <li class="c-navigation__item"> 185 <a href="https://blog.embarklabs.io" target="_blank" rel="noopener" class="c-navigation__anchor " title="Blog">Blog</a> 186 </li> 187 </ul> 188 </div> 189 </nav> 190 <div class="o-flex o-flex-center"> 191 <form action="" class="o-flex__item u-hidden-until-large"> 192 <input type="search" placeholder="Search" id="search-input"> 193 </form> 194 <div class="o-flex__item"> 195 <ul class="o-flex o-flex-center"> 196 <li class="o-flex__item"> 197 <a href="https://github.com/embarklabs/embark" title="Github" target="_blank" class="u-link-ghost"> 198 <svg class="c-icon"><use xlink:href="/../assets/icons/symbols.svg#icon-github"></use></svg> 199 </a> 200 </li> 201 <li class="o-flex__item"> 202 <a href="https://twitter.com/EmbarkProject" title="Twitter" target="_blank"> 203 <svg class="c-icon"><use xlink:href="/../assets/icons/symbols.svg#icon-twitter"></use></svg> 204 </a> 205 </li> 206 <li class="o-flex__item u-hidden-large-up"> 207 <button type="button"class="c-navigation__trigger u-link-ghost" title="Open menu"> 208 <svg class="c-icon"><use xlink:href="/../assets/icons/symbols.svg#icon-navigation-menu"></use></svg> 209 </button> 210 </li> 211 </ul> 212 </div> 213 </div> 214 </div> 215 <div class="c-quick-search o-distance-m u-hidden-large-up"> 216 <input type="search" id="inp-search" placeholder="Search"> 217 </div> 218 <div class="c-header__body"> 219 <h1 class="c-title u-text-ghost">Quick Start</h1> 220 221 222 <p class="c-subtitle o-distance-s">Build your first DApp with Embark</p> 223 224 225 226 227 </div> 228 </div> 229 </header> 230 231 232 <main role="main" class="o-standard-page"> 233 <section class="o-container-medium o-distance"> 234 <h1 id="Welcome-to-the-Quick-Start"><a href="#Welcome-to-the-Quick-Start" class="headerlink" title="Welcome to the Quick Start!"></a>Welcome to the Quick Start!</h1><p>In this guide we’ll explore how easy it is to quickly get up and running with Embark to build our first decentralized application. This is the perfect place to start if you haven’t used Embark before.</p> 235 <p>Together, we’re going to:</p> 236 <div class="o-distance-l"> 237 <ul class="c-checklist"> 238 239 <li class="c-checklist__item"> 240 <span class="c-checklist__circle"> 241 <svg class="c-icon c-checklist__icon"><use xlink:href="../assets/icons/symbols.svg#icon-check"></use></svg> 242 </span> 243 Install Embark 244 </li> 245 246 <li class="c-checklist__item"> 247 <span class="c-checklist__circle"> 248 <svg class="c-icon c-checklist__icon"><use xlink:href="../assets/icons/symbols.svg#icon-check"></use></svg> 249 </span> 250 Create an app 251 </li> 252 253 <li class="c-checklist__item"> 254 <span class="c-checklist__circle"> 255 <svg class="c-icon c-checklist__icon"><use xlink:href="../assets/icons/symbols.svg#icon-check"></use></svg> 256 </span> 257 Run and deploy the app 258 </li> 259 260 </ul> 261 </div> 262 263 264 265 <p>Hopefully, after that you’ll be motivated to explore the rest of Embark’s <a href="/docs/overview.html">documentation</a>. If you run into any problems along your journey, check out <a href="https://gitter.im/embark-framework/Lobby" target="_blank" rel="noopener">our Gitter channel</a> as well. We are there to help.</p> 266 <p>Let’s get started!</p> 267 <h2 id="Installing-Embark"><a href="#Installing-Embark" class="headerlink" title="Installing Embark"></a>Installing Embark</h2><p>First things first, we’ll have to install Embark on our local machines. This is easily done buy using a package manager of your choice. The following command installs the Embark CLI as a global command using npm:</p> 268 <figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">$ npm install -g embark</span><br></pre></td></tr></table></figure> 269 270 <p>Once that is done, <code>embark</code> should be available as a global command.</p> 271 <div class="c-notification c-notification--info"> 272 <p><strong>Prerequisites</strong></p> 273 <p><p>In order to actually start a blockchain client or other processes, there are some<br>more tools that need to be installed. Head over to our <a href="/docs/installation.html">installation guide</a> to learn more.</p> 274 </p> 275 </div> 276 277 278 279 <h2 id="Creating-your-first-app"><a href="#Creating-your-first-app" class="headerlink" title="Creating your first app"></a>Creating your first app</h2><p>In order to get results as quickly as possible, Embark comes with a <code>demo</code> command that scaffolds and sets up a complete application for us to play with. Open up a terminal of your choice and run:</p> 280 <figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">$ embark demo</span><br><span class="line">$ cd embark_demo</span><br></pre></td></tr></table></figure> 281 282 <p>This will create a demo application. Feel free to look around to get familiar with the project’s structure, but don’t worry. We’ll take a closer look at it later in one of our <a href="structure.html">dedicated guides</a>.</p> 283 <h2 id="Running-your-app"><a href="#Running-your-app" class="headerlink" title="Running your app"></a>Running your app</h2><p>The fastest way to get your app running is to use Embark’s <code>run</code> command. It takes care of a lot of things, such as spinning up an Ethereum and IPFS node, or keeping an eye on file changes to recompile your code. There’s other ways to <a href="running_apps.html">run your app</a>, in case you need more control over different processes, but let’s not get ahead of ourselves.</p> 284 <figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">$ embark run</span><br></pre></td></tr></table></figure> 285 286 <p>Once executed, we’ll notice that Embark opens up a dashboard view inside our terminal. This is the place where we monitor running processes such as compilation of our sources as well as deployments. As everything in Embark, the dashboard usage is configurable. If we prefer Embark to just output logs of whatever it’s doing, this can be easily done by running the same command with the <code>--nodashboard</code> option.</p> 287 <p>Notice that the dashboard comes with sections for <strong>Contracts</strong>, <strong>Environment</strong>, <strong>Status</strong>, <strong>Available Services</strong>, <strong>Logs</strong> and <strong>Console</strong>. While most of them are self explanatory, we’ll take a closer look at those in the <a href="dashboard.html">dashboard guide</a>.</p> 288 <p><img src="/assets/images/embark-dashboard.png" alt="Dashboard"></p> 289 <p>For now, let’s focus on what has happened in the meantime. Embark has compiled and deployed the Smart Contracts that come with the demo application to a custom blockchain on your local machine. It has also compiled the web app that’s part of the demo and deployed that to a local web server, which is listening on <code>http://localhost:8000</code>. In fact, Embark has probably already opened a browser window for you. </p> 290 <p>If not, give it a try yourself and open <a href="http://localhost:8000" target="_blank" rel="noopener">localhost:8000</a> in your browser of choice!</p> 291 <h2 id="Getting-help"><a href="#Getting-help" class="headerlink" title="Getting help"></a>Getting help</h2><p><strong>Congratulations!</strong> You’ve just created your first decentralized application. Now it’s a good time to explore what else Embark has to offer. To get started, type <code>help</code> into the running console to get a list of commands you can run inside the dashboard.</p> 292 <p>Also, make sure to check out the other guides and let us know if you miss anything! If you run into any problems, the <a href="troubleshooting.html">guide on troubleshooting</a> is here to help.</p> 293 <div class="o-container o-distance-l o-center"> 294 <a href="/docs/overview.html" class="c-button" title="Take me to the docs">Take me to the docs →</a> 295 </div> 296 297 </section> 298 </main> 299 300 301 <footer role="contentinfo" class="c-footer o-distance-xxl"> 302 <div class="o-container"> 303 <div class="c-footer__top"> 304 <p class="c-category-title c-footer__top__title u-text-light"> 305 <a href="/" class="c-logo c-logo--negative" title="Embark">Embark</a> 306 </p> 307 </div> 308 <div class="c-footer__body"> 309 <div class="o-grid"> 310 <div class="o-grid__column--1-1 o-grid__column--medium-1-2 o-grid__column--large-1-5"> 311 <p class="c-category-title u-text-light">Resources</p> 312 <ul class="o-list-bare"> 313 <li class="o-list-bare__item"> 314 <a href="/docs/quick_start.html" class="u-link-ghost" title="Quick Start">Quick Start</a> 315 </li> 316 <li class="o-list-bare__item"> 317 <a href="/docs" class="u-link-ghost" title="Documentation">Documentation</a> 318 </li> 319 <li class="o-list-bare__item"> 320 <a href="https://blog.embarklabs.io" target="_blank" rel="noopener" class="u-link-ghost" title="Blog">Blog</a> 321 </li> 322 <li class="o-list-bare__item"> 323 <a href="/docs/faq.html" class="u-link-ghost" title="FAQ">FAQ</a> 324 </li> 325 <li class="o-list-bare__item"> 326 <a href="/docs/troubleshooting.html" class="u-link-ghost" title="Troubleshooting">Troubleshooting</a> 327 </li> 328 </ul> 329 </div> 330 <div class="o-grid__column--1-1 o-grid__column--medium-1-2 o-grid__column--large-1-5"> 331 <p class="c-category-title u-text-light">Help</p> 332 <ul class="o-list-bare"> 333 <li class="o-list-bare__item"> 334 <a href="https://stackoverflow.com/questions/tagged/embark" target="_blank" rel="noopener" class="u-link-ghost" title="Embark Questions">Stack Overflow</a> 335 </li> 336 <li class="o-list-bare__item"> 337 <a href="https://gitter.im/embark-framework/Lobby" target="_blank" rel="noopener" class="u-link-ghost" title="Gitter">Gitter</a> 338 </li> 339 <li class="o-list-bare__item"> 340 <a href="https://github.com/embarklabs/embark/issues" target="_blank" rel="noopener" class="u-link-ghost" title="Report issues">Report issues</a> 341 </li> 342 <li class="o-list-bare__item"> 343 <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> 344 </li> 345 </ul> 346 </div> 347 <div class="o-grid__column--1-1 o-grid__column--medium-1-2 o-grid__column--large-1-5"> 348 <p class="c-category-title u-text-light">Community</p> 349 <ul class="o-list-bare"> 350 <li class="o-list-bare__item"> 351 <a href="https://github.com/embarklabs" target="_blank" rel="noopener" class="u-link-ghost" title="Github">Github</a> 352 </li> 353 <li class="o-list-bare__item"> 354 <a href="https://twitter.com/EmbarkProject" target="_blank" rel="noopener" class="u-link-ghost" title="Twitter">Twitter</a> 355 </li> 356 <li class="o-list-bare__item"> 357 <a href="/docs/contributing.html" class="u-link-ghost" title="Contribute">Contribute</a> 358 </li> 359 <li class="o-list-bare__item"> 360 <a href="/community/#team" class="u-link-ghost" title="Team">Team</a> 361 </li> 362 </ul> 363 </div> 364 365 <div class="o-grid__column--1-1 o-grid__column--medium-1-2 o-grid__column--large-1-4"> 366 <p class="c-category-title u-text-light">The Status Network</p> 367 <ul class="o-list-bare two-columns"> 368 <li class="o-list-bare__item"><a class="u-link-ghost" href="https://status.im/" target="_blank">Status</a></li> 369 <li class="o-list-bare__item"><a class="u-link-ghost" href="https://keycard.tech/" target="_blank">Keycard</a></li> 370 <li class="o-list-bare__item"><a class="u-link-ghost" href="https://dap.ps/" target="_blank">dap.ps</a></li> 371 <li class="o-list-bare__item"><a class="u-link-ghost" href="https://teller.exchange/" target="_blank">Teller</a></li> 372 <li class="o-list-bare__item"><a class="u-link-ghost" href="https://assemble.fund/" target="_blank">Assemble</a></li> 373 <li class="o-list-bare__item"><a class="u-link-ghost" href="https://subspace.embarklabs.io/" target="_blank">Subspace</a></li> 374 <li class="o-list-bare__item"><a class="u-link-ghost" href="https://vac.dev/" target="_blank">Vac</a></li> 375 <li class="o-list-bare__item"><a class="u-link-ghost" href="https://nimbus.team/" target="_blank">Nimbus</a></li> 376 </ul> 377 </div> 378 </div> 379 </div> 380 <div class="c-footer__bottom"> 381 <p class="u-text-light"> 382 <a href="https://status.im/privacy-policy.html" title="Privacy Policy" target="_blank" class="u-text-light">Privacy Policy</a> 383 / © 2019-2020 Embark 384 </p> 385 </div> 386 </div> 387 </footer> 388 389 390 391 392 <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.4/highlight.min.js"></script> 393 <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script> 394 <script> 395 const EMBARK_DOC_VERSIONS = { 396 'latest': 'https://framework.embarklabs.io/docs','3.2': 'https://5ca4e0fdb29712000adde37f--embark-site-versions.netlify.com/docs/' 397 }; 398 </script> 399 400 401 <!-- Fathom - simple website analytics - https://github.com/usefathom/fathom --> 402 <script> 403 (function(f, a, t, h, o, m){ 404 a[h]=a[h]||function(){(a[h].q=a[h].q||[]).push(arguments)}; 405 o=f.createElement('script'), 406 m=f.getElementsByTagName('script')[0]; 407 o.async=1; o.src=t; o.id='fathom-script'; 408 m.parentNode.insertBefore(o,m) 409 })(document, window, '//fathom.status.im/tracker.js', 'fathom'); 410 fathom('set', 'siteId', 'YDUQQ'); 411 fathom('trackPageview'); 412 </script> 413 <!-- / Fathom --> 414 415 416 <script src="/js/index.js"></script> 417 418 419 <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script> 420 <script type="text/javascript"> 421 docsearch({ 422 apiKey: '439d8dc2add18007a2f31be4a9c0ed70', 423 indexName: 'embark', 424 inputSelector: '#search-input' 425 }); 426 </script> 427 428 </body> 429 </html> 430